@at-root and #{&} produces incorrect output

[xzyfer]

@mixin box-sizing-border {
  @at-root {
    #{&} {
      *, *:before, *:after { 
        box-sizing: inherit; }
    } } }

foo {
  @include box-sizing-border; }

Ruby Sass

foo *, foo *:before, foo *:after {
  box-sizing: inherit; }

Libsass 3.2.4

foo foo *, foo foo *:before, foo foo *:after {
  box-sizing: inherit; }

[xzyfer]

/cc @suisho

[xzyfer]

Spec added sass/sass-spec#382

[iparr]

Also struggling a little with this issue.

I've been using it (perhaps unwisely) without mixins, for example in this example where the global-logo will only adapt a hover color when it is a link (as opposed to a heading, or span):

.global-logo {

    @at-root a#{&} {
        &:hover {
            background-color: red;
        }
    }
}

This is the one thing stopping me utilising libsass fully on some of my websites so I'm going to watch keenly for a fix!

[blackfalcon]

Regardless of use with mixin or not, the issue persists when trying to create a combination selector based off the parent in the Sass using a child selector. In this example, the desired output from rubySass is not the same as libSass.

.parent {
  width: 100%;
  @at-root .child#{&} {
    width: 50%;
  }
}

rubySass

.parent {
  width: 100%;
}
.child.parent {
  width: 50%;
}

libSass

.parent {
  width: 100%;
}

.parent .child.parent {
  width: 50%;
}

Give it a run in SassMeister to see.

[danielguillan]

I've run some quick tests and It looks like a bug was introduced in 3.2.3 or 3.2.4. @at-root was working as expected on 3.2.0 through 3.2.2. I hope this helps.

[xzyfer]

Base on @danielguillan new information I dug in a big further and found this is a regression introduced in 3f536a9 in #1183.

I'll see about getting a patch for this into 3.2.5 since there's significant demand for it.

[xzyfer]

I've had a quick look into this and unfortunately there are a lot of edge cases. We need significantly more coverage in sass-spec before we're able to tackle this.

[danielguillan]

I'll be happy to help with the spec. What are some of those edge cases?

[xzyfer]

It's hard to know all of the cases. You can pretty much take any piece of the following and rearrange to hit a different code path.

foo {
  foo: bar;
  @at-root {
    bar {
      bar: baz;
    }
  }
}

Some examples off the top of my head are as follows.

foo {
  foo: bar;
  @at-root {
    #{&} {
      bar: baz;
    }
  }
}

foo {
  foo: bar;
  @at-root {
    #{&} baz {
      bar: baz;
    }
  }
}

foo {
  foo: bar;
  @at-root {
    baz #{&} {
      bar: baz;
    }
  }
}

foo {
  foo: bar;
  @at-root bar {
    bar: baz;
  }
}

foo {
  foo: bar;
  @at-root bar #{&} {
    bar: baz;
  }
}

foo {
  foo: bar;
  @at-root #{&} bar {
    bar: baz;
  }
}

foo {
  foo: bar;
  @at-root bar #{&} {
    bam {
      bar: baz;
    }
  }
}

[xzyfer]

A good example of what these specs should be like is out at-root specs (ignore the directories starting with numbers).

https://github.com/sass/sass-spec/tree/master/spec/libsass/at-root

[danielguillan]

@xzyfer Just added the new specs. I hope most of the cases are being covered now.

[xzyfer]

Spec updated in sass/sass-spec#403

[MakhBeth]

The issue is not only with #{&} but with all the interpolations.
Example:

@mixin test{
  @at-root #{".interpolated"}{
    @content;
  }
}

.parent{
  @include test(){
  .child{
      a: 2;}
  }
}

The aspected result would be:

.interpolated .child {
  a: 2; }

But instead we'll have:

.parent .interpolated .child {
  a: 2; }

Temporary fix for me was:

@mixin test{
  @at-root body
    #{".interpolated"}{
      @content;
  }
}

Thanks all

[xzyfer]

This is fixed and will be 3.3

[vladcosorg]

Any chance to get 3.3 in the next few days? I would gladly wait and switch from ruby version before i release a package that i'm working on.

Edit: Ah, i see there are still quite a few issues before 3.3 milestone. Oh well :)

[xzyfer]

@chetzof no. We're not expecting 3.3 to land until some time in August.

[vladcosorg]

thanks!

[iparr]

Great news, thanks for the update @xzyfer