1979115 - Add a Stylelint rule to enforce using border-radius tokens

Status: RESOLVED FIXED

(Developer Infrastructure :: Lint and Formatting, task)

Description

[Hanna Jones [:hjones]]

We should add a Stylelint rule to enforce only using --border-radius-* tokens for any border-radius properties in CSS and SCSS files. Since this property only uses relatively simple values, the rule should be autofixable. I have a POC of what this rule could look like here.

If we can make this rule autofixable, we should consider fixing all the low hanging fruit in a single patch following the implementation of this rule. That can be done in a stack of patches under this bug ID, or as a separate bug depending on implementer preference. I have an example of this as well here.

I don't think any of my POC patches took SCSS variables into account, which is likely something we'll need to correct for.

Comment 1

[Hanna Jones [:hjones]]

As part of this work we will want to expand the number of border-radius design tokens we support - see bug 1979120 for more details.

Comment 2

[Jon Oliver]

Attachment: Bug 1979115 - add stylelint rule to enforce border-radius tokens usage r=#reusable-components-reviewers

• Adds a new stylelint rule to enforce the use of border-radius tokens.
• Fixes border-radius errors in existing files that are autofixable.
• Updates the rollout config to disable errors in existing files that are not autofixable.

Comment 3

[Jon Oliver]

Attachment: Bug 1979115 - autofix desktop theme border-radius linting errors r=#desktop-theme-reviewers

• Fixes border-radius errors in existing files that are autofixable.
• Updates the rollout config to remove fixed files from the list.

Comment 4

[Jon Oliver]

Attachment: Bug 1979115 - autofix desktop theme border-radius linting errors r=#anti-tracking-reviewers,#profiles-reviewers,#translations-reviewers,#backup-reviewers

• Fixes border-radius errors that are autofixable in various files.
• Updates the rollout config to remove fixed files from the list.

Comment 5

[Jon Oliver]

Attachment: Bug 1979115 - autofix aboutlogins border-radius linting errors r=#fxview-reviewers

• Fixes border-radius errors in aboutlogins files that are autofixable.
• Updates the rollout config to remove fixed files from the list.

Comment 6

[Jon Oliver]

Attachment: Bug 1979115 - autofix firefoxview border-radius linting errors r=#fxview-reviewers

• Fixes border-radius errors in firefoxview files that are autofixable.
• Updates the rollout config to remove fixed files from the list.

Comment 7

[Jon Oliver]

Attachment: Bug 1979115 - autofix ai-ml border-radius linting errors r=#firefox-ai-ml-reviewers

• Fixes border-radius errors in ai-ml-related files that are autofixable.
• Updates the rollout config to remove fixed files from the list.

Comment 8

[Jon Oliver]

Attachment: Bug 1979115 - autofix extension border-radius linting errors r=#extension-reviewers

• Fixes border-radius errors in extension files that are autofixable.
• Updates the rollout config to remove fixed files from the list.

Comment 9

[Jon Oliver]

Attachment: Bug 1979115 - autofix panel-list border-radius linting errors r=#recomp-reviewers

• Fixes border-radius errors in panel-list files that are autofixable.
• Updates the rollout config to remove fixed files from the list.

Comment 10

[Jon Oliver]

Attachment: Bug 1979115 - autofix devtools border-radius linting errors r=#devtools-reviewers

• Fixes border-radius errors in devtools files that are autofixable.
• Updates the rollout config to apply use-border-radius-tokens linting for fixed files.

Comment 11

[Jon Oliver]

Attachment: Bug 1979115 - autofix newtab border-radius linting errors r=#home-newtab-reviewers

• Fixes border-radius errors in newtab files that are autofixable.
• Updates the rollout config to remove fixed files from the list.

Comment 12

[Jon Oliver]

Attachment: Bug 1979115 - autofix border-radius linting errors r=#recomp-reviewers

• Fixes border-radius errors that are autofixable.
• Updates the rollout config to remove fixed files from the list.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/ab7cfe545f28
https://hg.mozilla.org/integration/autoland/rev/7863e94afd55
add stylelint rule to enforce border-radius tokens usage r=desktop-theme-reviewers,frontend-codestyle-reviewers,mstriemer,tgiles,Standard8

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/968c2e82cf8c
https://hg.mozilla.org/integration/autoland/rev/7d76e9428ebd
Revert "Bug 1979115 - add stylelint rule to enforce border-radius tokens usage r=desktop-theme-reviewers,frontend-codestyle-reviewers,mstriemer,tgiles,Standard8" for causing linting failures.

Comment 15

[agoloman]

Backed out for causing linting failures.

• Backout link
• Push with failures
• Failure Log

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/8d470fafb426
https://hg.mozilla.org/integration/autoland/rev/de9020c7be53
add stylelint rule to enforce border-radius tokens usage r=desktop-theme-reviewers,frontend-codestyle-reviewers,mstriemer,tgiles,Standard8

Comment 17

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/de9020c7be53

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/bd6a7fc93dd0
https://hg.mozilla.org/integration/autoland/rev/180624a360da
autofix aboutlogins border-radius linting errors r=mtigley,desktop-theme-reviewers,credential-management-reviewers,frontend-codestyle-reviewers,dao
https://github.com/mozilla-firefox/firefox/commit/a9efbc54d814
https://hg.mozilla.org/integration/autoland/rev/aa2d32780359
autofix desktop theme border-radius linting errors r=tabbrowser-reviewers,desktop-theme-reviewers,frontend-codestyle-reviewers,urlbar-reviewers,dao
https://github.com/mozilla-firefox/firefox/commit/f0b1dafddcdd
https://hg.mozilla.org/integration/autoland/rev/024484999839
autofix devtools border-radius linting errors r=devtools-reviewers,Standard8,nchevobbe
https://github.com/mozilla-firefox/firefox/commit/af20cd3c964c
https://hg.mozilla.org/integration/autoland/rev/8bff834fea16
autofix extension border-radius linting errors r=extension-reviewers,frontend-codestyle-reviewers,zombie
https://github.com/mozilla-firefox/firefox/commit/902209b8eeda
https://hg.mozilla.org/integration/autoland/rev/41063d844fcf
autofix firefoxview border-radius linting errors r=fxview-reviewers,frontend-codestyle-reviewers,nsharpley

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/8434baeffd67
https://hg.mozilla.org/integration/autoland/rev/397cc3a5b7e6
Revert "Bug 1979115 - autofix firefoxview border-radius linting errors r=fxview-reviewers,frontend-codestyle-reviewers,nsharpley" for causing bc failures @ browser_ext_popup_corners.js

Comment 20

[amarc]

Backed out for causing bc failures @ browser_ext_popup_corners

• Backout link
• Push with failures
• Failure Log

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/9f9a4d250d50
https://hg.mozilla.org/integration/autoland/rev/d0af41b0d600
autofix aboutlogins border-radius linting errors r=mtigley,desktop-theme-reviewers,credential-management-reviewers,frontend-codestyle-reviewers,dao
https://github.com/mozilla-firefox/firefox/commit/1778e883259f
https://hg.mozilla.org/integration/autoland/rev/9e80c0d0e4ac
autofix devtools border-radius linting errors r=devtools-reviewers,Standard8,nchevobbe
https://github.com/mozilla-firefox/firefox/commit/248375c50169
https://hg.mozilla.org/integration/autoland/rev/3126ac158fd2
autofix extension border-radius linting errors r=extension-reviewers,frontend-codestyle-reviewers,zombie
https://github.com/mozilla-firefox/firefox/commit/061f133b02d4
https://hg.mozilla.org/integration/autoland/rev/e94c68012b3a
autofix newtab border-radius linting errors r=home-newtab-reviewers,frontend-codestyle-reviewers,amy

Comment 22

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/d0af41b0d600
https://hg.mozilla.org/mozilla-central/rev/9e80c0d0e4ac
https://hg.mozilla.org/mozilla-central/rev/3126ac158fd2
https://hg.mozilla.org/mozilla-central/rev/e94c68012b3a

Comment 23

[Mark Banner (:standard8)]

Is this bug meant to be open still for the landing of the last patches? If so, you can re-open it and add the leave-open keyword and then remove it just before landing the last ones.

Comment 24

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/aa2443cd1a91
https://hg.mozilla.org/integration/autoland/rev/ac0db5e77435
autofix panel-list border-radius linting errors r=desktop-theme-reviewers,frontend-codestyle-reviewers,hjones
https://github.com/mozilla-firefox/firefox/commit/a79a59e959bd
https://hg.mozilla.org/integration/autoland/rev/f0b323d20269
autofix border-radius linting errors r=desktop-theme-reviewers,frontend-codestyle-reviewers,hjones
https://github.com/mozilla-firefox/firefox/commit/f34496d6cb45
https://hg.mozilla.org/integration/autoland/rev/d4342ba5f8ee
autofix ai-ml border-radius linting errors r=firefox-ai-ml-reviewers,desktop-theme-reviewers,frontend-codestyle-reviewers,tgiles
https://github.com/mozilla-firefox/firefox/commit/45563cb6983b
https://hg.mozilla.org/integration/autoland/rev/fefc79bf43d0
autofix firefoxview border-radius linting errors r=fxview-reviewers,frontend-codestyle-reviewers,nsharpley

Comment 25

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/ac0db5e77435
https://hg.mozilla.org/mozilla-central/rev/f0b323d20269
https://hg.mozilla.org/mozilla-central/rev/d4342ba5f8ee
https://hg.mozilla.org/mozilla-central/rev/fefc79bf43d0

Comment 26

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/b4fe83bbb0b8
https://hg.mozilla.org/integration/autoland/rev/3b131f68b0a0
autofix desktop theme border-radius linting errors r=profiles-reviewers,translations-reviewers,desktop-theme-reviewers,frontend-codestyle-reviewers,timhuang,dao,tbersentes,kpatenio
https://github.com/mozilla-firefox/firefox/commit/6a14c828454a
https://hg.mozilla.org/integration/autoland/rev/d0ca0402ff20
autofix desktop theme border-radius linting errors r=tabbrowser-reviewers,desktop-theme-reviewers,frontend-codestyle-reviewers,urlbar-reviewers,dao,mstriemer

Comment 27

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/3b131f68b0a0
https://hg.mozilla.org/mozilla-central/rev/d0ca0402ff20