Add stylelint CSS linting

[afercia]

Trac ticket: https://core.trac.wordpress.org/ticket/29792

Work In Progress (WIP) to add Stylelint CSS coding standards rules enforcement to Core.

So far, this PR adds:

• An NPM script with the same set or rules used in Gutenberg.
• A Grunt task that can be run individually and is also part of grunt precommit:css.

For now, it is important to check the following:

• Whether the excluded paths make sense.
• Whether there is the need to add more files to scan.
• Make sure that the results are consistent when running:
  • npm run lint:css
  • grunt lint:css

Don't forget to run npm install before testing.

As of Core revision 63157, the Stylelint scan reports the following:

✖ 2823 problems (2823 errors, 0 warnings)
  2135 errors potentially fixable with the "--fix" option.

Most of these errors are trivial fixes.

The scan also reports one occurrence of the order property and one of the row-reverse value, which confirms the custom rules work as expected.

Nest steps: Add a related GitHub Action.

Use of AI Tools

None.

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[afercia]

Nice, given the new lint:css grunt task is added to grunt precommit:css, it already runs on the GitHub Actions and the Run SASS precommit tasks step of the update-built-files job fails.

[afercia]

The first run of the css linter job on this PR reports 2746 errors while locally I get 2823 errors. Will look into it. At a first check it appears some files aren't scanned in the job:

• All files within src/wp-includes/js/ are missing.
• All admin color schemes files except one are missing. For example:
  • src/wp-admin/css/colors/midnight/colors.scss is missing
  • src/wp-admin/css/colors/sunrise/colors.scss is there instead
  • I guess all the admin scheme css files should be excluded as they are auto-generated.

[afercia]

The bundled themes twentytwenty and twentytwentyone have their own Stylelint configuration.

The one for twentytwenty is broken:

• It uses the stylelint-config-wordpress package, which is now deprecated.
• It uses the stylelint-a11y plugin, which is unmaintained and imcompatible with latest versions of Stylelint.

Although there are working forks of the stylelint-a11y plugin, I'd rather entirely remove the Stylelint configuration for both themes.

Even after making them work, the linting for both themes reports several errors, mostly because of outdated configuration:

• twentytwenty: 372 errors
• twentytwentyone: 135 errors

It appears the linting scripts of these two themes haven't been used for a long time. Likely, they have been intensively used during the themes development but now they are way behind.

Also, bundled themes are part of Core. To me, it makes sense to have a ceentralized tool to lint everything.

In the latest commit I added a npm run lint:css:themes script that only scans the themes directory, which is excluded from the main npm run lint:css. It reports 15570 errors :)

As said earlier, for now it's best to focus on the functionality. The set of rules can be refined later. It will need some adjustments as some rules aren't applicable in Core, for example selector-class-pattern and selector-id-pattern are specific to Gutenberg.

[afercia]

This path to the config isn't nice. To my understanding, the lint-style script from Gutenberg only auto-detects config in the current firectory while normally Stylelint would walk up to the repo root untile it finds a config.
This can be reviewed later.