posthtml-minify-classnames icon indicating copy to clipboard operation
posthtml-minify-classnames copied to clipboard

Nested selectors are not recognized

Open lonekorean opened this issue 2 years ago • 0 comments

Thank you for your work on this plugin!

When processing vanilla CSS nesting selectors with removeUnfound: true, it seems that some class names are not recognized, resulting in broken styling.

For example, these selectors:

div {
  &.make-green {
    background-color: #6c6;
  }
}

.excitable {
  &[data-excited="true"] .suffix::before {
    content: '!!!';
  }
}

You can see my test case here. The result should be a green box with "!!!" added inside.

This is what I get after processing. You can see that some necessary class names are removed (without being replaced with minified names):

<div class="a" data-excited="true">
  Hello
  <span class=""></span>
</div>
body {
  font: 4rem/1 sans-serif;
}

div {
  width: 400px;
  height: 200px;
  margin: 10px;
  background-color: #c66;
}

div {
  &.make-green {
    background-color: #6c6;
  }
}

.a {
  &[data-excited="true"] .suffix::before {
    content: '!!!';
  }
}

When I run with removeUnfound: false things render correctly (with some class names not minified).

lonekorean avatar Jan 08 '24 13:01 lonekorean