tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00

Go to file

CSS Parser: Handle string with semi-colon in custom properties. (#18251 )

Strings are not parsed correctly for custom properties which makes the
following CSS raise an `Unterminated string: ";"` error:

```css
:root { 
  --custom: 'data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==';
}
```

According to the spec, we should accept semi-colon as long as they are
not at the top level.
> The allowed syntax for [custom
properties](https://drafts.csswg.org/css-variables/#custom-property) is
extremely permissive. The <declaration-value> production matches any
sequence of one or more tokens, so long as the sequence does not contain
bad-string-token, bad-url-token, unmatched )-token, ]-token, or }-token,
or top-level semicolon-token tokens or delim-token tokens with a value
of "!".

Extract from: https://drafts.csswg.org/css-variables/#syntax

I was only able to reproduce with **tailwindcss v4**, the previous
version seems to support this. This issue is mitigated by the fact that
even if you want to use a data URL in a custom property, you would need
to wrap the value in a `url()` anyway:

```css
:root { 
  --my-icon-url: url('data:image/svg+xml;base64,...==');
}

.icon {
  background-image: var(--my-icon-url);
}
```

Which works perfectly fine with the current/latest version (v4.1.8).

The fix suggested is to share the same code between regular property and
custom property when it comes to detect that the value is a string
starting with a `SINGLE_QUOTE` or `DOUBLE_QUOTE`. I have moved the
existing code in a `findEndStringIdx` which returns the position of the
ending single/double quote.

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>

2025-06-09 14:03:44 +00:00

.github

Use shards when running integration tests (#18246 )

2025-06-06 19:43:17 +00:00

crates

Release v4.1.8 (#18164 )

2025-05-28 17:01:27 +02:00

integrations

Improve error messages when @apply fails (#18059 )

2025-05-27 20:19:14 +02:00

packages

CSS Parser: Handle string with semi-colon in custom properties. (#18251 )