RegEx selector ignore @font-face

[SylRob]

there is a weird behavior with Regex and @font-face

let's take a css file with some css classes in it and a font-face declaration

this

@import '{ /^\.alert/ } from mycssfile.css';

will import all the .alert*** classes AND the @font-face from mycssfile.css

and this

@import '{ /^\..+/ } from mycssfile.css';

still add the @font-face in the import

the expected behavior is to exclude @font-face if a regexp is used (and it does not match @font-face of course)

[maoberlehner]

Hi @SylRob,

at-rules are a little bit special and there is no perfect way of how to deal with them in the context of selector extraction.

You expect them to be excluded but let's consider the following example.

@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.thing {
  animation: fade 0.2s;
}

Would you also expect the keyframe at-rule to be excluded in such a case?

Another example would be @charset "UTF-8";.

In those two cases I prefer to include them by default.

With nested at-rules like @media it works as expected I think. So the only "problem" is @font-face 🤔

Im open for recommendations for improvement but there are three caveats:

• All at-rules must treated the same. I don't want to exclude @font-face and include @charset by default.
• It must be possible to whitelist at rules if I need them for my selectors to work correctly (e.g. the @keyframe example).
• I want to keep the API simple.

[SylRob]

I see your point of view.
One solution would be to include the @font-face, @media and @Keyframes only if they are mentioned / used in the selected classes. In that case they would be part of the classes (like a dependency)

but this solution exclude the @charset,
I would not consider @charset as part of a class definitions. It's more a indication to the browser on how to read the file.

and more: considering @Keyframes and @font-face you might want to extract them on their own (like from a css animation lib)

---

BTW let me thank you for this repo. Really helpfull !