New rule: no-invalid-css#198
Conversation
| node.tag.name === 'css' | ||
| ) { | ||
| const errors = validateCSS( | ||
| node.quasi.quasis.map((quasi) => quasi.value.raw).join('') |
There was a problem hiding this comment.
similar to why i'm not hugely active maintaining postcss-lit - this stuff becomes very finicky
think about:
css`
.foo {
color: ${someColor};
}
`;this'll be validated as:
.foo {
color: ;
}which presumably fails validation (if it doesn't, there'll be similar cases which do)
in postcss-lit we just tried our best to choose a sensible placeholder, but there's still endless edge cases 😞
maybe thats what we could do here though as "best effort"?
you can see what we do here:
https://github.com/43081j/postcss-lit/blob/b19673062b3f0a63f4be3eaa1845018d1460f156/src/util.ts#L81-L100
but maybe we can be looser than that and just tell consumers to turn it off if it breaks
There was a problem hiding this comment.
Yeah it's a huge PITA. I was thinking that one could turn on this rule if they wanted to strictly not allow template interpolation like this. Or it could emit a warning if plugins like rollup-plugin-minify-html-templates won't be able to minify the given template.
is something that's needed in `rollup-plugin-minify-html-templates!
Maybe I'll put this back into draft mode so I can document this better and maybe work around some of the edge cases as a best effort.
|
I have read through FYI but this introduces a deep dependency im trying to get rid of in the ecosystem cleanup |
2 participants
Hello 👋!
I thought it would be cool to have a complementary CSS rule to
no-invalid-html. It could also be crucial to tools that operate on the CSS in Lit components such as@lit-labs/rollup-plugin-minify-html-literals.Let me know what you think!