firefox-main/tools/lint/stylelint/stylelint-plugin-mozilla/tests/use-design-tokens.font-weight.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/MPL/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 useDesignTokens from "../rules/use-design-tokens.mjs";
let plugin = stylelint.createPlugin(useDesignTokens.ruleName, useDesignTokens);
let {
ruleName,
rule: { messages },
} = plugin;
testRule({
plugins: [plugin],
ruleName,
config: true,
fix: false,
accept: [
{
code: ".a { font-weight: normal; }",
description: "Using the normal keyword is valid.",
},
{
code: ".a { font-weight: normal; }",
description: "Using the normal keyword is valid.",
},
{
code: ".a { font-weight: var(--font-weight); }",
description: "Using font-weight token is valid.",
},
{
code: ".a { font-weight: var(--font-weight-semibold); }",
description: "Using font-weight-semibold token is valid.",
},
{
code: ".a { font-weight: var(--font-weight-bold); }",
description: "Using font-weight-bold token is valid.",
},
{
code: ".a { font-weight: var(--button-font-weight); }",
description: "Using button-font-weight token is valid.",
},
{
code: ".a { font-weight: var(--heading-font-weight); }",
description: "Using heading-font-weight token is valid.",
},
{
code: ".a { font-weight: inherit; }",
description: "Using inherit is valid.",
},
{
code: ".a { font-weight: initial; }",
description: "Using initial is valid.",
},
{
code: ".a { font-weight: unset; }",
description: "Using unset is valid.",
},
{
code: ".a { font-weight:var(--my-local, var(--font-weight-semibold)); }",
description:
"Using a custom property with fallback to design token is valid.",
},
{
code: `
:root { --custom-token: var(--font-weight-semibold); }
.a { font-weight: var(--custom-token); }
`,
description:
"Using a custom property with fallback to a design token is valid.",
},
{
code: `
:root { --custom-token: normal; }
.a { font-weight: var(--custom-token); }
`,
description:
"Using a custom property with fallback to the normal keyword is valid.",
},
],
reject: [
{
code: ".a { font-weight: bold; }",
message: messages.rejected(
"bold",
["font-weight"],
"var(--font-weight-bold)"
),
description: "Using bold keyword should use a design token.",
},
{
code: ".a { font-weight: bolder; }",
message: messages.rejected(
"bolder",
["font-weight"],
"var(--font-weight-bold)"
),
description: "Using bolder keyword should use a design token.",
},
{
code: ".a { font-weight: 100; }",
message: messages.rejected("100", ["font-weight"]),
description: "Using a numeric value should use a design token.",
},
{
code: ".a { font-weight: 200; }",
message: messages.rejected("200", ["font-weight"], "normal"),
description: "Using a numeric value should use a design token.",
},
{
code: ".a { font-weight: 300; }",
message: messages.rejected("300", ["font-weight"], "normal"),
description: "Using a numeric value should use a design token.",
},
{
code: ".a { font-weight: 400; }",
message: messages.rejected("400", ["font-weight"], "normal"),
description: "Using a numeric value should use a design token.",
},
{
code: ".a { font-weight: 500; }",
message: messages.rejected(
"500",
["font-weight"],
"var(--font-weight-semibold)"
),
description: "Using a numeric value should use a design token.",
},
{
code: ".a { font-weight: 600; }",
message: messages.rejected(
"600",
["font-weight"],
"var(--font-weight-semibold)"
),
description: "Using a numeric value should use a design token.",
},
{
code: ".a { font-weight: 700; }",
message: messages.rejected(
"700",
["font-weight"],
"var(--font-weight-bold)"
),
description: "Using a numeric value should use a design token.",
},
{
code: ".a { font-weight: 800; }",
message: messages.rejected(
"800",
["font-weight"],
"var(--font-weight-bold)"
),
description: "Using a numeric value should use a design token.",
},
{
code: ".a { font-weight: 900; }",
message: messages.rejected("900", ["font-weight"]),
description: "Using a numeric value should use a design token.",
},
{
code: ".a { font-weight: calc(var(--my-local) + 100); }",
message: messages.rejected("calc(var(--my-local) + 100)", [
"font-weight",
]),
description:
"Using a calc() with custom variables should use a design token.",
},
{
code: ".a { font-weight: var(--random-token, 600); }",
message: messages.rejected(
"var(--random-token, 600)",
["font-weight"],
"var(--random-token, var(--font-weight-semibold))"
),
description: "Using a custom property should use a design token.",
},
{
code: `
:root { --custom-token: 600; }
.a { font-weight: var(--custom-token); }
`,
message: messages.rejected("var(--custom-token)", ["font-weight"]),
description:
"Using a custom property that does not resolve to a design token should use a design token.",
},
],
});
testRule({
plugins: [plugin],
ruleName,
config: true,
fix: true,
reject: [
{
code: ".a { font-weight: 600; }",
fixed: ".a { font-weight: var(--font-weight-semibold); }",
message: messages.rejected(
"600",
["font-weight"],
"var(--font-weight-semibold)"
),
description: "Numeric value should be fixed to use design token.",
},
{
code: ".a { font-weight: 700; }",
fixed: ".a { font-weight: var(--font-weight-bold); }",
message: messages.rejected(
"700",
["font-weight"],
"var(--font-weight-bold)"
),
description: "Numeric value should be fixed to use design token.",
},
{
code: ".a { font-weight: 200; }",
fixed: ".a { font-weight: normal; }",
message: messages.rejected("200", ["font-weight"], "normal"),
description:
"Numeric values less than or equal to 400 should be fixed to use normal.",
},
{
code: ".a { font-weight: 300; }",
fixed: ".a { font-weight: normal; }",
message: messages.rejected("300", ["font-weight"], "normal"),
description:
"Numeric values less than or equal to 400 should be fixed to use normal.",
},
{
code: ".a { font-weight: 400; }",
fixed: ".a { font-weight: normal; }",
message: messages.rejected("400", ["font-weight"], "normal"),
description:
"Numeric values less than or equal to 400 should be fixed to use normal.",
},
{
code: ".a { font-weight: lighter; }",
fixed: ".a { font-weight: normal; }",
message: messages.rejected("lighter", ["font-weight"], "normal"),
description: "The lighter keyword should be fixed to use normal.",
},
{
code: ".a { font-weight: 500; }",
fixed: ".a { font-weight: var(--font-weight-semibold); }",
message: messages.rejected(
"500",
["font-weight"],
"var(--font-weight-semibold)"
),
description:
"Numeric values between 500 and 600 should be fixed to use the semibold font-weight token.",
},
{
code: ".a { font-weight: 510; }",
fixed: ".a { font-weight: var(--font-weight-semibold); }",
message: messages.rejected(
"510",
["font-weight"],
"var(--font-weight-semibold)"
),
description:
"Numeric values between 500 and 600 should be fixed to use the semibold font-weight token.",
},
{
code: ".a { font-weight: 800; }",
fixed: ".a { font-weight: var(--font-weight-bold); }",
message: messages.rejected(
"800",
["font-weight"],
"var(--font-weight-bold)"
),
description:
"Numeric values greater than 700 should be fixed to use the bold font-weight token.",
},
{
code: ".a { font-weight: bold; }",
fixed: ".a { font-weight: var(--font-weight-bold); }",
message: messages.rejected(
"bold",
["font-weight"],
"var(--font-weight-bold)"
),
description:
"The bold keyword should be fixed to use the bold font-weight token.",
},
{
code: ".a { font-weight: bolder; }",
fixed: ".a { font-weight: var(--font-weight-bold); }",
message: messages.rejected(
"bolder",
["font-weight"],
"var(--font-weight-bold)"
),
description:
"The bolder keyword should be fixed to use the bold font-weight token.",
},
],
});