# svelte/no-unknown-style-directive-property

disallow unknown style:property

  • ⚙️ This rule is included in "plugin:svelte/recommended".

# 📖 Rule Details

This rule reports an unknown CSS property in style directive.

This rule was inspired by Stylelint’s property-no-unknown rule.

Note that this rule only checks the style:property directive. If you want to check inside the style attribute and style element, consider introducing Stylelint.

<script>
  /* eslint svelte/no-unknown-style-directive-property: "error" */
  let red = 'red';
  let color = red;
</script>

<!-- ✓ GOOD -->
<div style:color={red}>...</div>
<div style:color>...</div>

<!-- ✗ BAD -->
<div style:
Unexpected unknown style directive property 'unknown-color'. (svelte/no-unknown-style-directive-property)
unknown-color={red}>...</div>
<div style:
Unexpected unknown style directive property 'red'. (svelte/no-unknown-style-directive-property)
red>...</div>

# 🔧 Options

{
  "svelte/no-unknown-style-directive-property": [
    "error",
    {
      "ignoreProperties": [],
      "ignorePrefixed": true
    }
  ]
}
  • ignoreProperties … You can specify property names or patterns that you want to ignore from checking. When specifying a pattern, specify a string like a regex literal. e.g. "/pattern/i"
  • ignorePrefixed … If true, ignores properties with vendor prefix from checking. Default is true.

# 📚 Further reading

# 🚀 Version

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

# 🔍 Implementation