tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Keep underscores in dashed-idents

Open RobinMalfait opened this issue 1 month ago • 0 comments

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.

RobinMalfait avatar Apr 17 '24 15:04 RobinMalfait