Escaped at symbol in classes causes an issue with css purifier

[brianmercer]

UIkit version

3.0.0-rc.11

What is Expected?

A css purifier will match the html class with the class in the stylesheet and leave the class in the stylesheet.

What is actually happening?

The css purifier removes the class from the stylesheet because the backslash prevents it from matching the html class.

I'm talking about the at symbol in classes like ".uk-child-width-auto@s".

My particular issue is that since they appear as ".uk-child-width-auto\@s" in the stylesheet, and therefore are not an exact match with the class in the html, my purifier (purge-css) removes them.

How about a nice underscore instead so they don't have to be escaped?

[szabeszg]

Many syntax highlighters also have trouble dealing with @. For example in Netbeans.
I wish it was configurable. Underscore is a nice alternative.

[brianmercer]

Resolved the issue by adding a custom extractor to purgecss that includes the at symbol in the regex.

            extractors: [
              {
                extractor: class {
                  static extract(content) {
                    return content.match(/[@A-Za-z0-9_-]+/g) || []
                  }
                },
                // Specify all necessary file types. There is no fallback to default.
                extensions: ["njk", "html", "whitelist"]
              }
            ]