Linter des fichiers SASS avec Stylelint et Drupal

Dans la continuité de cet article, j'ai voulu mettre en place des coding standards sur des fichiers SASS.

Or il n’y a (actuellement) pas de coding standard officiels pour le code SASS/SCSS avec Drupal : https://www.drupal.org/docs/develop/standards/css/css-preprocessing-using-sass

Itérations

sass-lint et sass-lint-auto-fix

J’ai initialement voulu utiliser la configuration sass-lint et les scripts Gulp utilisés dans la version Drupal 8 du site Drupal France et Francophonie. Eux-mêmes issus du starterkit du thème ZURB Foundation.

Une fois la configuration et les scripts généralisés en place, j’ai voulu avoir une commande pour corriger automatiquement un maximum d’erreurs, de la même manière que Stylelint et Eslint ont une option pour corriger les erreurs.

J’ai donc cherché une option dans la documentation sass-lint et c’est ainsi que j’ai constaté que sur la page Github du projet ce n’est pas très clair s’il est maintenu ou non.

J’ai ensuite trouvé sass-lint-auto-fix qui lit un fichier configuration sass-lint. Mais par exemple les chemins de fichiers à analyser doivent être dans le fichier de configuration, impossible de les passer en arguments.

Stylelint

En cherchant un outil capable d’appliquer des corrections de lint à des fichiers, je me suis que j’en connaissais un : Stylelint, déjà utilisé pour le CSS.

Heureusement, Stylelint est capable de lint énormément de type de fichiers !

En revanche, impossible de lui faire utiliser la configuration sass-lint utilisée auparavant et l’utilisation via Gulp n’était pas des plus simples...

Sur l’une des premières pages de documentation de Stylelint, il est fait référence à un plugin de coding standards pour SASS assez populaire. Ne s’agissant pas de règles officielles et ne connaissant pas la popularité derrière ce plugin, j’ai préféré ne pas m’en servir.

Du coup, afin d’éviter d’avoir un fichier de configuration arbitraire, j’ai voulu utiliser la configuration du noyau Drupal pour le CSS.

Pour ce faire, il a fallu :

1. Définir un fichier de configuration afin de désactiver des règles incompatibles avec les fichiers SASS.
2. Trouver un moyen d’éviter de dupliquer le fichier .stylelintrc.json du noyau :
   1. Dans le fichier de configuration .stylelintrc.json, il est possible de préciser dans "extends" un chemin vers un fichier de configuration (et non pas nécessairement un standard exporté par un plugin téléchargé).
   2. Mais la résolution du chemin ne fonctionne pas instantanément. Heureusement Stylelint possède une option "--config-basedir" permettant justement de préciser le chemin à partir duquel évaluer le fichier de configuration référencé.
3. Reste désormais à uniquement désactiver les règles incompatibles.
4. Avec l’option "--ignore-path", il est possible de définir un fichier pour lister les chemins à ignorer dans le cas d’une utilisation pour des fichiers SASS.

Conclusion

Il est possible d’utiliser simplement la configuration Stylelint du noyau Drupal pour analyser des fichiers SASS avec le minimum de maintenance et de corriger automatiquement une partie des erreurs.

Avantages :

• extension des codings standards Drupal,
• pas besoin de passer par Gulp (ou autre gestionnaire de tâches), donc pas de paquet NodeJS à télécharger en plus.

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

Remerciements

Merci à Smile de m’avoir permis de passer du temps sur ce sujet.