# core/stylelint/no-css-magic-number.stylelint.rule.ts

> 57 lines of code and 11 definitions.

Tree: GovLab Quality
Language: typescript
Canonical: https://banes-lab.com/anatomy/quality#file-quality-core-stylelint-no-css-magic-number-stylelint-rule-ts
Source text: https://banes-lab.com/source/quality/core/stylelint/no-css-magic-number.stylelint.rule.ts.txt

Listed in [core/stylelint](https://banes-lab.com/api/source/quality/core/stylelint.md), after [core/stylelint/custom-property-unit-mismatch.stylelint.rule.ts](https://banes-lab.com/source/quality/core/stylelint/custom-property-unit-mismatch.stylelint.rule.ts.md) and before [core/stylelint/no-custom-property-alias.stylelint.rule.ts](https://banes-lab.com/source/quality/core/stylelint/no-custom-property-alias.stylelint.rule.ts.md).

## Definitions

- `{ createPlugin, utils }` (lexical_declaration, line 9)
- `ruleName` (lexical_declaration, line 10)
- `ruleId` (lexical_declaration, line 11)
- `RULE_META` (lexical_declaration, line 13, exported)
- `EXCLUDED_PROPS` (lexical_declaration, line 23)
- `SKIP_VALUES` (lexical_declaration, line 24)
- `SKIP_FULL` (lexical_declaration, line 25)
- `SKIP_ATRULES` (lexical_declaration, line 26)
- `messages` (lexical_declaration, line 28)
- `rule` (lexical_declaration, line 36)
- `full` (lexical_declaration, line 52)

## Contained in

- [core/stylelint](https://banes-lab.com/anatomy/quality/folder-quality-core-stylelint.md)

## Source

```typescript
import type { Declaration, Root } from "postcss";
import stylelint, { type PostcssResult, type Rule } from "stylelint";
import { CSS_UNITS } from "#configuration/constants/css.constants";
import type { GovlabStylelintMeta } from "#types/stylelint.types";
import { insideAtRule } from "#core/predicates/css.predicate";
import { valueUnits } from "#core/parsers/css.parser";
import { withRuleId } from "#core/formatters/stylelint.formatter";

const { createPlugin, utils } = stylelint;
const ruleName = "govlab/no-css-magic-number";
const ruleId = "no_css_magic_number";

export const RULE_META: GovlabStylelintMeta = {
    meta: {
        canonical: ["magic-number", "design-tokens"],
        description: "Forbid magic numeric CSS values; reference a token/variable so the value stays consistent",
        fixable: false,
    },
    ruleId,
    ruleName,
};

const EXCLUDED_PROPS = new Set(["content", "font-family", "animation-name", "grid-template", "transform"]);
const SKIP_VALUES = new Set(["0", "1"]);
const SKIP_FULL = new Set(["100%"]);
const SKIP_ATRULES = new Set(["media", "container"]);

const messages = utils.ruleMessages(ruleName, {
    magic: (value: string): string =>
        withRuleId(
            `Magic numeric value '${value}' bypasses the token system. Define or reference a CSS variable (var(--…)) so the value stays consistent across the design system — 0, 1, and 100% are exempt.`,
            ruleId,
        ),
});

const rule: Rule = Object.assign(
    (primary: unknown) =>
        (root: Root, result: PostcssResult): void => {
            if (primary !== true) {
                return;
            }
            root.walkDecls((decl: Declaration) => {
                if (
                    EXCLUDED_PROPS.has(decl.prop.toLowerCase()) ||
                    decl.value.includes("var(--") ||
                    insideAtRule(decl, SKIP_ATRULES)
                ) {
                    return;
                }
                for (const token of valueUnits(decl.value)) {
                    if (CSS_UNITS.has(token.unit) && !SKIP_VALUES.has(token.number)) {
                        const full = `${token.number}${token.unit}`;
                        if (!SKIP_FULL.has(full)) {
                            utils.report({ message: messages.magic(full), node: decl, result, ruleName, word: full });
                        }
                    }
                }
            });
        },
    { messages, ruleName },
);

export default createPlugin(ruleName, rule);
```