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
*/
// eslint-disable-next-line import/no-unresolved
import { testRule } from "stylelint-test-rule-node";
import stylelint from "stylelint";
import noNonSemanticTokenUsage from "../rules/no-non-semantic-token-usage.mjs";
let plugin = stylelint.createPlugin(
noNonSemanticTokenUsage.ruleName,
noNonSemanticTokenUsage
);
let {
ruleName,
rule: { messages },
} = plugin;
testRule({
plugins: [plugin],
ruleName,
config: true,
fix: false,
accept: [
// * allowed token usage
{
code: ".a { background-color: var(--background-color-canvas); }",
description:
"Using the canvas background color token with the background-color property is valid.",
},
{
code: ".a { background-color: var(--background-color-canvas, #fff); }",
description:
"Using the canvas background color token with the background-color property is valid.",
},
{
code: ".a { background-color: var(--background-color-canvas), #fff; }",
description:
"Using the canvas background color token with the background-color property is valid.",
},
{
code: ".a { background: repeat cover var(--background-color-canvas); }",
description:
"Using the canvas background color token with the background property is valid.",
},
{
code: ".a { border-color: var(--border-color); }",
description:
"Using the border color token with the border-color property is valid.",
},
{
code: ".a { border: 2px solid var(--border-color); }",
description:
"Using the border color token with the border shorthand property is valid.",
},
{
code: ".a { border: var(--border-width) solid var(--border-color); }",
description:
"Using the border width and border color tokens with the border shorthand property are valid.",
},
{
code: ".a { border-radius: var(--border-radius-small, 0.25rem); }",
description:
"Using the small border radius token with the border-radius property is valid.",
},
{
code: ".a { font-size: var(--font-size-small); }",
description:
"Using the small font size token with the font-size property is valid.",
},
{
code: ".a { font: bold var(--font-size-small) 'Open Sans' sans-serif; }",
description:
"Using the small font size token with the font shorthand property is valid.",
},
{
code: ".a { font-weight: var(--font-weight-bold); }",
description:
"Using the bold font size token with the font-weight property is valid.",
},
{
code: ".a { font: var(--font-weight-bold) 16px 'Open Sans' sans-serif; }",
description:
"Using the bold font weight token with the font shorthand property is valid.",
},
{
code: ".a { fill: var(--icon-color); }",
description:
"Using the icon color token with the fill property is valid.",
},
{
code: ".a { height: var(--input-text-min-height); }",
description:
"Using the input text minimum height token with the height property is valid.",
},
{
code: ".a { inset: var(--size-item-small) var(--size-item-small) var(--size-item-large) var(--size-item-xlarge); }",
description:
"Using the small, large, and xlarge size tokens with the inset property is valid.",
},
{
code: ".a { opacity: var(--button-opacity-disabled); }",
description:
"Using the disabled button opacity token with the opacity property is valid.",
},
{
code: ".a { padding: var(--space-small) 4px; }",
description:
"Using the small space token with the padding property is valid.",
},
{
code: ".a { color: var(--text-color); }",
description:
"Using the text color token with the color property is valid.",
},
{
code: ".a { color: var(--button-text-color); }",
description:
"Using the button text color token with the color property is valid.",
},
{
code: ".a { box-shadow: var(--box-shadow-level-3); }",
description:
"Using the 3rd-level box shadow token with the box-shadow property is valid.",
},
{
code: ".a { box-shadow: var(--box-shadow-level-2), var(--box-shadow-level-4); }",
description:
"Using the 2nd-level and 4th-level box shadow tokens with the box-shadow property is valid.",
},
{
code: `
button {
background-color: var(--background-color-canvas);
color: var(--text-color);
border: 2px solid var(--border-color);
}
`,
description:
"Using the canvas background color token with the background-color property, the text color token with the color property, and the border color token with the border shorthand property are valid.",
},
],
reject: [
{
code: ".a { background: var(--border-color); }",
message: messages.rejected("var(--border-color)"),
description:
"Unexpected usage of `var(--border-color)`. Design tokens should only be used with properties matching their semantic meaning.",
},
{
code: ".a { border: var(--font-size-xsmall) solid var(--border-color); }",
message: messages.rejected("var(--font-size-xsmall)"),
description:
"Unexpected usage of `var(--font-size-xsmall)`. Design tokens should only be used with properties matching their semantic meaning.",
},
{
code: ".a { border: var(--border-width) solid var(--background-color-canvas); }",
message: messages.rejected("var(--background-color-canvas)"),
description:
"Unexpected usage of `var(--background-color-canvas)`. Design tokens should only be used with properties matching their semantic meaning.",
},
{
code: `
:root { --local-background-color: var(--border-color); }
.a { background: var(--local-background-color); }
`,
message: messages.rejected("var(--border-color)"),
description:
"Unexpected usage of `var(--border-color)`. Design tokens should only be used with properties matching their semantic meaning.",
},
{
code: ".a { padding: var(--space-small) 4px var(--size-item-large) var(--space-small); }",
message: messages.rejected("var(--size-item-large)"),
description:
"Unexpected usage of `var(--size-item-large)`. Design tokens should only be used with properties matching their semantic meaning.",
},
],
});