Libsass: Los selectores de tipo siempre deben imprimirse antes de psuedo-classes

Creado en 30 jun. 2018  ·  3Comentarios  ·  Fuente: sass/libsass

Al extender un marcador de posición desde un selector [type] , si el marcador de posición usa pseudoclases, los selectores se imprimen en el orden incorrecto.

input.scss

%button-styles {
  color: red;

  &:focus {
    color: blue;
  }
}

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

Resultados actuales

libsass 3.5.4

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

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

Resultado Esperado

ruby sass 3.5.6

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

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

Información de la versión:

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

También ejecuté un par de declaraciones de depuración con selector-unify y noté que si usaba un selector de elementos, se unificaba como se esperaba independientemente del orden, pero el selector de tipo no lo hacía.

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

¡Avíseme si hay más información que pueda proporcionar!

Bug - @extends Bug - Confirmed Dev - Test Written
Fuente
picture ashleykolodziej
👍6

Comentario más útil

Este es un error bastante
https://www.sassmeister.com/

Ok, ayer tuve un pedo mental, mi ejemplo a continuación en realidad no es un error (o al menos el orden no importa en ese caso).
Pero el error original sigue en pie.

También hice algunas pruebas, y hay más formas de extender las clases dentro de ellas, también se imprimen en el orden incorrecto:
Libsass:


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

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

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

Producción:


.wrapper.inner {
  background: red;
}

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

.wrapper.inner {
  background: red;
}

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

Como puede ver ... hoverclass se imprime como la primera clase.
En realidad, descubrí que mi ejemplo también es un error en la biblioteca normal de Sass.

picture bskibinski en 4 oct. 2018
👍3

Todos 3 comentarios

Este es un error bastante
https://www.sassmeister.com/

Ok, ayer tuve un pedo mental, mi ejemplo a continuación en realidad no es un error (o al menos el orden no importa en ese caso).
Pero el error original sigue en pie.

También hice algunas pruebas, y hay más formas de extender las clases dentro de ellas, también se imprimen en el orden incorrecto:
Libsass:


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

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

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

Producción:


.wrapper.inner {
  background: red;
}

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

.wrapper.inner {
  background: red;
}

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

Como puede ver ... hoverclass se imprime como la primera clase.
En realidad, descubrí que mi ejemplo también es un error en la biblioteca normal de Sass.

bskibinski picture bskibinski en 4 oct. 2018
👍3

@bskibinski No

ashleykolodziej picture ashleykolodziej en 5 oct. 2018

@ashleykolodziej Jaja ¡feliz día de la torta! Me alegro de poder hacerlo mejor;)

Además, mi segundo hallazgo de error no es realmente un error (día largo), ¡pero el tuyo todavía lo es!
¡Esperemos que esto se solucione pronto! :)

bskibinski picture bskibinski en 5 oct. 2018
¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

nex3 picture nex3  ·  9Comentarios
luiscla27 picture luiscla27  ·  10Comentarios
delijah picture delijah  ·  7Comentarios
mikeebee picture mikeebee  ·  8Comentarios
Nimce picture Nimce  ·  4Comentarios