css: CSS Media Query Support

[wedow]

css: CSS Media Query Support

[a-h]

I have a proof-of-concept started that uses the tdewolff CSS parser as a base, and layers in some additional parsing for Go expressions.

The idea would be to use standard <style> tags, but support {{ go.variable }} within values. I've got a few tests here - https://github.com/a-h/templ-css/blob/main/parse_test.go - obviously, the test suite would need to be massively widened out.

Note that most are of type CSSToken, but then there's also a few of type GoToken, which is where the variables are inserted. At the moment, there's no concept of property name to property value, which is what the CSS sanitization uses to determine what (if any) sanitization to support.

Before I jump to anything, the plan is to have an online meeting where everyone that's interested in templ CSS development can get together kick around ideas, and hopefully build consensus on a direction.

[headblockhead]

@joerdav Feel free to make a PR, I haven’t been able to start on adding media queries yet, maybe I was a bit too eager with my comment(!)

[joerdav]

@nftbolt not yet. For now I'd recommend using <style> tags in your template, or css files.

[joerdav]

Currently no there isn't a good way to accomplish this, definitely a good feature for us to have though!

[headblockhead]

Hello! Might attempt to add this in a PR.

[joerdav]

Hi @headblockhead, I was thinking of picking this one up this week, are you still thinking of PRing for this one? Don't want to duplicate work if you're almost there with it!

[joerdav]

Started work here: https://github.com/joerdav/templ/tree/media-queries

[joerdav]

Figured it would be worth discussing the design of it before I go ahead and implement the generator.

[joerdav]

So far the generator side of this has been more complex than expected, I'm thinking of parking for now since there is bigger fish to fry! And this can be worked around at the moment by just using a normal old style tag rather than templ css.

[nftbolt]

Any update on this?