LibSass supports cross-media @extend

[KittyGiraudel]

I feel kind of dirty reporting this, because this is not actually a bug per se... It turns out LibSass does support something Ruby Sass doesn't. Moreover, this feature has been asked for years in Sass, so I'm quite confused about the way to go here... Should this be removed? I'll leave you the only judge of this.

Test:

.selector {
  content: selector;
}

@media print {
  .other-selector {
    @extend .selector;
  }
}

Expect:

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .selector" on line 7.

Result:

.selector,
.other-selector {
    content: selector;
}

Ref: http://sass-compatibility.github.io/#cross_media_extend.

[sturobson]

Wasn't this a feature that was available in Sass but was neutered in 3.2?

Anyways..... ssssshhhhhhhhhh

[davidkpiano]

Shouldn't this be a bug in LibSass? The expected behavior in the test was that .other-selector would extend the .selector ruleset only in @media print; whereas it's applied outside the media query in LibSass (unexpected behavior).

The lack of this "feature" seems like a necessary evil to prevent unexpected behavior like that. If I wanted to extend the .selector ruleset regardless of media query and then have custom rules inside a media query, I would just do this (which LibSass doesn't support yet):

.selector {
  content: selector;
}

@media print {
  .other-selector {
    @at-root (without: media) {
      @extend .selector;
    }
    background: red; // custom rule inside media query
  }
}

[KittyGiraudel]

What is the status on this? Do you need me to write a spec?

[KittyGiraudel]

Maintainers, what is the current status on this?

[chriseppstein]

This is a bug in libsass. Sass does have a feature planned to support cross media extends but it does not have the output you see here. The correct output requires Sass to keep the @media context when the extend is performed. The feature enhancement is being tracked here: sass/sass#1050

[chriseppstein]

@KittyGiraudel The information at http://sass-compatibility.github.io/#cross_media_extend is not accurate. LibSass doesn't "get this right". It gets it very wrong just like sass got it very wrong back when we allowed it.

[KittyGiraudel]

Sass Compatibility has no "get it right" or "get it wrong". It has support or no support.

[chriseppstein]

The presentation implies there is a feature that libsass has and other implementations don't. It's impossible for Ruby sass 3.4 anything other than 100% because it is the reference implementation.

Hunt & pecked on my iPhone... Sorry if it's brief!

[KittyGiraudel]

I could add a note about how LibSass gets it wrong in the description if you will but I won't be able to do much more. Sass Compatibility intends to list inconsistencies between Sass engines. It is an inconsistency, no matter if both are not supporting what you deem is right.

[chriseppstein]

@KittyGiraudel Then the sense of the discrepency is wrong. The feature should be "forbids @extend in @media" and Sass should have it checked and libsass should not have it checked.

[chriseppstein]

@KittyGiraudel Anyways, I really like the presentation of your compatibility guide. It would be awesome if we could data-drive it from sass-spec. are you open to working with us on that?

[KittyGiraudel]

The feature should be "forbids @extend in @media" and Sass should have it checked and libsass should not have it checked.

That seems reasonable.

we could data-drive it from sass-spec

It already is, except for the few tests that do not exist on sass-spec. I have been working with @xzyfer on this for several weeks now. As a result, I have written a lot of extra tests for sass-spec. :)

[chriseppstein]

It already is

Excellent. Where is the mapping of tests to features?

[KittyGiraudel]

Hardly the place for it I suppose. Where should I reach you Chris?

[matthewpavkov]

So, libsass does not support @extend within @media, and should not be used, correct?

[KittyGiraudel]

LibSass does support a buggy version of it, hence should not be used.

[xzyfer]

@KittyGiraudel could you please create a spec representing the correct behaviour?

[KittyGiraudel]

There: sass/sass-spec#261.

[xzyfer]

@mgreter have you confirmed the (unmerged) spec sass/sass-spec#261 passes?

[xzyfer]

Nevermind, that spec requires capturing errors.

[saper]

I can confirm that for the sass/sass-spec#261 testcase libsass still works, i.e. produces output

.foo, .bar {
  content: 'foo'; }

without reporting an error.

This was:

sassc: 3.3.0-beta1
libsass: 3.3.0-beta2-1-g1efd
sass2scss: 1.0.3

[xzyfer]

Looks like a regression in 3.3. This was fixed in 3.2.0.

Error: You may not @extend an outer selector from within @media.
       You may only @extend selectors within the same directive.
       From "@extend .foo" on line 35 of test.scss
        on line 29 of test.scss

[xzyfer]

Tracking the regression in #1562