# svelte/no-shorthand-style-property-overrides

disallow shorthand style properties that override related longhand properties

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

# 📖 Rule Details

This rule reports when a shorthand style property overrides a previously defined longhand property.

This rule was inspired by Stylelint’s declaration-block-no-shorthand-property-overrides rule.

<script>
  /* eslint svelte/no-shorthand-style-property-overrides: "error" */
  let red = 'red';
</script>

<!-- ✓ GOOD -->
<div style:background-repeat="repeat" style:background-color="green">...</div>
<div style="background-repeat: repeat; background-color: {red};">...</div>
<div style:background-repeat="repeat" style="background-color: {red}">...</div>

<!-- ✗ BAD -->
<div style:background-repeat="repeat" style:
Unexpected shorthand 'background' after 'background-repeat'. (svelte/no-shorthand-style-property-overrides)
background="green">...</div>
<div style="background-repeat: repeat; 
Unexpected shorthand 'background' after 'background-repeat'. (svelte/no-shorthand-style-property-overrides)
background: {red};">...</div>
<div style:background-repeat="repeat" style="
Unexpected shorthand 'background' after 'background-repeat'. (svelte/no-shorthand-style-property-overrides)
background: {red}">...</div>

# 🔧 Options

Nothing.

# 📚 Further reading

# 🚀 Version

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

# 🔍 Implementation