Fix token fallback plugins rewriting var() inside string literals by dilipom13 · Pull Request #82209 · WordPress/gutenberg

dilipom13 · 2026-08-29T10:07:47Z

What

PostCSS, esbuild, and Vite token-fallback plugins were incorrectly rewriting var(--wpds-*) inside quoted CSS strings and JS comments. They now skip those regions, matching Lightning CSS behavior.

How to test

npm run test:unit -- --testPathPatterns=packages/theme/postcss-plugins/test/add-fallback-to-var
npm run test:unit -- --testPathPatterns=packages/theme/src/test/build-plugin-parity

Skip quoted CSS strings and JS comments when injecting --wpds-* fallbacks so PostCSS, esbuild, and Vite match Lightning CSS behavior. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-08-29T10:07:56Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dilipom13 <dilip2615@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: simison <simison@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Co-authored-by: Cursor <cursoragent@cursor.com>

shail-mehta · 2026-08-29T12:49:26Z

@dilipom13 Thanks for the PR!

Just a quick note: Good First Issues are intended to help new WordPress contributors get started, so they’re generally reserved for new contributors.

dilipom13 · 2026-08-29T13:59:21Z

@dilipom13 Thanks for the PR!

Just a quick note: Good First Issues are intended to help new WordPress contributors get started, so they’re generally reserved for new contributors.

Okay @shail-mehta

Thanks for your appreciation.

ciampo · 2026-08-31T14:02:52Z

+		if ( char === '/' && next === '/' ) {
+			const end = source.indexOf( '\n', index );
+			const sliceEnd = end === -1 ? source.length : end;
+			result += source.slice( index, sliceEnd );
+			index = sliceEnd;
+			continue;
+		}
+
+		if ( char === '/' && next === '*' ) {
+			const end = source.indexOf( '*/', index + 2 );
+			const sliceEnd = end === -1 ? source.length : end + 2;
+			result += source.slice( index, sliceEnd );
+			index = sliceEnd;
+			continue;
+		}
+
+		if ( char === '"' || char === "'" ) {
+			const end = readQuotedSegment( source, index );
+			const literal = source.slice( index, end );
+			const quote = literal[ 0 ];
+			const inner = literal.slice( 1, -1 );
+			const transformed = transformCssValue(
+				inner,
+				tokenFallbacks,
+				options
+			);
+			result += quote + transformed + quote;
+			index = end;
+			continue;
+		}


This scanner treats quote and comment markers inside regular-expression literals as JavaScript syntax.

For example, const re = /["']/; const s = 'var(--wpds-border-radius-sm)'; becomes invalid JavaScript.

Maybe we should use a real JS/TS parser or lexer to locate string and template contents and add regex-literal coverage?

ciampo · 2026-08-31T14:10:35Z

+		if ( source[ index ] === '$' && source[ index + 1 ] === '{' ) {
+			const expressionEnd = readTemplateExpression( source, index + 2 );
+			content += source.slice( index, expressionEnd );
+			index = expressionEnd;
+			continue;
+		}


Copying each template expression unchanged means CSS strings nested inside it no longer receive fallbacks. Please keep transforming string and template literals inside expressions and add a regression test for a conditional CSS value.

Example of a regression

This input was transformed at the base revision but is left unchanged at this head:

const styles = `${ enabled ? 'var(--wpds-border-radius-sm)' : '' }`;

The published esbuild and Vite plugins support JS/TS source, and @wordpress/build enables the esbuild plugin automatically when @wordpress/theme is installed. Leaving this reference bare defeats the fallback plugin when the design-token stylesheet is unavailable.

ciampo · 2026-08-31T14:46:09Z

Also, this PR feels a bit overcomplicated / overengineered. Potentially a cleaner design would be:

A JS/TS tokenizer or parser to locate strings and template segments.
A CSS value parser to find real, bare var(--wpds-*) functions.
A small shared helper for fallback lookup and formatting.
Separate CSS and JS entry points instead of using escapeQuotes to switch languages.

Although let's wait for feedback from @WordPress/gutenberg-components and @manzoorwanijk before proceeding.

mirka · 2026-08-31T14:47:09Z

I added my thoughts on the original issue, as there doesn't seem to be an assessment of the cost/benefit. (Not necessarily against it, but just saying that it should be a reasoned decision.)

simison · 2026-08-31T14:57:07Z

+1 as of current state, not really worth complicating this much. If there's a simple elegant solution, then it would make sense.

ciampo · 2026-08-31T15:13:04Z

Right, let's close this PR for now, since there is a general agreement that the solution complexity isn't worth the benefits.

@dilipom13 , thank you for working on this anyway! In the future, probably better to coordinate on the original issue before working on a PR.

Fix token fallback plugins rewriting var() inside string literals

daf52bc

Skip quoted CSS strings and JS comments when injecting --wpds-* fallbacks so PostCSS, esbuild, and Vite match Lightning CSS behavior. Co-authored-by: Cursor <cursoragent@cursor.com>

dilipom13 requested a review from a team as a code owner August 29, 2026 10:07

github-actions Bot added the [Package] Theme /packages/theme label Aug 29, 2026

Update theme CHANGELOG with PR reference

7bec5d4

Co-authored-by: Cursor <cursoragent@cursor.com>

shail-mehta added the [Type] Bug An existing feature does not function as intended label Aug 29, 2026

ciampo reviewed Aug 31, 2026

View reviewed changes

ciampo closed this Aug 31, 2026

Navigation Menu

Uh oh!

Fix token fallback plugins rewriting var() inside string literals - #82209

Fix token fallback plugins rewriting var() inside string literals#82209
dilipom13 wants to merge 2 commits into
WordPress:trunkfrom
dilipom13:fix/82169-token-fallback-string-literals

dilipom13 commented Aug 29, 2026

Uh oh!

github-actions Bot commented Aug 29, 2026 •

edited

Loading

Uh oh!

shail-mehta commented Aug 29, 2026

Uh oh!

dilipom13 commented Aug 29, 2026

Uh oh!

ciampo Aug 31, 2026

Uh oh!

ciampo Aug 31, 2026

Uh oh!

ciampo commented Aug 31, 2026

Uh oh!

mirka commented Aug 31, 2026

Uh oh!

simison commented Aug 31, 2026

Uh oh!

ciampo commented Aug 31, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

dilipom13 commented Aug 29, 2026

What

How to test

Uh oh!

github-actions Bot commented Aug 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shail-mehta commented Aug 29, 2026

Uh oh!

dilipom13 commented Aug 29, 2026

Uh oh!

ciampo Aug 31, 2026

Choose a reason for hiding this comment

Uh oh!

ciampo Aug 31, 2026

Choose a reason for hiding this comment

Uh oh!

ciampo commented Aug 31, 2026

Uh oh!

mirka commented Aug 31, 2026

Uh oh!

simison commented Aug 31, 2026

Uh oh!

ciampo commented Aug 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

github-actions Bot commented Aug 29, 2026 •

edited

Loading

ciampo commented Aug 31, 2026 •

edited

Loading