1921088 - Upgrade Stylelint to the latest version (^16.0.0)

Status: RESOLVED FIXED

(Developer Infrastructure :: Lint and Formatting, task)

Description

[Hanna Jones [:hjones]]

Upgrading Stylelint will enable us to take advantage of ES Module support for plugins, amongst other things. Ideally the migration of custom plugins and other Stylelint code would be handled as part of this bug.

Comment 1

[Hanna Jones [:hjones]]

I was taking a stab at this and ran into one roadblock I could use some guidance on. It looks like in v15 Stylelint deprecated some Stylistic rules arguing those kinds of things are better handled by Prettier/formatters. Those rules have been completely removed in v16, but we're still using a handful of them for linting scss code. It looks like there's a community plugin we can install to keep using those rules, though if we want to use Prettier for formatting css/scss files down the road it would become redundant.

Given all that, would we prefer to

• Install the stylelint-stylistic as part of this v16 upgrade;
• Prioritize getting Prettier set up for css/scss files and wait on this upgrade so that the formatting rules are moot, or;
• Stop enforcing those deprecated rules as part of the v16 upgrade knowing that if/when we start using Prettier for our stylesheets it will handle most of those issues

Happy to pursue any of the above options based on what y'all think is best.

Comment 2

[:Gijs (he/him)]

(In reply to Hanna Jones [:hjones] from comment #1)

I was taking a stab at this and ran into one roadblock I could use some guidance on. It looks like in v15 Stylelint deprecated some Stylistic rules arguing those kinds of things are better handled by Prettier/formatters. Those rules have been completely removed in v16, but we're still using a handful of them for linting scss code. It looks like there's a community plugin we can install to keep using those rules, though if we want to use Prettier for formatting css/scss files down the road it would become redundant.

Given all that, would we prefer to

• Install the stylelint-stylistic as part of this v16 upgrade;

This one.

• Prioritize getting Prettier set up for css/scss files and wait on this upgrade so that the formatting rules are moot, or;

Unfortunately our experience with prettier's formatting of multiline comments hasn't been very good, see e.g. https://bugzilla.mozilla.org/attachment.cgi?id=9271052&action=diff , search for: "On Mac, use the properties "

ISTR I filed a ticket about this at the time and had no meaningful response, cf. https://github.com/prettier/prettier/issues/12647 .

The wrapping of selectors that are currently single-line is also somewhat awkward, and there's no way to limit the wrapping to properties and not selectors. I think some of the desktop theme reviewers have some other objections as well.

Arguably we should wontfix bug 1606785...

Comment 3

[Hanna Jones [:hjones]]

Attachment: Bug 1921088 - Upgrade Stylelint and related libraries to the latest version r=#frontend-codestyle-reviewers!

In addition to upgrding our Stylelint packages, this patch also introduces the @stylistic/stylelint-plugin to preserve a number of rules that were completely removed in v16. It also migrates the code for the custom plugin introduced in bug 1838298 to ES Modules.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4861708c7796
Upgrade Stylelint and related libraries to the latest version r=Standard8,devtools-reviewers,omc-reviewers,home-newtab-reviewers,nchevobbe,thecount,desktop-theme-reviewers,dao,aminomancer

Comment 5

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/4861708c7796