Update Stylelint and Prettier for Drupal 10.1 and use Prettier for formatting PostCSS

Need to figure out what to do with these deprecations:

$ yarn lint:css
yarn run v1.22.19
$ stylelint "**/*.css"

Deprecation warnings:
 - The "function-whitespace-after" rule is deprecated.
 - The "max-line-length" rule is deprecated.
 - The "number-leading-zero" rule is deprecated.
 - The "string-quotes" rule is deprecated.

Done in 6.64s.

As per https://stylelint.io/migration-guide/to-15 we can just delete these rules from stylelintrc.json.

Always for updating.

The Needs Review Queue Bot → tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

Rerolled for the latest versions

Package                                Current Wanted  Latest
stylelint                 14.16.0 14.16.1 15.3.0   
stylelint-config-standard 29.0.0  29.0.0  31.0.0   
stylelint-order           5.0.0   5.0.0   6.0.3  

Moving back to RTBC

Assuming if updating the package broke it would of been caught by the build.

Committed/pushed to 10.1.x, thanks!

I'm reverting this. Stylelint 15 has removed opinionated stylistic rules from the standard config: https://github.com/stylelint/stylelint/blob/15.0.0/docs/migration-guide/...

We've deprecated 76 of the rules that enforce stylistic conventions, e.g. indentation.

When we created these rules, pretty printers (like Prettier) didn't exist. They now offer a better way to consistently format code, especially whitespace. Linters and pretty printers are complementary tools that work together to help you write consistent and error-free code.

...

We've removed the deprecated rules from the latest version of the standard config.

I didn't realise that we used Stylelint to format CSS after PostCSS has done its work; this is no longer working as noticed in 📌 Update PostCSS and postcss-preset-env for Drupal 10.1 Fixed

Therefore, reverting this for now while we figure out what to do; we have to replace the stylelint fixer in the PostCSS toolchain with prettier, maybe?

So, we can start using Prettier to format our CSS output instead of Stylelint. Prettier is more opinionated and less configurable, but the output is slightly cleaner then before, I feel.

Needed to make some more changes in stylelintrc.json for the latest versions:

• at-rule-empty-line-before: Prettier conflicts with Stylelint here, so we have to disable it; see https://github.com/prettier/stylelint-config-prettier/issues/140#issueco...
• number-leading-zero is deprecated, removed
• media-feature-range-notation is new in stylelint-config-standard 32
• string-quotes is deprecated, removed

Reroll following 📌 Update ESLint and related packages Fixed

From what I can tell majority of css changes are just spacing updates.

Did notice .css files changed from inline to

+.ui-icon-contact {
+ background-position: -192px -128px;
+}

But since Drupal uses aggregation imagine that's a non issue.

Tagging for FEFM review as we are changing the build process a little. If accepted this will also need a change record.

Setting this back to NW based on the #15's code checks failing

From the output (https://dispatcher.drupalci.org/job/drupal_patches/177539/consoleText), I see

ERROR: The compiled CSS from the PCSS files
       does not match the current CSS files. Some added
       or updated JavaScript package made changes.
       Recompile the CSS with: yarn run build:css

There were some whitespace issues in core/themes/claro/css/components/progress.css file. I have provided the patch and interdiff for same.

This looks great!

I went through the code (including all of the CSS changes) and didn't see anything out-of-line. I also tested the script locally running both yarn build:css and yarn lint:css without any changes (or issues).

Added a change notice: https://www.drupal.org/node/3353460 →

Needs a reroll, unsure why TestBot didn't kick this back to NR.

Rerolled and updated to yet more new versions of stylelint and stylelint-config-standard. This also means fixing a duplicate transition in Umami's search.css in order to pass linting again.

Weird error coming from the test bot:

Drupal's JavaScript development dependencies are not installed or cannot be resolved. Run 'yarn install' inside the core directory, or 'yarn check -s' to list other errors.

Needs a reroll after 📌 Update Core CSS to use double-colon for pseudo elements Fixed landed.

Rerolled, upgraded Stylelint again, and as we are using Prettier here I upgraded that as well - no changes to the build output or to the JavaScript if I run yarn prettier.

This looks perfect (pending tests)!

I verified the only changes in the CSS are minor white-space changes (adding/removing lines, spacing inside of calc(), and spacing next to comments).

I also verified the yarn build, yarn build:css, yarn lint:css, and yarn watch:css commands work as expected, and don't generates results that differ from whats in the patch.

Adding tag for Midcamp, since I reviewed that while attending :)

This needs yet another re-roll for yarn.lock changes.

Fixed the conflict in the yarn.lock file. Not really sure how to generate a useful interdiff, though. I had to apply the changes before a prev commit, stash / apply them and fix the file.

Setting back to NR

Back to RTBC pending the test run.

error: patch failed: core/themes/claro/css/components/toolbar.module.css:202
error: core/themes/claro/css/components/toolbar.module.css: patch does not apply

And again... We might need to schedule this one and avoid other CSS patches around a commit window if this keeps happening.

Reroll, patch applied with fuzz, rebuilt with yarn build:css to be sure but there were no changes.

Going to be bold and commit this while the iron's hot (i.e. while tests are still running).

Committed 53f1304 and pushed to 10.1.x. Thanks!

I published the change record.

Automatically closed - issue fixed for 2 weeks with no activity.