How to re-use css styles ?

[sshmaxime]

I have to style a div that will have different variants. I don't want to re-write the base multiple times. It seems that I failed to see how we could do that in the doc.

I wanted to do something like that:

const baseStyle = css`
	display: flex;
	gap: 8px;
	border-radius: 100px;
	background-color: hsla(0, 0%, 4%, 1);
	color: hsla(0, 0%, 98%, 1);
`;

export const style = css`
	.layer1 {
		${baseStyle};

		// More style
	}
`;

[augustjk]

What you have there definitely works.
See this playground example.

[sshmaxime]

This is what I get:

lit: 3.1.3
lit-analyzer: 2.0.3
typescript: 5.3.3

[augustjk]

That's due to the no-invalid-css rule for lit-plugin. I don't think the css tag has that strict requirement that things inside be valid css as long as it's part of another css tag so it would be safe to disable.

[sshmaxime]

Alright, thank you very much for your fast replies @augustjk 🙏