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
*/
// 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 useFontSizeTokens from "../rules/use-font-size-tokens.mjs";
let plugin = stylelint.createPlugin(
useFontSizeTokens.ruleName,
useFontSizeTokens
);
let {
ruleName,
rule: { messages },
} = plugin;
testRule({
plugins: [plugin],
ruleName,
config: [true, { tokenType: "brand" }],
fix: false,
accept: [
// allowed token values
{
code: ".a { font-size: var(--font-size-root); }",
description: "Using root font-size token is valid.",
},
{
code: ".a { font-size: var(--font-size-xsmall); }",
description: "Using xsmall font-size token is valid.",
},
{
code: ".a { font-size: var(--font-size-small); }",
description: "Using small font-size token is valid.",
},
{
code: ".a { font-size: var(--font-size-large); }",
description: "Using large font-size token is valid.",
},
{
code: ".a { font-size: var(--font-size-xlarge); }",
description: "Using xlarge font-size token is valid.",
},
{
code: ".a { font-size: var(--font-size-xxlarge); }",
description: "Using xxlarge font-size token is valid.",
},
{
code: ".a { font-size: var(--font-size-xxxlarge); }",
description: "Using xxxlarge font-size token is valid.",
},
{
code: ".a { font-size: var(--heading-font-size-medium); }",
description: "Using heading-font-size-medium token is valid.",
},
{
code: ".a { font-size: var(--heading-font-size-large); }",
description: "Using heading-font-size-large token is valid.",
},
{
code: ".a { font-size: var(--heading-font-size-xlarge); }",
description: "Using heading-font-size-xlarge token is valid.",
},
// allowed CSS values
{
code: ".a { font-size: xx-small; }",
description: "Using xx-small keyword is valid.",
},
{
code: ".a { font-size: x-small; }",
description: "Using x-small keyword is valid.",
},
{
code: ".a { font-size: small; }",
description: "Using small keyword is valid.",
},
{
code: ".a { font-size: medium; }",
description: "Using medium keyword is valid.",
},
{
code: ".a { font-size: large; }",
description: "Using large keyword is valid.",
},
{
code: ".a { font-size: x-large; }",
description: "Using x-large keyword is valid.",
},
{
code: ".a { font-size: xx-large; }",
description: "Using xx-large keyword is valid.",
},
{
code: ".a { font-size: xxx-large; }",
description: "Using xxx-large keyword is valid.",
},
{
code: ".a { font-size: smaller; }",
description: "Using smaller keyword is valid.",
},
{
code: ".a { font-size: larger; }",
description: "Using larger keyword is valid.",
},
{
code: ".a { font-size: inherit; }",
description: "Using inherit is valid.",
},
{
code: ".a { font-size: initial; }",
description: "Using initial is valid.",
},
{
code: ".a { font-size: unset; }",
description: "Using unset is valid.",
},
{
code: ".a { font-size:var(--my-local, var(--font-size-small)); }",
description:
"Using a custom property with fallback to design token is valid.",
},
{
code: `
:root { --custom-token: var(--font-size-small); }
.a { font-size: var(--custom-token); }
`,
description:
"Using a custom property with fallback to a design token is valid.",
},
],
reject: [
{
code: ".a { font-size: 12px; }",
message: messages.rejected("12px"),
description: "Using a pixel value should use a design token.",
},
{
code: ".a { font-size: 1rem; }",
message: messages.rejected("1rem"),
description: "Using a rem value should use a design token.",
},
{
code: ".a { font-size: 1.2em; }",
message: messages.rejected("1.2em"),
description: "Using an em value should use a design token.",
},
{
code: ".a { font-size: 100%; }",
message: messages.rejected("100%"),
description: "Using a percentage value should use a design token.",
},
{
code: ".a { font-size: 16pt; }",
message: messages.rejected("16pt"),
description: "Using a pt value should use a design token.",
},
{
code: ".a { font-size: calc(var(--my-local) + 2px); }",
message: messages.rejected("calc(var(--my-local) + 2px)"),
description:
"Using a calc() with custom variables should use a design token.",
},
{
code: ".a { font-size: var(--random-token, 14px); }",
message: messages.rejected("var(--random-token, 14px)"),
description: "Using a custom property should use a design token.",
},
{
code: `
:root { --custom-token: 14px; }
.a { font-size: var(--custom-token); }
`,
message: messages.rejected("var(--custom-token)"),
description:
"Using a custom property that does not resolve to a design token should use a design token.",
},
],
});