tailwindcss
tailwindcss copied to clipboard
Keep underscores in dashed-idents
While working on the removal of automatic var injection (#13537), I noticed that underscores in variables are converted to spaces.
Before the automatic var injection removal, the following code would work:
p-[--spacing-0_5] p-[var(--spacing-0_5)]
However, the generated CSS looked like this:
.p-\[--spacing-0_5\] {
padding: var(--spacing-0_5);
}
.p-\[var\(--spacing-0_5\)\] {
padding: var(--spacing-0 5);
/* ^ Notice this space here */
}
One way to solve this is by escaping the underscore, but then you would have to use the variable like this:
p-[var(--spacing-0\_5)]
If you are in a JavaScript context, this could even look like this:
let className = 'p-[var(--spacing-0\\_5)]';
Which looks a bit weird.
So this PR improves the code for handling the _
conversion to
by ensuring that dashed-idents width underscores are not converted to spaces.
One caveat: there are properties, such as anchor-name
, that accept multiple dashed-idents but luckily for us they are separated by commas instead of spaces. E.g.:
.foo {
anchor-name: --foo, --bar;
}
If they were separated by a space, then [anchor-name:--foo_--bar]
would be a problem because it could both mean:
-
--foo --bar
-
--foo_--bar
... because _
values are valid in dashed idents.
If this ever becomes a problem, then we could special case _--
to equal --
(notice the space). But that in turn would convert legitimate values that look like --foo_--bar
. Not sure if this is a real problem, because properties such as anchor-name
are comma-separated right now.