Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

at-root does not work if there is an internal if statement #2185

Closed
speedplane opened this issue Sep 22, 2016 · 1 comment
Closed

at-root does not work if there is an internal if statement #2185

speedplane opened this issue Sep 22, 2016 · 1 comment

Comments

@speedplane
Copy link

speedplane commented Sep 22, 2016

at-root does not work if there is an internal if statement

input.scss

$bar: true;
p {
    @if $bar {
        @at-root {
            div {
                width: 100px;
            }
        }
    }

    @at-root {
        @if $bar {
            div {
                height: 100px;
            }
        }
    }
}

libsass 3.5.5

div {
  width: 100px;
}

p div {
  height: 100px;
}

Expected result:

div {
  width: 100px;
}

div {
  height: 100px;
}
mgreter added a commit to mgreter/sass-spec that referenced this issue Sep 24, 2016
mgreter added a commit to mgreter/sass-spec that referenced this issue Sep 24, 2016
mgreter added a commit to mgreter/libsass that referenced this issue Sep 24, 2016
The root flag should be inherited from the parent, since
the statements are transparent (no CSS blocks in output).

Fixes  sass#2185
@mgreter mgreter added this to the 3.3.7 milestone Sep 24, 2016
@mgreter mgreter self-assigned this Sep 24, 2016
@mgreter
Copy link
Contributor

mgreter commented Sep 24, 2016

Updated the test to also include all? other similar statements:

$bar: true;

@mixin mixin() {
    mix: in;
}

@mixin include() {
    @content;
}

p {
    @at-root {
        @if $bar {
            #if {
                height: 100px;
            }
        }
        @if (not $bar) {
        } @elseif($bar) {
            #elseif {
                width: 100px;
            }
        }
        @if (not $bar) {
        } @else {
            #else {
                width: 100px;
            }
        }
        @for $i from 1 through 1 {
            #for {
                foo: bar#{$i};
            }
        }
        $i: 0;
        @while ($i == 0) {
            $i: $i + 1;
            #while {
                foo: bar#{$i};
            }
        }
        @each $i in (1) {
            #each {
                foo: bar#{$i};
            }
        }
        #inc {
            @include mixin();
            @include include() {
                inc: lude;
            }
        }
        @supports (display: flex) {
            display: flex;
        }
        @foo {
           bar: bat;
        }
    }
}

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

No branches or pull requests

3 participants