commit 4e73394880994a432882bfe40da13994e6c8338c
parent c936a96094350a7d314f43f204bbbdfc7a6ad0ca
Author: Jon Oliver <jooliver@mozilla.com>
Date: Tue, 18 Nov 2025 20:41:34 +0000
Bug 1988869 - update background color stylelint rule to allow black and white r=frontend-codestyle-reviewers,Standard8
- update background color stylelint rule to allow black and white
- add autofix functionality for black and white values
Differential Revision: https://phabricator.services.mozilla.com/D270693
Diffstat:
3 files changed, 177 insertions(+), 1 deletion(-)
diff --git a/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-background-color-tokens.rst b/docs/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-background-color-tokens.rst
@@ -115,3 +115,69 @@ The rule also allows these non-token values:
.current-background-color {
background-color: currentColor;
}
+
+Autofix functionality
+---------------------
+
+This rule can automatically fix some violations by replacing hex color values with
+appropriate color names. Examples of autofixable violations:
+
+.. code-block:: css
+
+ /* Before */
+ .white-background {
+ background-color: #fff;
+ }
+
+ /* After autofix */
+ .white-background {
+ background-color: white;
+ }
+
+.. code-block:: css
+
+ /* Before */
+ .white-background {
+ background-color: #ffffff;
+ }
+
+ /* After autofix */
+ .white-background {
+ background-color: white;
+ }
+
+.. code-block:: css
+
+ /* Before */
+ .black-background {
+ background-color: #000;
+ }
+
+ /* After autofix */
+ .black-background {
+ background-color: black;
+ }
+
+.. code-block:: css
+
+ /* Before */
+ .black-background {
+ background-color: #000000;
+ }
+
+ /* After autofix */
+ .black-background {
+ background-color: black;
+ }
+
+.. code-block:: css
+
+ /* Before */
+ .custom-background {
+ background: url('image.png') #fff;
+ }
+
+ /* After autofix */
+ .custom-background {
+ background: url('image.png') white;
+ }
diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/rules/use-background-color-tokens.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/rules/use-background-color-tokens.mjs
@@ -3,6 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import stylelint from "stylelint";
+import valueParser from "postcss-value-parser";
import {
namespace,
createTokenNamesArray,
@@ -25,7 +26,7 @@ const messages = ruleMessages(ruleName, {
const meta = {
url: "https://firefox-source-docs.mozilla.org/code-quality/lint/linters/stylelint-plugin-mozilla/rules/use-background-color-tokens.html",
- fixable: false,
+ fixable: true,
};
// Gather an array of the ready css `['var(--token-name)']`
@@ -40,10 +41,19 @@ const ALLOW_LIST = createAllowList([
"auto",
"normal",
"none",
+ "white",
+ "black",
]);
const CSS_PROPERTIES = ["background", "background-color"];
+const VIOLATION_AUTOFIX_MAP = {
+ "#fff": "white",
+ "#ffffff": "white",
+ "#000": "black",
+ "#000000": "black",
+};
+
const ruleFunction = primaryOption => {
return (root, result) => {
const validOptions = validateOptions(result, ruleName, {
@@ -82,6 +92,23 @@ const ruleFunction = primaryOption => {
node: declarations,
result,
ruleName,
+ fix: () => {
+ const val = valueParser(declarations.value);
+ let hasFixes = false;
+ val.walk(node => {
+ if (node.type == "word") {
+ const token =
+ VIOLATION_AUTOFIX_MAP[node.value.trim().toLowerCase()];
+ if (token) {
+ hasFixes = true;
+ node.value = token;
+ }
+ }
+ });
+ if (hasFixes) {
+ declarations.value = val.toString();
+ }
+ },
});
});
};
diff --git a/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-background-color-tokens.tests.mjs b/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-background-color-tokens.tests.mjs
@@ -326,3 +326,86 @@ testRule({
},
],
});
+
+testRule({
+ plugins: [plugin],
+ ruleName,
+ config: true,
+ fix: true,
+ reject: [
+ {
+ code: ".bg { background-color: #fff; }",
+ fixed: ".bg { background-color: white; }",
+ message: messages.rejected("#fff"),
+ description: "#fff should be fixed to white.",
+ },
+ {
+ code: ".bg { background-color: #ffffff; }",
+ fixed: ".bg { background-color: white; }",
+ message: messages.rejected("#ffffff"),
+ description: "#ffffff should be fixed to white.",
+ },
+ {
+ code: ".bg { background-color: #FFF; }",
+ fixed: ".bg { background-color: white; }",
+ message: messages.rejected("#FFF"),
+ description: "#FFF should be fixed to white.",
+ },
+ {
+ code: ".bg { background-color: #FFFFFF; }",
+ fixed: ".bg { background-color: white; }",
+ message: messages.rejected("#FFFFFF"),
+ description: "#FFFFFF should be fixed to white.",
+ },
+ {
+ code: ".bg { background-color: #000; }",
+ fixed: ".bg { background-color: black; }",
+ message: messages.rejected("#000"),
+ description: "#000 should be fixed to black.",
+ },
+ {
+ code: ".bg { background-color: #000000; }",
+ fixed: ".bg { background-color: black; }",
+ message: messages.rejected("#000000"),
+ description: "#000000 should be fixed to black.",
+ },
+ {
+ code: ".bg { background: #fff; }",
+ fixed: ".bg { background: white; }",
+ message: messages.rejected("#fff"),
+ description: "#fff should be fixed to white in background shorthand.",
+ },
+ {
+ code: ".bg { background: #ffffff; }",
+ fixed: ".bg { background: white; }",
+ message: messages.rejected("#ffffff"),
+ description: "#ffffff should be fixed to white in background shorthand.",
+ },
+ {
+ code: ".bg { background: #000; }",
+ fixed: ".bg { background: black; }",
+ message: messages.rejected("#000"),
+ description: "#000 should be fixed to black in background shorthand.",
+ },
+ {
+ code: ".bg { background: #000000; }",
+ fixed: ".bg { background: black; }",
+ message: messages.rejected("#000000"),
+ description: "#000000 should be fixed to black in background shorthand.",
+ },
+ {
+ code: ".bg { background: url('image.png') #fff; }",
+ fixed: ".bg { background: url('image.png') white; }",
+ message: messages.rejected("url('image.png') #fff"),
+ description:
+ "#fff should be fixed to white in background shorthand with other properties.",
+ },
+ {
+ code: ".bg { background: url('image.png') #000 repeat-y; }",
+ fixed: ".bg { background: url('image.png') black repeat-y; }",
+ message: messages.rejected("url('image.png') #000 repeat-y"),
+ description:
+ "#000 should be fixed to black in background shorthand with other properties.",
+ },
+ ],
+});
