Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jun 9, 2025

Conversation

cduez
Copy link
Contributor

@cduez cduez commented Jun 7, 2025

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

: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 is extremely permissive. The 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:

: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.

@cduez cduez requested a review from a team as a code owner June 7, 2025 12:51
@thecrypticace thecrypticace self-assigned this Jun 9, 2025
@thecrypticace thecrypticace enabled auto-merge (squash) June 9, 2025 14:00
@thecrypticace thecrypticace merged commit bea843c into tailwindlabs:main Jun 9, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants