1988862 - Add a Stylelint rule to enforce using space tokens

Status: RESOLVED FIXED

(Developer Infrastructure :: Lint and Formatting, task)

Description

[Hanna Jones [:hjones]]

We should add a Stylelint rule to enforce only using --space-* tokens for any margin-*, padding-*, *-gap, and inset-* properties. This rule may be autofixable, but it'll take some doing since we'll often be going from hardcoded px values to rem based values. That being said it might be nice to have a mapping with the values specified in comments here, so that we can autofix 8px to --space-small, for example. This work will include documentation, tests, and adding an entry to our rollouts file, but will not include expanding our token offerings or fixing any existing errors.

Out of all the rules we're adding this one feels like the one where we're most likely to introduce visual regressions when we start fixing it due to font size differences across platforms.

Comment 1

[Dustin Whisman]

Attachment: Bug 1988862 - Add a Stylelint rule to enforce using space tokens r=#reusable-components-reviewers-rotation

• Add tests for margin shorthand
• Add tests for padding shorthand
• Add tests for inset shorthand
• Add tests for gap shorthand
• Add tests for margin/padding block/inline shorthand
• Add tests for margin/padding longhand properties
• Remove tokens-table values from auto-fixable list
• Add tests for inset block/inline, plus top, left, right, and bottom
• Add tests for column-gap and row-gap
• Add tests for keywords
• Add files to be ignored for rollout

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/36d5a96930b1
https://hg.mozilla.org/integration/autoland/rev/0260a6a2bfcb
Add a Stylelint rule to enforce using space tokens r=frontend-codestyle-reviewers,hjones

Comment 3

[agoloman]

https://hg.mozilla.org/mozilla-central/rev/0260a6a2bfcb