Problem/Motivation

Package                   Current Wanted  Latest
prettier                  2.8.0   2.8.8   2.8.8
stylelint                 14.16.0 14.16.1 15.6.0   
stylelint-config-standard 29.0.0  29.0.0  33.0.0   
stylelint-order           5.0.0   5.0.0   6.0.3  

Steps to reproduce

Proposed resolution

yarn add -D stylelint stylelint-config-standard stylelint-order
yarn upgrade prettier
yarn build:css
yarn lint:css
yarn prettier

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Comments

longwave created an issue. See original summary.

longwave’s picture

Status: Active » Needs work
StatusFileSize
new15.31 KB

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.
longwave’s picture

Status: Needs work » Needs review
StatusFileSize
new16.56 KB

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

smustgrave’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: +Needs Review Queue Initiative

Always for updating.

needs-review-queue-bot’s picture

Status: Reviewed & tested by the community » Needs work
StatusFileSize
new84 bytes

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.

longwave’s picture

Issue summary: View changes
Status: Needs work » Needs review
Parent issue: » #3343216: [meta] Update JS dependencies for Drupal 10.1
StatusFileSize
new19.14 KB

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  
smustgrave’s picture

Status: Needs review » Reviewed & tested by the community

Moving back to RTBC

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

  • catch committed fd7e9253 on 10.1.x
    Issue #3344087 by longwave: Update Stylelint for Drupal 10.1
    
catch’s picture

Status: Reviewed & tested by the community » Fixed

Committed/pushed to 10.1.x, thanks!

longwave’s picture

Issue tags: +10.1.0 release notes

  • longwave committed 49c877c5 on 10.1.x
    Revert "Issue #3344087 by longwave: Update Stylelint for Drupal 10.1"...
longwave’s picture

Status: Fixed » Needs work

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 #3351619: Update PostCSS and postcss-preset-env for Drupal 10.1

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?

longwave’s picture

Status: Needs work » Needs review
StatusFileSize
new116.28 KB

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.

longwave’s picture

Issue summary: View changes
StatusFileSize
new117.29 KB

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

longwave’s picture

Title: Update Stylelint for Drupal 10.1 » Update Stylelint for Drupal 10.1 and use Prettier for formatting PostCSS
StatusFileSize
new117.29 KB
smustgrave’s picture

Status: Needs review » Reviewed & tested by the community

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.

longwave’s picture

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

mherchel’s picture

Status: Reviewed & tested by the community » Needs work

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
gauravvvv’s picture

Status: Needs work » Needs review
StatusFileSize
new117.76 KB
new477 bytes

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

mherchel’s picture

Status: Needs review » Reviewed & tested by the community

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).

longwave’s picture

Issue tags: -Needs change record
spokje’s picture

Status: Reviewed & tested by the community » Needs work

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

longwave’s picture

Issue summary: View changes
Status: Needs work » Needs review
StatusFileSize
new120.43 KB
new5.56 KB

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.

mherchel’s picture

Status: Needs review » Needs work

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.
spokje’s picture

longwave’s picture

Title: Update Stylelint for Drupal 10.1 and use Prettier for formatting PostCSS » Update Stylelint and Prettier for Drupal 10.1 and use Prettier for formatting PostCSS
Issue summary: View changes
Status: Needs work » Needs review
StatusFileSize
new128.93 KB

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.

longwave’s picture

Issue summary: View changes
mherchel’s picture

Status: Needs review » Reviewed & tested by the community

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.

mherchel’s picture

Issue tags: +MidCamp2023

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

catch’s picture

Status: Reviewed & tested by the community » Needs work

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

mherchel’s picture

Status: Needs work » Needs review
StatusFileSize
new127.6 KB

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

catch’s picture

Status: Needs review » Reviewed & tested by the community

Back to RTBC pending the test run.

catch’s picture

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.

catch’s picture

Status: Reviewed & tested by the community » Needs work
longwave’s picture

Status: Needs work » Reviewed & tested by the community
StatusFileSize
new127.54 KB

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

  • catch committed 53f13043 on 10.1.x
    Issue #3344087 by longwave, Gauravvvv, mherchel, catch: Update Stylelint...
catch’s picture

Status: Reviewed & tested by the community » Fixed

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!

quietone’s picture

I published the change record.

Status: Fixed » Closed (fixed)

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