Libsass: Typwähler sollten immer vor Pseudoklassen gedruckt werden

Erstellt am 30. Juni 2018 · 3Kommentare · Quelle: sass/libsass

Wenn beim Platzieren eines Platzhalters von einem [type] -Selektor Pseudoklassen verwendet werden, werden die Selektoren in der falschen Reihenfolge gedruckt.

input.scss

%button-styles {
  color: red;

  &:focus {
    color: blue;
  }
}

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

Tatsächliche Ergebnisse

libsass 3.5.4

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

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

Erwartetes Ergebnis

Rubinsass 3.5.6

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

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

Versions Information:

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

Ich habe auch ein paar Debug-Anweisungen mit selector-unify und festgestellt, dass bei Verwendung eines Element-Selektors dieser wie erwartet unabhängig von der Reihenfolge vereinheitlicht wurde, der Typ-Selektor jedoch nicht.

@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"]

Lassen Sie mich wissen, ob ich weitere Informationen bereitstellen kann!

Bug - @extends Bug - Confirmed Dev - Test Written

Quelle

ashleykolodziej

👍6

Hilfreichster Kommentar

Dies ist ein ziemlich schwerwiegender Fehler , den ich gerade beim Upgrade von libsass auf eine neuere Version herausgefunden habe (ältere Versionen hatten diesen Fehler nicht). Dies könnte Websites beschädigen, ohne dass Sie es bemerken. Dies sollte wirklich so schnell wie möglich behoben werden. Hier können Sie schnell verschiedene Bibliotheken überprüfen:
https://www.sassmeister.com/

Ok, ich hatte gestern einen Brainfart, mein Beispiel unten ist eigentlich kein Fehler (oder zumindest spielt die Reihenfolge in diesem Fall keine Rolle).
Aber der ursprüngliche Fehler bleibt bestehen.

~~Ich habe auch einige Tests durchgeführt, und es gibt weitere Möglichkeiten, Klassen mit ihnen zu erweitern. Sie werden auch in der falschen Reihenfolge gedruckt:~~
Libsass:


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

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

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

Ausgabe:


.wrapper.inner {
  background: red;
}

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

.wrapper.inner {
  background: red;
}

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

~~Wie Sie sehen können ... wird die Schwebeklasse als erste Klasse gedruckt.~~
~~Eigentlich habe ich festgestellt, dass mein Beispiel auch ein Fehler in der normalen Sass-Bibliothek ist.~~

bskibinski am 4. Okt. 2018

👍3

Alle 3 Kommentare

~~Ich habe auch einige Tests durchgeführt, und es gibt weitere Möglichkeiten, Klassen mit ihnen zu erweitern. Sie werden auch in der falschen Reihenfolge gedruckt:~~
Libsass:


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

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

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

Ausgabe:


.wrapper.inner {
  background: red;
}

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

.wrapper.inner {
  background: red;
}

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

~~Wie Sie sehen können ... wird die Schwebeklasse als erste Klasse gedruckt.~~
~~Eigentlich habe ich festgestellt, dass mein Beispiel auch ein Fehler in der normalen Sass-Bibliothek ist.~~

bskibinski am 4. Okt. 2018

👍3

@bskibinski Ich

ashleykolodziej am 5. Okt. 2018

@ashleykolodziej Haha glücklicher

Außerdem ist meine zweite Fehlerfindung eigentlich kein Fehler (langer Tag), aber Ihre ist es immer noch!
Hoffen wir, dass dies bald behoben wird! :) :)

bskibinski am 5. Okt. 2018

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen