Problem with nesting rules

[franck-paul]

The source CSS file is as below:

.tidy_swap {
  margin-block-end: 0.5em;
  padding: 0.125em;

  color: var(--submit-color);
  background: var(--submit-background);

  &:is(:hover, :focus) {
    color: var(--submit-background);
    background: var(--submit-color);
  }
}

I run the command minify test.css > test.min.css and the result is as below:

.tidy_swap{margin-block-end:0.5em;padding:.125em;color:var(--submit-color);background:var(--submit-background)}

The &:is(…) is missing.

[coderaiser]

Could you please try to create .minfy.json with:

{
    "css": {
        "type": "lightningcss"
    }
}

And check if it works for you. Maybe the problem in clean-css which is used by default.

[franck-paul]

Result:

.foo{color:red}

Weird, isn'it?

[coderaiser]

Looks like, a bug in configs, are you up for a PR?

[coderaiser]

Just fixed in v12.1.0🎉. Is it works for you?

Looks like clean-css doesn't supports & syntax, we can set lightningcss default in a new major version.

[franck-paul]

Yes, the result is far better now:

.tidy_swap{color:var(--submit-color);background:var(--submit-background);margin-block-end:.5em;padding:.125em;&:is(:hover,:focus){color:var(--submit-background);background:var(--submit-color)}}