Enforce usage of variables for colors with stylelint-declaration-strict-value. Fix #2 (#4)

Author: thibaudcolas

CHANGELOG.md

@@ -8,7 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ### Features
 
-- Enforce accessibility-related rules with [stylelint-a11y](https://github.com/YozhikM/stylelint-a11y) ([#2](https://github.com/torchbox/stylelint-config-torchbox/issues/2)).
+- Enforce accessibility-related rules with [stylelint-a11y](https://github.com/YozhikM/stylelint-a11y) ([#2](https://github.com/torchbox/stylelint-config-torchbox/issues/2), [#3](https://github.com/torchbox/stylelint-config-torchbox/pull/3)).
+- Enforce usage of variables for colors with [stylelint-declaration-strict-value](https://github.com/AndyOGo/stylelint-declaration-strict-value) ([#2](https://github.com/torchbox/stylelint-config-torchbox/issues/2), [#4](https://github.com/torchbox/stylelint-config-torchbox/pull/4)).
 
 ### BREAKING CHANGES
 

README.md

@@ -40,6 +40,7 @@ To get the most out of this config, it is assumed that projects have the followi
 > - [`stylelint-scss`](https://github.com/kristerkari/stylelint-scss)
 > - [`stylelint-order`](https://github.com/hudochenkov/stylelint-order)
 > - [`stylelint-a11y`](https://github.com/YozhikM/stylelint-a11y)
+> - [`stylelint-declaration-strict-value`](https://github.com/AndyOGo/stylelint-declaration-strict-value)
 > - [`stylelint-config-standard`](https://github.com/stylelint/stylelint-config-standard)
 > - [`stylelint-config-prettier`](https://github.com/prettier/stylelint-config-prettier)
 
@@ -75,6 +76,7 @@ To get the most out of this config, it is assumed that projects have the followi
 - [`a11y/no-obsolete-element`](https://github.com/YozhikM/stylelint-a11y#readme)
 - [`a11y/no-text-align-justify`](https://github.com/YozhikM/stylelint-a11y#readme)
 - [`a11y/no-outline-none`](https://github.com/YozhikM/stylelint-a11y#readme)
+- [`scale-unlimited/declaration-strict-value`](https://github.com/AndyOGo/stylelint-declaration-strict-value#readme): `color, background-color, fill, stroke, /-color/, ignoreKeywords: currentColor, inherit, transparent, initial`
 
 #### Rules of `stylelint-config-standard`
 
@@ -256,6 +258,13 @@ To get the most out of this config, it is assumed that projects have the followi
 - [`scss/dollar-variable-default`](https://github.com/kristerkari/stylelint-scss#readme)
 - [`scss/no-dollar-variables`](https://github.com/kristerkari/stylelint-scss#readme)
 - [`order/properties-alphabetical-order`](https://github.com/hudochenkov/stylelint-order)
+- [`a11y/font-size-is-readable`](https://github.com/YozhikM/stylelint-a11y#readme)
+- [`a11y/line-height-is-vertical-rhythmed`](https://github.com/YozhikM/stylelint-a11y#readme)
+- [`a11y/media-prefers-color-scheme`](https://github.com/YozhikM/stylelint-a11y#readme)
+- [`a11y/media-prefers-reduced-motion`](https://github.com/YozhikM/stylelint-a11y#readme)
+- [`a11y/no-display-none`](https://github.com/YozhikM/stylelint-a11y#readme)
+- [`a11y/no-spread-text`](https://github.com/YozhikM/stylelint-a11y#readme)
+- [`a11y/selector-pseudo-class-focus`](https://github.com/YozhikM/stylelint-a11y#readme)
 - [`at-rule-blacklist`](https://stylelint.io/user-guide/rules/at-rule-blacklist/)
 - [`at-rule-property-requirelist`](https://stylelint.io/user-guide/rules/at-rule-property-requirelist/)
 - [`at-rule-whitelist`](https://stylelint.io/user-guide/rules/at-rule-whitelist/)

config.js

@@ -3,7 +3,12 @@
 // See https://stylelint.io/user-guide/rules/.
 module.exports = {
     extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
-    plugins: ['stylelint-scss', 'stylelint-order', 'stylelint-a11y'],
+    plugins: [
+        'stylelint-scss',
+        'stylelint-order',
+        'stylelint-a11y',
+        'stylelint-declaration-strict-value',
+    ],
     rules: {
         'color-named': 'never',
         'number-leading-zero': 'always',
@@ -43,5 +48,16 @@ module.exports = {
         'a11y/no-obsolete-element': true,
         'a11y/no-text-align-justify': true,
         'a11y/no-outline-none': true,
+        'scale-unlimited/declaration-strict-value': [
+            ['color', 'background-color', 'fill', 'stroke', '/-color/'],
+            {
+                ignoreKeywords: [
+                    'currentColor',
+                    'inherit',
+                    'transparent',
+                    'initial',
+                ],
+            },
+        ],
     },
 };

package-lock.json

@@ -36,6 +36,7 @@
     "stylelint-a11y": "^1.2.1",
     "stylelint-config-prettier": "^5.2.0",
     "stylelint-config-standard": "^18.3.0",
+    "stylelint-declaration-strict-value": "^1.1.6",
     "stylelint-order": "^3.1.1",
     "stylelint-scss": "^3.10.0"
   },

package.json

@@ -220,6 +220,23 @@ Object {
     true,
   ],
   "rule-empty-line-before": null,
+  "scale-unlimited/declaration-strict-value": Array [
+    Array [
+      "color",
+      "background-color",
+      "fill",
+      "stroke",
+      "/-color/",
+    ],
+    Object {
+      "ignoreKeywords": Array [
+        "currentColor",
+        "inherit",
+        "transparent",
+        "initial",
+      ],
+    },
+  ],
   "scss/at-mixin-argumentless-call-parentheses": Array [
     "always",
   ],

src/__snapshots__/semver.test.js.snap

@@ -13,7 +13,7 @@ describe('config', () => {
                 configFile: path.join(__dirname, '..', 'config.js'),
             })
             .then((results) => {
-                expect(results.results[0].warnings.length).toBe(6);
+                expect(results.results[0].warnings.length).toBe(7);
             });
     });
 });

src/config.test.js

@@ -10,6 +10,7 @@ describe('semver - should those tests break, consider releasing a new major vers
               "stylelint-a11y": "^1.2.1",
               "stylelint-config-prettier": "^5.2.0",
               "stylelint-config-standard": "^18.3.0",
+              "stylelint-declaration-strict-value": "^1.1.6",
               "stylelint-order": "^3.1.1",
               "stylelint-scss": "^3.10.0",
             }