Linking SASS files with Stylelint and Drupal

Following on from this article, I wanted to implement standard coding on SASS files.

Or there is (currently) no official standard coding for SASS/SCSS code with Drupal : https://www.drupal.org/docs/develop/standards/css/css-preprocessing-using-sass

Iterations

sass-lint and sass-lint-auto-fix

I initially wanted to use the sass-lint configuration and Gulp scripts used in the Drupal 8 version of the Drupal France et Francophonie site. Themselves taken from the starterkit of the ZURB Foundation theme.

Once the configuration and generalised scripts were in place, I wanted to have a command to automatically correct as many errors as possible, in the same way that Stylelint and Eslint have an option to correct errors.

So I looked for an option in the sass-lint documentation and that's how I found that on the Github page for the project it's not very clear whether it's maintained or not.

I then found sass-lint-auto-fix which reads a sass-lint configuration file. But for example the file paths to be analysed must be in the configuration file, impossible to pass them as arguments.

Stylelint

While looking for a tool capable of applying lint corrections to files, I realised that I knew of one : Stylelint, already used for CSS.

Thankfully, Stylelint is capable of linting a huge range of file types!

On the other hand, it was impossible to get it to use the sass-lint configuration used previously, and using it via Gulp wasn't the easiest...

On one of the first documentation pages of Stylelint, reference is made to a rather popular standards coding plugin for SASS. As these are not official rules and I don't know the popularity behind this plugin, I preferred not to use it.

So, in order to avoid having an arbitrary configuration file, I wanted to use the Drupal core configuration for CSS.

To do this, I had to:

1. Define a configuration file to disable rules incompatible with SASS files.
2. Find a way to avoid duplicating the kernel's .stylelintrc.json file:
   1. In the .stylelintrc.json configuration file, it is possible to specify in "extends" a path to a configuration file (and not necessarily a standard exported by a downloaded plugin).
   2. But resolving the path doesn't work instantly. Fortunately Stylelint has a "--config-basedir" option allowing you to specify precisely the path from which to evaluate the referenced configuration file.
3. It now only remains to disable incompatible rules.
4. With the "--ignore-path" option, it is possible to define a file to list the paths to be ignored when used for SASS files.

Conclusion

It is possible to simply use the Stylelint configuration of the Drupal core to analyse SASS files with the minimum of maintenance and automatically correct some of the errors.

Benefits:

• extension of standard Drupal coding,
• no need to go through Gulp (or other task manager), so no NodeJS package to download in addition.

The code in question : https://gitlab.com/florenttorregrosa-drupal/docker-drupal-project/-/commit/8e10e9a5b81e7731f39e902722da2173f3ff176e

Acknowledgements

Thanks to Smile for allowing me to spend time on this topic.