Libsass: Type selectors should always print before psuedo-classes

Created on 30 Jun 2018 · 3Comments · Source: sass/libsass

When extending a placeholder from a [type] selector, if the placeholder uses pseudo-classes, the selectors are printed in the wrong order.

input.scss

%button-styles {
  color: red;

  &:focus {
    color: blue;
  }
}

[type="button"] {
  @extend %button-styles;
}

Actual results

libsass 3.5.4

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

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

Expected result

ruby sass 3.5.6

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

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

version info:

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

I also ran a couple of debug statements with selector-unify and noticed if I used an element selector it unified as expected regardless of order, but the type selector didn't.

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

Let me know if there's any more information I can provide!

Bug - @extends Bug - Confirmed Dev - Test Written

Source

ashleykolodziej

👍6

Most helpful comment

This is a pretty major bug, just found out myself when upgrading libsass to a newer version (older versions didn't have this bug). This could break sites without you noticing. This should really be fixed as fast as possible. You can quickly check different libraries here:
https://www.sassmeister.com/

Ok I had a brainfart yesterday, my example below actually isn't a bug (or at least the order doesn't matter in that case).
But the original bug still stands.

~~I also did some tests, and there are a more ways extends with classes within them, also get printed in the wrong order:~~
Libsass:


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

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

.wrapper {
  &.inner {
    @extend %testextend;
  }
}

Output:


.wrapper.inner {
  background: red;
}

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

.wrapper.inner {
  background: red;
}

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

~~As you can see... hoverclass get printed as the first class.~~
Actually, i've found that my example is also a bug in the normal sass library. will make a bug report there.
But OP's bug (with [type=bla] example) is a libsass bug, and should also be fixed asap :)

bskibinski on 4 Oct 2018

👍3

All 3 comments

Ok I had a brainfart yesterday, my example below actually isn't a bug (or at least the order doesn't matter in that case).
But the original bug still stands.

~~I also did some tests, and there are a more ways extends with classes within them, also get printed in the wrong order:~~
Libsass:


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

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

.wrapper {
  &.inner {
    @extend %testextend;
  }
}

Output:


.wrapper.inner {
  background: red;
}

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

.wrapper.inner {
  background: red;
}

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

bskibinski on 4 Oct 2018

👍3

@bskibinski I kid you not, it’s literally my birthday today and you have no idea how excited I was to see someone finally reply to this, even if it’s just to say I’m not alone! Best unintended birthday present ever. 🎂🎉

ashleykolodziej on 5 Oct 2018

@ashleykolodziej Haha happy cake day! Glad i could make it better ;)

Also, my second bug finding isn't actually a bug (long day) but yours still is!
Lets hope this gets fixed soon! :)

bskibinski on 5 Oct 2018

Was this page helpful?

0 / 5 - 0 ratings