Refactoriser le CSS avec LessCSS #97

Actuellement le CSS est immaintenable. Y'a des fichiers partout, on ne sait pas trop qu'est-ce qui contient quoi, et surtout on a un fichier responsive.css qui rend l'ajout de règles supplémentaires un enfer.

L'idée est de passer sur LessCSS (ou une solution plus KISS, à voir), permettant d'utiliser une syntaxe imbriquée. Par exemple

.component {
  width: 300px;
  @media (min-width: 1280px) {
    width: 800px;
  }
  
  .subcomponent > input {
     color: var(--background);
  }
}

La gestion des thèmes reste inchangée grâce à l'utilisation de fichiers themes.css contenant des variables CSS3.

D'un point de vue technique, je suis parti dans un premier temps sur LessCSS car c'est un outil que je connais (dans le sens, je sais qu'il existe). Si un autre outil propose les mêmes fonctionnalités et s'avère être plus pratique à utiliser, autant passer dessus.

La création d'un makefile qui build le CSS est selon moi nécessaire, afin que l'on automatise la création du CSS final que ce soit pour les besoins du développement ou coté CD.

La version Python du compilateur : https://github.com/lesscpy/lesscpy

Note que je trouve la séparation en fichiers pas si mal, comparée à la v4.3 c'est un délice par exemple. Je propose de rester à peu près sur la même répartition des règles, si ça te paraît pas absurde.

Je vais faire une passe sur lesscpy pour voir si je peux ajouter le support des variables CSS4.

Ma foi, à part une subtilité dans le lexer il n'y avait pas de problème particulier. (?)

% cat mytests/css4vars.less
div {
  color: green;
  --bg: red;
}

:root {
  --bg: #e0e0e0;
}

p {
  --bg: white;
}

* {
  background: var(--bg);
  color: var(--fg, var(--text-fg, black));
}

div {
  span {
    --bg: purple;
    background: var(--bg);
  }
}

% python3 -m lesscpy mytests/css4vars.less mytests/css4vars.css

% cat mytests/css4vars.css
div {
  color: green;
  --bg: red;
}
:root {
  --bg: #e0e0e0;
}
p {
  --bg: white;
}
* {
  background: var(--bg);
  color: var(--fg,var(--text-fg,black));
}
div span {
  --bg: purple;
  background: var(--bg);
}                                                                                                                                      el@realm in ~/git/lesscpy on master!

Alright du coup j'ai soumis tout ça en PR et ça été fusionné presque immédiatement. Il suffit de pull la source sans maintenir un dépôt à part. Ça devrait débloquer le travail ici !

Pour la compilation du CSS, je suis parti sur un fonctionnement manuel. Le but est de ne pas pénaliser les contrubuteurs qui n'ont pas envie d'installer Less sur leur machine.

Le makefile ajouté permet de faciliter la gestion de cette compilation :

make css compile les fichiers Less qui ont été modifiés
make run compile le CSS puis lance flask run

Les fichiers appelés par le HTML sont toujours dans app/static/css. Il faut penser à les ajouter au commit si on touche aux sources Less :

Faire ses modifs
Compiler
Ajouter au commit les fichiers Less et les CSS produits

PR fusionnée, doc ajoutée, je ferme ce ticket