Installer et configurer stylelint

[PhilippeVay]

CSSBeautify pose bien des problèmes lors de la compilation Sass, ne semble pas modifier quoique ce soit dans une Media Query et le projet n'a pas vu de commit depuis plus de 4 ans…

stylelint est très actif, fonctionne aussi avec des sources Scss, propose un système de plugins dont l'un pour forcer l'ordre des propriétés (et des règles imbriquées vs MQ vs variables vs custom properties !).
Autant stylelint que stylelint-order savent corriger certaines erreurs, notamment indentation et ordre des propriétés.

(@blupdew @JulesAlexiu @olivierstl @raphaelgoetter) Je suis en train d'implémenter gulp-stylelint dans la branche features/stylelint.
2 tâches : gulp lint-css et gulp lint-scss qui se contentent d'afficher pour l'instant les erreurs dans la console (pas d'autofix, pas de hook).

Le fichier de configuration : .stylelintrc.
Il reprend les configs de base et couramment utilisées :

• stylelint-config-recommended (active les règles qui détectent les erreurs probables) et
• stylelint-config-standard (règles de lint assez courantes).

Puis j'ai c/c les règles de lint de Bootstrap 4 que j'ai modifié/adapté/supprimé au cas par cas, ajouté ce qui me plaisait et correspond à nos guidelines.
J'ai enfin ajouté une pelletée de propriétés CSS dans l'ordre dans lequel on veut les trouver (pour certains groupes l'ordre est indifférent).

Reste à ajouter (je crois) les règles propres à Scss lorsque nécessaire et on verra au fil de l'eau si la tâche doit bloquer un commit, un merge, n'être lancée que manuellement,…

[PhilippeVay]

Dans la branche features/stylelint, le fichier de configuration .stylelintrc est à jour des dernières modifications faites pour 2 projets clients et les fichiers Scss n'ont plus d'erreur de lint, soit via correction soit via commentaire désactivant localement stylelint càd "on assume/dérogation" 😛

Pistes d'améliorations possibles :

• passer stylelint sur KNACSS, la principale ou seule dépendance CSS de bretzel
• affiner ce qui est permis et surtout dans quel ordre parmi les at-règles @include, @extend et @media (extend avant le reste, include après les déclarations quand c'est pour @include respond-to() (synonyme de @media () pour nous) mais entre extend et les déclarations pour toutes les autres mixins… #complicated même si ça doit être possible avec quelques expressions régulières