LibSass supports cross-media @extend #712

Closed
HugoGiraudel opened this Issue Dec 10, 2014 · 23 comments

Projects

None yet

8 participants

@HugoGiraudel

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 @HugoGiraudel 's 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
  }
}
@HugoGiraudel

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

@HugoGiraudel

Maintainers, what is the current status on this?

@chriseppstein
Member

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
Member

@HugoGiraudel 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.

@HugoGiraudel

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

@chriseppstein
Member

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!

On Jan 12, 2015, at 3:01 PM, Hugo Giraudel notifications@github.com wrote:

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


Reply to this email directly or view it on GitHub.

@HugoGiraudel

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
Member

@HugoGiraudel 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
Member

@HugoGiraudel 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?

@HugoGiraudel

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
Member

It already is

Excellent. Where is the mapping of tests to features?

@HugoGiraudel

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?

@HugoGiraudel

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

@xzyfer xzyfer added the bug label Feb 16, 2015
@xzyfer
Contributor
xzyfer commented Feb 16, 2015

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

@xzyfer xzyfer added the needs test label Feb 16, 2015
@mgreter mgreter added this to the 3.2 milestone Mar 9, 2015
@mgreter mgreter self-assigned this Mar 9, 2015
@mgreter mgreter closed this in #927 Mar 9, 2015
@xzyfer
Contributor
xzyfer commented Mar 9, 2015

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

@xzyfer
Contributor
xzyfer commented Mar 9, 2015

Nevermind, that spec requires capturing errors.

@saper
Member
saper commented Sep 20, 2015

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
Contributor
xzyfer commented Sep 21, 2015

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
Contributor
xzyfer commented Sep 21, 2015

Tracking the regression in #1562

@xzyfer xzyfer added a commit to xzyfer/sass-spec that referenced this issue Oct 11, 2015
@xzyfer xzyfer Activate specs for issue 712
This PR activates specs for sass/libsass#712
02e4b39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment