@page wrapped around a class will output the wrong selection

[stevenbriscoeca]

I know this is a tad weird because you should not need to wrap the @page selector in any situation, but we are wrapping bootstrap in a class. Bootstrap uses the page in the middle of a few selectors :
https://github.com/twbs/bootstrap/blob/v4.0.0/scss/_print.scss#L86-L91

So when we do

.abc {
  @import "print";
}

The css is compiled with the parent class, thus making the minification confused and break.

input.scss

.abc {
  @print {
    .random {
      color:red;
    }
    @page {
      size: a3;
    }
  }
}

Actual results

I am using node-sass 4.7.2

@print {
  .abc .random {
    color: red;
  }
  @page {
    .abc {
      size: a3;
    }
  }
}

Expected result

I just want the class to be stripped.

node-sass 4.7.2

@print {
  .abc .random {
    color: red;
  }
  @page {
      size: a3;    
  }
}

version info:

$ node-sass --4.7.2

[nschonni]

Did you try this with Ruby Sass?

[stevenbriscoeca]

I have not. Would you want me to try it and report back ?

[nschonni]

Yes please, because if Ruby has the same behaviour, it's a feature not a bug 😉

[stevenbriscoeca]

Lol but what does that mean? I don't know the history of ruby sass and it seems like you are alluring to something

[xzyfer]

Ruby Sass is the official Sass. LibSass is an implementation of the Sass language. Our job is to mimic the behaviour of Ruby Sass.

[xzyfer]

// Ruby Sass
@print {
  .abc .random {
    color: red; }
  @page {
    .abc {
      size: a3; } } }

// Dart Sass
@print {
  .abc .random {
    color: red;
  }
  @page {
    .abc {
      size: a3;
    }
  }
}

// LibSass
@print {
  .abc .random {
    color: red; }
  @page {
    .abc {
      size: a3; } } }

[xzyfer]

If you think this behaviour is wrong please open an issue with Ruby Sass. https://github.com/sass/sass