Refactoriser le CSS avec LessCSS #97

New Issue

Darks · 2021-07-08T12:01:36+02:00

Darks commented

2021-07-08 12:01:36 +02:00

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.

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](https://github.com/lesscpy/lesscpy) 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.

👍 1

Darks added the

performance

label 2021-07-08 12:01:36 +02:00

Darks self-assigned this 2021-07-08 12:01:36 +02:00

Lephenixnoir commented

2021-07-08 12:19:15 +02:00

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.

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.

Lephenixnoir commented

2021-07-13 13:35:51 +02:00

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

Lephenixnoir commented

2021-07-13 18:04:51 +02:00

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!

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! ```

Lephenixnoir commented

2021-07-13 21:22:52 +02:00

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 !

Alright du coup j'ai soumis tout ça en PR et ça été [fusionné presque immédiatement](https://github.com/lesscpy/lesscpy/pull/117). Il suffit de pull la source sans maintenir un dépôt à part. Ça devrait débloquer le travail ici !

Darks referenced this issue from a commit

2021-07-14 16:30:49 +02:00

less (#97): created makefile

Darks referenced this issue from a commit

2021-07-14 16:30:49 +02:00

less (#97): first shot to Less

Darks commented

2021-07-14 16:37:43 +02:00

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

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 : 1. Faire ses modifs 2. Compiler 3. Ajouter au commit les fichiers Less et les CSS produits

👍 1

Darks referenced this issue

2021-07-14 16:39:11 +02:00

Switch to LessCSS #102

Darks commented

2021-07-14 16:54:43 +02:00

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

[PR fusionnée](https://gitea.planet-casio.com/devs/PCv5/pulls/102), [doc ajoutée](https://gitea.planet-casio.com/devs/PCv5/wiki/19-CSS-et-th%C3%A8mes-additionnels), je ferme ce ticket

Darks closed this issue

2021-07-14 16:54:44 +02:00

Sign in to join this conversation.