An at-rule name parsing issue (double hyphen)

[mvasilkov]

Environment

• clean-css version: 5.3.0
• node.js version: 16.10.0
• operating system: Windows 10

Configuration options

The ones clean-css-cli uses when run with no arguments.

Input CSS

@keyframes Toast--spinner {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/*!
 * Released under MIT license.
 */
.h0 {
  font-family: -apple-system;
}

Actual output CSS

It prints the following warning:

WARNING: Invalid selector '/*!
 * Released under MIT license.
 */
.h0' at x.css:7:0. Ignoring.

And then the CSS is as follows:

@keyframes Toast--spinner{from{transform:rotate(0)}to{transform:rotate(360deg)}}

Expected output CSS

@keyframes Toast--spinner{from{transform:rotate(0)}to{transform:rotate(360deg)}}/*!
 * Released under MIT license.
 */.h0{font-family:-apple-system}

What seems to be the issue

I noticed that when I rename Toast--spinner to say Toast-spinner (one hyphen), the bug doesn't reproduce.

At first I though that I've hit a CSS spec edge case, but it doesn't seem to be the case:

@keyframes <keyframes-name> {
  <keyframe-block-list>
}
<keyframes-name> = <custom-ident> | <string>

And the custom-ident cannot start with double hyphen, but can seemingly include double hyphens (or at least I couldn't find what forbids it).

Also, making it a string @keyframes "Toast--spinner" doesn't help either.

(The CSS in question is GitHub's own Primer.css)

[mvasilkov]

Found it! This happens because the isVariable flag is set when encountering -- and never reset, which affect comment parsing.

I've got a simple workaround, will make a PR soon.