1838298 - Introduce CSS lint rule to prevent base design tokens from being used directly

Status: RESOLVED FIXED

(Toolkit :: Themes, enhancement)

Description

[Hanna Jones [:hjones]]

With the landing of Bug 1508369 we now have stylelint enabled for linting CSS files. We should try take advantage of this to implement a custom linter rule to warn or prevent people from using our base token values directly. Currently there's no way to know the intended use of those variables without reading this comment.

Comment 1

[Hanna Jones [:hjones]]

Attachment: Bug 1838298 - Part 2: fix color token usage in line with new Stylelint rule r=#desktop-theme-reviewers

Comment 2

[Hanna Jones [:hjones]]

Attachment: Bug 1838298 - Custom Stylelint plugin to prevent color tokens from being used directly r=#frontend-codestyle-reviewers,Standard8!,#desktop-theme-reviewers,#recomp-reviewers

This patch lays the foundation for a Mozilla-specific Stylelint plugin that we can continue to expand on with new rules as needed. For the first rule I've implemented a simple check to ensure our color tokens are being used as intended.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f4e625378c9e
Custom Stylelint plugin to prevent color tokens from being used directly r=Standard8,frontend-codestyle-reviewers,desktop-theme-reviewers,dao
https://hg.mozilla.org/integration/autoland/rev/53cefe94a9f5
Part 2: fix color token usage in line with new Stylelint rule r=desktop-theme-reviewers,settings-reviewers,reusable-components-reviewers,home-newtab-reviewers,dao,thecount

Comment 4

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/f4e625378c9e
https://hg.mozilla.org/mozilla-central/rev/53cefe94a9f5