Stylelint

Using Stylelint, a  CSS linter, can help your CSS align with the Drupal conventions. Drupal core contains a package.json file with basic definitions.

Stylelint requires npm which is included in DDEV.

Running Stylelint in DDEV

It is easiest to run Stylelint from within DDEV. So SSH into DDEV, change to the web/core folder, and install the required libraries.

$ ddev ssh
$ cd web/core
$ npm install

Check all CSS files in Drupal core, with this command, an alias for npx stylelint "**/*.css":

$ npm run lint:css

There are no problems, but you can trigger an error by inserting a single space before a class in this file:

web/core/modules/views/css/views-responsive-grid.css

When you run the command again, you should get this error:

$ npm run lint:css
modules/views/css/views-responsive-grid.css
  11:1  ✖  Delete "·"  prettier/prettier
✖ 1 problem (1 error, 0 warnings)

You can check individual Drupal core or contrib module CSS files as well, like this:

$ npx stylelint "../modules/contrib/admin_toolbar/css/admin.toolbar.css"
$ npx stylelint "modules/views/css/views-responsive-grid.css"

Happy linting!