firefox-main/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-background-color-tokens.tests.mjs (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

/**
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/PL/2.0/.
*/
// Bug 1948378: remove this exception when the eslint import plugin fully
// supports exports in package.json files
// eslint-disable-next-line import/no-unresolved
import { testRule } from "stylelint-test-rule-node";
import stylelint from "stylelint";
import useBackgroundColorTokens from "../rules/use-background-color-tokens.mjs";
let plugin = stylelint.createPlugin(
useBackgroundColorTokens.ruleName,
useBackgroundColorTokens
);
let {
ruleName,
rule: { messages },
} = plugin;
testRule({
plugins: [plugin],
ruleName,
config: true,
fix: false,
accept: [
{
code: ".bg { background-color: var(--background-color-box); }",
description: "Using background-color token is valid.",
},
{
code: ".bg { background-color: var(--background-color-box, #666); }",
description:
"Using background-color token with a raw color fallback is valid.",
},
{
code: ".bg { background-color: var(--background-color-box, var(--another-token)); }",
description:
"Using background-color token with a variable fallback is valid.",
},
{
code: `
:root { --custom-token: var(--background-color-box); }
.bg { background-color: var(--custom-token); }
`,
description:
"Using a custom token that resolves to a background-color token is valid.",
},
{
code: ".bg { background-color: inherit; }",
description: "Using a keyword is valid.",
},
{
code: ".bg { background-color: initial; }",
description: "Using a keyword is valid.",
},
{
code: ".bg { background-color: revert; }",
description: "Using a keyword is valid.",
},
{
code: ".bg { background-color: revert-layer; }",
description: "Using a keyword is valid.",
},
{
code: ".bg { background-color: unset; }",
description: "Using a keyword is valid.",
},
{
code: ".bg { background-color: transparent; }",
description: "Using a keyword is valid.",
},
{
code: ".bg { background-color: currentColor; }",
description: "Using a keyword is valid.",
},
{
code: ".bg { background-color: auto; }",
description: "Using a keyword is valid.",
},
{
code: ".bg { background-color: normal; }",
description: "Using a keyword is valid.",
},
{
code: ".bg { background-color: none; }",
description: "Using a keyword is valid.",
},
{
code: ".bg { background: var(--background-color-box); }",
description: "Using background-color token is valid in the shorthand.",
},
{
code: ".bg { background: var(--background-color-box, #666); }",
description:
"Using background-color token with a raw color fallback is valid in the shorthand.",
},
{
code: ".bg { background: var(--background-color-box, var(--another-token)); }",
description:
"Using background-color token with a token fallback is valid in the shorthand.",
},
{
code: `
:root { --custom-token: var(--background-color-box); }
.bg { background: var(--custom-token); }
`,
description:
"Using a custom token that resolves to a background-color token is valid in the shorthand.",
},
{
code: ".bg { background: url('image.png'); }",
description:
"Using the background shorthand without any color declarations is valid.",
},
{
code: ".bg { background: linear-gradient(to bottom, #fff, #000) var(--background-color-box); }",
description:
"Using the background shorthand, other properties plus a background-color token is valid.",
},
{
code: ".bg { background: url('image.png') no-repeat center center / auto var(--background-color-box, oklch(69% 0.19 15)); }",
description:
"Using a background-color token with a raw color value fallback is valid in the shorthand.",
},
{
code: ".bg { background: url('image.png') fixed content-box var(--background-color-box, var(--another-token)); }",
description:
"Using a background-color token with another token fallback is valid in the shorthand.",
},
{
code: `
:root { --custom-token: var(--background-color-box); }
.bg { background: url('image.png') var(--custom-token) repeat-y fixed; }
`,
description:
"Using a custom token that resolves to a background-color token is valid in the shorthand.",
},
{
code: ".bg { background: inherit; }",
description: "Using a keyword is valid in the shorthand.",
},
{
code: ".bg { background: initial; }",
description: "Using a keyword is valid in the shorthand.",
},
{
code: ".bg { background: revert; }",
description: "Using a keyword is valid in the shorthand.",
},
{
code: ".bg { background: revert-layer; }",
description: "Using a keyword is valid in the shorthand.",
},
{
code: ".bg { background: unset; }",
description: "Using a keyword is valid in the shorthand.",
},
{
code: ".bg { background: transparent; }",
description: "Using a keyword is valid in the shorthand.",
},
{
code: ".bg { background: currentColor; }",
description: "Using a keyword is valid in the shorthand.",
},
{
code: ".bg { background: auto; }",
description: "Using a keyword is valid in the shorthand.",
},
{
code: ".bg { background: normal; }",
description: "Using a keyword is valid in the shorthand.",
},
{
code: ".bg { background: none; }",
description: "Using a keyword is valid in the shorthand.",
},
],
reject: [
{
code: ".bg { background-color: #666; }",
message: messages.rejected("#666"),
description: "#666 should use a background-color design token.",
},
{
code: ".bg { background-color: #fff0; }",
message: messages.rejected("#fff0"),
description: "#fff0 should use a background-color design token.",
},
{
code: ".bg { background-color: #666666; }",
message: messages.rejected("#666666"),
description: "#666666 should use a background-color design token.",
},
{
code: ".bg { background-color: #ffffff00; }",
message: messages.rejected("#ffffff00"),
description: "#ffffff00 should use a background-color design token.",
},
{
code: ".bg { background-color: oklch(69% 0.19 15); }",
message: messages.rejected("oklch(69% 0.19 15)"),
description:
"oklch(69% 0.19 15) should use a background-color design token.",
},
{
code: ".bg { background-color: rgba(42 42 42 / 0.15); }",
message: messages.rejected("rgba(42 42 42 / 0.15)"),
description:
"rgba(42 42 42 / 0.15) should use a background-color design token.",
},
{
code: ".bg { background-color: ButtonFace; }",
message: messages.rejected("ButtonFace"),
description: "ButtonFace should use a background-color design token.",
},
{
code: ".bg { background-color: var(--random-token, oklch(69% 0.19 15)); }",
message: messages.rejected("var(--random-token, oklch(69% 0.19 15))"),
description:
"var(--random-token, oklch(69% 0.19 15)) should use a background-color design token.",
},
{
code: `
:root { --custom-token: #666; }
.bg { background-color: var(--custom-token); }
`,
message: messages.rejected("var(--custom-token)"),
description:
"var(--custom-token) should use a background-color design token.",
},
{
code: ".bg { background: #666; }",
message: messages.rejected("#666"),
description: "#666 should use a background-color design token.",
},
{
code: ".bg { background: #fff0; }",
message: messages.rejected("#fff0"),
description: "#fff0 should use a background-color design token.",
},
{
code: ".bg { background: #666666; }",
message: messages.rejected("#666666"),
description: "#666666 should use a background-color design token.",
},
{
code: ".bg { background: #ffffff00; }",
message: messages.rejected("#ffffff00"),
description: "#ffffff00 should use a background-color design token.",
},
{
code: ".bg { background: oklch(69% 0.19 15); }",
message: messages.rejected("oklch(69% 0.19 15)"),
description:
"oklch(69% 0.19 15) should use a background-color design token.",
},
{
code: ".bg { background: rgba(42 42 42 / 0.15); }",
message: messages.rejected("rgba(42 42 42 / 0.15)"),
description:
"rgba(42 42 42 / 0.15) should use a background-color design token.",
},
{
code: ".bg { background: border-box #666; }",
message: messages.rejected("border-box #666"),
description:
"border-box #666 should use a background-color design token.",
},
{
code: ".bg { background: url('image.png') #fff0, #666; }",
message: messages.rejected("url('image.png') #fff0, #666"),
description:
"url('image.png') #fff0, #666 should use a background-color design token.",
},
{
code: ".bg { background: url('image.png') oklch(69% 0.19 15) repeat-y; }",
message: messages.rejected(
"url('image.png') oklch(69% 0.19 15) repeat-y"
),
description:
"url('image.png') oklch(69% 0.19 15) repeat-y should use a background-color design token.",
},
{
code: ".bg { background: url('image.png') top center fixed #ffffff00; }",
message: messages.rejected("url('image.png') top center fixed #ffffff00"),
description:
"url('image.png') top center fixed #ffffff00 should use a background-color design token.",
},
{
code: ".bg { background: url('image.png') center left / auto no-repeat scroll content-box padding-box red, rgba(42 42 42 / 0.15); }",
message: messages.rejected(
"url('image.png') center left / auto no-repeat scroll content-box padding-box red, rgba(42 42 42 / 0.15)"
),
description:
"url('image.png') center left / auto no-repeat scroll content-box padding-box red, rgba(42 42 42 / 0.15) should use a background-color design token.",
},
{
code: ".bg { background: url('image.png') var(--random-token, rgba(42 42 42 / 0.15)); }",
message: messages.rejected(
"url('image.png') var(--random-token, rgba(42 42 42 / 0.15))"
),
description:
"url('image.png') var(--random-token, rgba(42 42 42 / 0.15)) should use a background-color design token.",
},
{
code: ".bg { background: url('image.png') Canvas; }",
message: messages.rejected("url('image.png') Canvas"),
description:
"url('image.png') Canvas should use a background-color design token.",
},
{
code: `
:root { --custom-token: #666666; }
.bg { background: url('image.png') no-repeat center / auto var(--custom-token); }
`,
message: messages.rejected(
"url('image.png') no-repeat center / auto var(--custom-token)"
),
description:
"url('image.png') no-repeat center / auto var(--custom-token) should use a background-color design token.",
},
],
});