dart-sass icon indicating copy to clipboard operation
dart-sass copied to clipboard

nested at-rules breaks at-rule merging

Open clshortfuse opened this issue 6 years ago • 1 comments

I recently moved from node-sass 4.12.0 to (dart-)sass 1.22.7

Upon switching, I noticed that some at-rules end up being repeated. I've tracked down the issue where upon using a nested at-rule, it breaks subsequent rules.

My project that shows the issue is here: https://github.com/clshortfuse/materialdesignweb/blob/3964f7d72f2d6753d9691ed70c8b4fc60cb52dd7/components/layout/_spec.scss

I've a smaller version of the issue available here:

https://www.sassmeister.com/gist/a66eb997749a1c088dd290c30bfd0003

On a related sidenote, I actually had rewritten a good chunk of cssnano's merge-rules plugin to do this in post-processing, and it's been commited to master, but cssnano hasn't received a version bump yet.

https://github.com/cssnano/cssnano/pull/722/files

clshortfuse avatar Jul 22 '19 18:07 clshortfuse

For a minimal reproduction:

@media (a: b) {
  @media (orientation: portrait) {
    c {d: e}
  }
  
  f {g: h}
  i {j: k}
}

should produce

@media (a: b) and (orientation: portrait) {
  c {
    d: e;
  }
}
@media (a: b) {
  f {
    g: h;
  }

  i {
    j: k;
  }
}

but actually produces

@media (a: b) and (orientation: portrait) {
  c {
    d: e;
  }
}
@media (a: b) {
  f {
    g: h;
  }
}
@media (a: b) {
  i {
    j: k;
  }
}

nex3 avatar Jul 22 '19 23:07 nex3