css: CSS Media Query Support

[wedow]

Is there any convenient support for media queries which target classes from CSS expressions?

Given some component like

css nav() { ... }

templ Nav() {
	<nav class={ nav }>
		{ children... }
	</nav>
}

I'd like to write a media query which changes some properties on that nav class. There doesn't seem to be a way to reference the ClassName() of the templ.ComponentCSSClass from inside a <style> tag so I'm currently resorting a plain func() string to build a style tag with fmt.Sprintf which isn't very ergonomic.

Is there a better way to accomplish this at this time?

Ideally, something like Emotion's media query support would be available so we could write something like

css nav() {
	display: flex;
	flex-direction: column;

	@media (min-width: 768px) {
		flex-direction: row;
	}
}

which would generate CSS like

<style type="text/css">
	.className_f179 {
		display: flex;
		flex-direction: column;
	}

	@media (min-width: 768px) {
		.className_f179 {
			flex-direction: row;
		}
	}
</style>

[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!

[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]

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?

[joerdav]

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

[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.