Improve arbitrary value validation when parsing candidates #17361
Conversation
thecrypticace
changed the title
| */ | ||
| if (variant[1] === '@' && variant.includes('&')) return null | ||
|
|
||
| let selector = decodeArbitraryValue(variant.slice(1, -1)) |
There was a problem hiding this comment.
kinda bothers me that this var is called selector and not arbitraryValue like in the 5 other places that look identical haha
There was a problem hiding this comment.
I mean, in this case it is a selector because of the variant :P
[.foo]:…
philipp-spiess
left a comment
philipp-spiess
left a comment
There was a problem hiding this comment.
bg-[url(https://example.com?q=;)] will be thrown out but works in postcss so we might allow this too
|
https://jsfiddle.net/cg6v57mp/1/ In Play this works: https://play.tailwindcss.com/hCXYekpfy6 Looked into this, and it looks like a Tailwind Play issue because Tailwind CSS itself does properly generate the correct CSS: div {
background-color: url(https://github.com/tailwindlabs.png?q=;);
}Output: div {
background-color: url(https://github.com/tailwindlabs.png?q=;);
}Even running it through Lightning CSS keeps working as expected: div {
background-color: url("https://github.com/tailwindlabs.png?q=;");
} |
thecrypticace
force-pushed
the
feat/validate-arbitrary-values
branch
from
f4026bd to
8839dd3
Compare
thecrypticace
force-pushed
the
feat/validate-arbitrary-values
branch
from
8839dd3 to
6276ab3
Compare
RobinMalfait
left a comment
RobinMalfait
left a comment
There was a problem hiding this comment.
Aha I see, inlined it. Makes sense 👍
|
I'll fix the Play thing separately. I'm pretty sure I know what the problem is there. |
Fixes #17357 This affects the CDN and Play Now candidates like these no longer parse and emit CSS: - `[--foo:1rem;--bar:2rem]` - `[&{color:red}]:flex` - `data-[a]{color:red}foo[a]:flex`
Fixes #17357
This affects the CDN and Play
Now candidates like these no longer parse and emit CSS:
[--foo:1rem;--bar:2rem][&{color:red}]:flexdata-[a]{color:red}foo[a]:flex