# svelte/require-optimized-style-attribute

require style attributes that can be optimized

# 📖 Rule Details

This rule reports style attributes written in a format that cannot be optimized.

Svelte parses the content written in the style attribute and tries to optimize it. (See https://github.com/sveltejs/svelte/pull/810)
If Svelte can be successfully optimized, Svelte can minimize the number of re-renders.

e.g.

template:

<div
  style="
    font-size: 12px;
    color: {color};
    transform: translate({x}px, {y}px);
  "
/>

compiled:

div.style.setProperty('font-size', '12px'); // font-size style is not updated once it is initially set.
div.style.setProperty('color', color); // color style is updated only when color variable is updated.
div.style.setProperty('transform', `translate(${x}px, ${y}px)`); // transform style is updated only when x, or y variables are updated.

However, if the optimization fails, it will be re-rendered triggered by the update of all variables described in the style attribute.

e.g.

template:

<script>
  $: transformStyle = `transform: translate(${x}px, ${y}px)`;
</script>

<div
  style="
    font-size: 12px;
    color: {color};
    {transformStyle}
  "
/>

compiled:

// If any of variables color, x, or y are updated, all styles will be updated.
div.setAttribute('style', `font-size: 12px; color: ${color}; ${/* transformStyle */ ctx[0]}`);

Examples:

<script>
  /* eslint svelte/require-optimized-style-attribute: "error" */
  let color = 'blue';
  let x = 12,
    y = 12;
</script>

<!-- ✓ GOOD -->
<div style="font-size: 12px; color: {color}; transform: translate({x}px, {y}px);" />
<div style:pointer-events={pointerEvents ? null : 'none'} />

<!-- ✗ BAD -->
<div style="font-size: 12px; color: {color}; 
It cannot be optimized because too complex. (svelte/require-optimized-style-attribute)
{transformStyle}" />
<div style=
It cannot be optimized because too complex. (svelte/require-optimized-style-attribute)
{pointerEvents === false ? 'pointer-events:none;' : ''} />

<div style="font-size: 12px; 
It cannot be optimized because contains comments. (svelte/require-optimized-style-attribute)
/* comment */ color: {color};" />
<div style="font-size: 12px; 
It cannot be optimized because property of style declaration contain interpolation. (svelte/require-optimized-style-attribute)
{key}: red;" />

# 🔧 Options

Nothing.

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v0.32.0

# 🔍 Implementation