Development #67858
Classe pk-button et pk-big-button en double sur certains selecteurs
0%
Description
Dans _library.scss :
a.pk-button, a.pk-big-button { @extend %button; display: inline-block; margin: 0; height: auto; &.pk-button { padding: 0.5rem 1rem; } &.pk-big-button { padding: 2rem 4rem; } }
Ce qui nécessite d'utiliser a.pk-button.pk-button et a.pk-big-button.a-pk-big-button pour surcharger les styles, vu les règles de priorité des sélecteurs CSS. Aucune idée de l'historique là dessus, mais ça paraît bizarre.
Files
History
Updated by Corentin Séchet 6 months ago
- Tracker changed from Support to Bug
- Assignee set to Corentin Séchet
Updated by Corentin Séchet 6 months ago
- File 0001-scss-remove-duplicated-.pk-button-and-.pk-big-button.patch 0001-scss-remove-duplicated-.pk-button-and-.pk-big-button.patch added
- Tracker changed from Bug to Development
- Status changed from Nouveau to Solution proposée
- Patch proposed changed from No to Yes
Updated by Thomas Jund 6 months ago
Patch OK.
Mais j'ai quand même regardé s'il était possible de modifier la syntaxe pour :
- factoriser un peu plus,
- pouvoir surcharger .pk-button et .pk-big-button simplement dans les thèmes
J'ai essayé de resté dans la logique du reste du fichier, en commençant par la class :
.pk-button { a& {} &.link-cell ul > li > a {} }
mais syntaxe `&a` impossible en sass ou alors avec un contournement degeu type `@at-root a#{&} { ... }`
Alors je propose
%pk-button {
@extend %button;
display: inline-block;
margin: 0;
height: auto;
padding: 0.5rem 1rem;
}
%pk-big-button {
@extend %pk-button;
padding: 2rem 4rem;
}
a.pk-button {
@extend %pk-button;
}
a.pk-big-button {
@extend %pk-big-button;
}
div.link-cell {
&.pk-button ul > li > a {
@extend %pk-button;
display: block;
}
&.pk-big-button ul > li > a {
@extend %pk-big-button;
display: block;
}
}
Syntaxe qui permet de surcharger via `%pk-button {}` et `%pk-big-button {}` dans les thèmes
Updated by Corentin Séchet 5 months ago
C'est joli, mais sassc n'est pas d'accord. Pour isoler le problème :
%button { color: red; } %pk-button { @extend %button; } %pk-big-button { @extend %pk-button; } a { @extend %pk-big-button; } %button { color: green; }
On s'attend a ce que sassc sur le fichier ci-dessus donne :
a { color: red; } a { color: green; }
Mais en fait :
a { color: red; }
Concernant le patch, ça implique que .pk-big-button n'hérite plus des propriétés déclarées dans un %button { ... } dans les _custom.scss. Ça fonctionne comme attendu avec un seul niveau d'héritage. Ça fonctionne avec dart-sass, mais ça ne fonctionne pas avec sassc 3.6.2 qui utilise la dernière version de libsass. Comme le projet n'est plus supporté, j'imagine que c'est pas demain que ça sera fixé (à moins qu'on le fasse nous-même).
Updated by Gitea (Bot) Gitea 3 months ago
- Status changed from Solution proposée to En cours
Corentin Sechet (csechet) a ouvert une pull request sur Gitea concernant cette demande :
- URL : https://gitea.entrouvert.org/entrouvert/publik-base-theme/pulls/31
- Titre : scss: remove duplicated .pk-button and .pk-big-button selectors (#67858)
- Modifications : https://gitea.entrouvert.org/entrouvert/publik-base-theme/pulls/31/files