Libsass: Les sélecteurs de type doivent toujours imprimer avant les classes psuedo

Créé le 30 juin 2018 · 3Commentaires · Source: sass/libsass

Lors de l'extension d'un espace réservé à partir d'un sélecteur [type] , si l'espace réservé utilise des pseudo-classes, les sélecteurs sont imprimés dans le mauvais ordre.

input.scss

%button-styles {
  color: red;

  &:focus {
    color: blue;
  }
}

[type="button"] {
  <strong i="8">@extend</strong> %button-styles;
}

Résultats actuels

libsass 3.5.4

[type="button"] {
  color: red;
}

:focus[type="button"] {
  color: blue;
}

Résultat attendu

rubis sass 3.5.6

[type="button"] {
  color: red;
}

[type="button"]:focus {
  color: blue;
}

informations de version:

$ node-sass --version
node-sass   4.9.0   (Wrapper)   [JavaScript]
libsass     3.5.4   (Sass Compiler) [C/C++]

J'ai également exécuté quelques instructions de débogage avec selector-unify et j'ai remarqué que si j'utilisais un sélecteur d'élément, il unifiait comme prévu quel que soit l'ordre, mais le sélecteur de type ne l'a pas fait.

@debug(selector-unify('button', ':focus'));
// button:focus

@debug(selector-unify(':focus', 'button'));
// button:focus

@debug(selector-unify('[type="button"]', ':focus'));
// [type="button"]:focus

@debug(selector-unify(':focus', '[type="button"]'));
// :focus[type="button"]

Faites-moi savoir s'il y a plus d'informations que je peux fournir!

Bug - @extends Bug - Confirmed Dev - Test Written

Source

ashleykolodziej

👍6

Commentaire le plus utile

C'est un bogue assez
https://www.sassmeister.com/

Ok, j'ai eu un brainfart hier, mon exemple ci-dessous n'est en fait pas un bug (ou du moins l'ordre n'a pas d'importance dans ce cas).
Mais le bogue d'origine est toujours d'actualité.

~~J'ai également fait quelques tests, et il y a d'autres façons d'étendre avec des classes à l'intérieur, également d'être imprimé dans le mauvais ordre:~~
Libsass:


%testextend {
  background: red;
  &.hoverclass {
    background: blue;
  }
}

%testextend {
  background: red;
  &:hover {
    background: blue;
  }
}

.wrapper {
  &.inner {
    <strong i="15">@extend</strong> %testextend;
  }
}

Production:


.wrapper.inner {
  background: red;
}

.hoverclass.wrapper.inner {
  background: blue;
}

.wrapper.inner {
  background: red;
}

.wrapper.inner:hover {
  background: blue;
}

~~Comme vous pouvez le voir ... hoverclass est imprimé comme première classe.~~
~~En fait, j'ai trouvé que mon exemple est également un bogue dans la bibliothèque sass normale.~~

bskibinski le 4 oct. 2018

👍3

Tous les 3 commentaires

C'est un bogue assez
https://www.sassmeister.com/

Ok, j'ai eu un brainfart hier, mon exemple ci-dessous n'est en fait pas un bug (ou du moins l'ordre n'a pas d'importance dans ce cas).
Mais le bogue d'origine est toujours d'actualité.

~~J'ai également fait quelques tests, et il y a d'autres façons d'étendre avec des classes à l'intérieur, également d'être imprimé dans le mauvais ordre:~~
Libsass:


%testextend {
  background: red;
  &.hoverclass {
    background: blue;
  }
}

%testextend {
  background: red;
  &:hover {
    background: blue;
  }
}

.wrapper {
  &.inner {
    <strong i="15">@extend</strong> %testextend;
  }
}

Production:


.wrapper.inner {
  background: red;
}

.hoverclass.wrapper.inner {
  background: blue;
}

.wrapper.inner {
  background: red;
}

.wrapper.inner:hover {
  background: blue;
}

~~Comme vous pouvez le voir ... hoverclass est imprimé comme première classe.~~
~~En fait, j'ai trouvé que mon exemple est également un bogue dans la bibliothèque sass normale.~~

bskibinski le 4 oct. 2018

👍3

@bskibinski Je ne

ashleykolodziej le 5 oct. 2018

@ashleykolodziej Haha bonne journée du gâteau! Heureux de pouvoir l'améliorer;)

De plus, ma deuxième recherche de bogue n'est pas en fait un bogue (longue journée), mais le vôtre l'est toujours!
Espérons que cela sera bientôt résolu! :)

bskibinski le 5 oct. 2018

Cette page vous a été utile?

0 / 5 - 0 notes