Implement support for CSS at rules

[gdotdesign]

This PR implements support for the @font-face, @keyframes and @supports CSS rules.

@font-face

It will compile into separate @font-face rules, sub selectors and interpolations are not allowed.

@keyframes

It will compile into separate @keyframes rules, sub selectors are not allowed, interpolations are allowed.

@supports

It works exactly like @media, interpolations and nested selectors are allowed.

[Sija]

@font-face

It will compile into separate @font-face rules, sub selectors and interpolations are not allowed.

I believe interpolations should be allowed. That might come handy when specifying paths prefixes and such.

[gdotdesign]

@font-face rules are global and not part of the component so having interpolations there is somewhat weird: you would have access to constants and environment variables but not items in the scope of the component.

[Sija]

[...] you would have access to constants and environment variables

That's exactly my point since you'd use these for defining paths prefixes to the assets (think CDN for instance).

[gdotdesign]

That's exactly my point since you'd use these for defining paths prefixes to the assets (think CDN for instance).

That would be great, but it's not trivial to implement.

Actually it's technically impossible right now because dynamic properties are converted into CSS variables and I don't think they work in @font-face rules: https://codepen.io/gdotdesign/pen/yLNwyWe

[Sija]

Wait, so interpolations are converted to CSS variables? Aren't they compiled into the resulting string?

[gdotdesign]

Wait, so interpolations are converted to CSS variables? Aren't they compiled into the resulting string?

They are converted to CSS variables ➡️ https://github.com/mint-lang/mint/blob/master/spec/compilers/css_definition it's the most efficient way of making them dynamic and the only way to support them in sub selectors and pseudo elements.

Also all definitions inside a if or case are converted to variables as well, no matter if they are static or have interpolations ➡️ https://github.com/mint-lang/mint/blob/master/spec/compilers/css_with_if_and_case

[Sija]

Oh, I see. It makes sense then 👍