Project

General

Profile

Development #67858

Classe pk-button et pk-big-button en double sur certains selecteurs

Added by Corentin Séchet 6 months ago. Updated 3 months ago.

Status:
En cours
Priority:
Normal
Assignee:
Corentin Séchet
Target version:
-
Start date:
01 August 2022
Due date:
% Done:

0%

Estimated time:
Patch proposed:
Yes
Planning:
No

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

0001-scss-remove-duplicated-.pk-button-and-.pk-big-button.patch (1.42 KB) 0001-scss-remove-duplicated-.pk-button-and-.pk-big-button.patch Corentin Séchet, 10 August 2022 12:13 PM

History

#1

Updated by Corentin Séchet 6 months ago

  • Tracker changed from Support to Bug
  • Assignee set to Corentin Séchet
#2

Updated by Corentin Séchet 6 months ago

#3

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 :

  1. factoriser un peu plus,
  2. 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

#4

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).

#5

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 :

Also available in: Atom PDF