feat(stylelint): add `stylelint-declaration-block-no-ignored-properties` plugin to align with project convention

[beatrizsmerino]

feat(stylelint): add stylelint-declaration-block-no-ignored-properties plugin to align with project convention

⏱️ Estimate	📊 Priority	📏 Size	📅 Start	📅 End
2h	P1	S	04-05-2026	17-05-2026

📸 Screenshots

Current	Expected
N/A — This change has no visual impact.	N/A — This change has no visual impact.

📝 Summary

• Install the stylelint-declaration-block-no-ignored-properties plugin
• Register it in the plugins array of the local stylelint.config.* file
• Enable the plugin/declaration-block-no-ignored-properties: true rule in the local rules block
• Align with the project convention — this plugin is already active in other repos of the unification project

💡 Why this change?

• The stylelint-declaration-block-no-ignored-properties plugin detects CSS declarations that have no effect because another declaration in the same block invalidates them
• Common cases caught by the rule:
  • width / height / top / left / right / bottom set on an element with display: inline (those properties are ignored on inline elements)
  • Positioning offsets (top, left, etc.) set without a position other than static
  • vertical-align set on a non-inline / non-table-cell element
• Without the plugin these dead declarations silently survive in the codebase, increasing CSS noise and confusing future contributors
• Another repo in the unification project already uses the plugin; aligning the rest enforces the same code-quality bar everywhere

✅ Benefits

• Catches dead CSS declarations at lint time, before they reach review or production
• Prevents subtle bugs caused by declarations that "look right" but are silently dropped by the browser
• Consistent linting baseline across all repos in the unification project

⚠️ Consequences

• Existing files in this repo may currently contain dead declarations that will start to fail lint after this change. Each one must be fixed (remove the dead declaration or change the related property — e.g. swap display: inline for display: inline-block if width / height are needed)

📋 Steps

Phase 1: Install the plugin

• Install the new package as devDependencies:
  • stylelint-declaration-block-no-ignored-properties

npm install -D stylelint-declaration-block-no-ignored-properties@^2.8.0

This will also update package.json devDependencies and package-lock.json. Expected diff in package.json:

 "devDependencies": {
 	...
+	"stylelint-declaration-block-no-ignored-properties": "^2.8.0",
 	...
 }

Phase 2: Register the plugin and enable the rule in stylelint.config.*

• Create the plugins array with the new plugin (this repo does not currently declare a plugins array since it uses CSS only — no stylelint-scss):

 "extends": [
 	"stylelint-config-standard",
 	"stylelint-config-property-sort-order-smacss",
 ],
+"plugins": [
+	"stylelint-declaration-block-no-ignored-properties",
+],
 "rules": {

• Add the rule to the rules block (alphabetical position):

 "rules": {
 	...
+	"plugin/declaration-block-no-ignored-properties": true,
 	...
 }

🧪 Tests

• Verify all style files pass linting:

npm run lint

• If lint reports plugin/declaration-block-no-ignored-properties errors, fix each occurrence by removing the dead declaration or changing the related property so the declaration becomes effective

🔗 References

Files to modify

• stylelint.config.cjs (or .js / .mjs depending on the repo)
• package.json
• package-lock.json

Documentation

• https://github.com/kristerkari/stylelint-declaration-block-no-ignored-properties
• https://www.npmjs.com/package/stylelint-declaration-block-no-ignored-properties