Skip to content

Ensure custom variants can be used via @variant in addBase#20247

Merged
RobinMalfait merged 3 commits into
mainfrom
fix/custom-variants-in-add-base
Jun 16, 2026
Merged

Ensure custom variants can be used via @variant in addBase#20247
RobinMalfait merged 3 commits into
mainfrom
fix/custom-variants-in-add-base

Conversation

@RobinMalfait

Copy link
Copy Markdown
Member

This PR fixes an issue where @variant inside addBase is being used with a custom variant.

The issue is that we substitute the @variant calls immediately when we call the addBase function. That means that variants that aren't processed yet will error out.

This is a regression, because this used to work in Tailwind CSS v4.3.0 and started failing in Tailwind CSS v4.3.1.

Test plan

  1. Added a regression test

We apparently handle it later already as expected. Additionally, this
would actually introduce a bug for custom variants because this is
substituted immediately instead of after resolving values.
@RobinMalfait RobinMalfait requested a review from a team as a code owner June 16, 2026 20:58
@greptile-apps

greptile-apps Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Confidence Score: 5/5

Safe to merge — the change is minimal and targeted, and the global substitution pass already handles @variant for the rest of the AST.

The fix removes a single redundant early call to substituteAtVariant in the addBase handler and relies on the existing global pass in index.ts (line 673) that runs after all custom variants are registered. Error behaviour for genuinely unknown variants is unchanged — substituteAtVariant still throws if the variant cannot be resolved. The regression test directly covers the broken scenario.

No files require special attention.

Reviews (2): Last reviewed commit: "update changelog" | Re-trigger Greptile

@coderabbitai

coderabbitai Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 7f91483a-a04c-40db-84c5-b116bbc803bc

📥 Commits

Reviewing files that changed from the base of the PR and between 7091b2b and 191377a.

📒 Files selected for processing (1)
  • CHANGELOG.md

Walkthrough

In buildPluginApi().addBase, the call to substituteAtVariant(baseNodes, designSystem) and the corresponding OR assignment into featuresRef.current have been removed, along with the substituteAtVariant import from ../variants. Feature tracking inside addBase now only applies substituteFunctions. A new test is added to confirm that @variant directives referencing a @custom-variant-defined variant are correctly resolved in base-layer output, and the changelog documents this fix.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main fix: enabling custom variants to work with @variant in addBase, which matches the PR's primary objective.
Description check ✅ Passed The description clearly explains the regression issue, root cause (immediate substitution preventing proper variant resolution), and mentions the test plan, all directly related to the changeset.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Comment @coderabbitai help to get the list of available commands and usage tips.

@RobinMalfait RobinMalfait merged commit 707c23b into main Jun 16, 2026
7 checks passed
@RobinMalfait RobinMalfait deleted the fix/custom-variants-in-add-base branch June 16, 2026 21:05
RobinMalfait added a commit that referenced this pull request Jun 17, 2026
This PR doesn't fix any issues, but it does add an integration test (as
a regression test) to make sure that `@variant` with default variants
and custom variants can be used inside of JS based plugin APIs.

In Tailwind CSS v4.3.1 we introduced a PR that handles `@variant` in the
`addBase` Plugin API
(#19480). This was a bit
of an older PR, but the tests made sense, so it was merged.

However, by introducing that PR, we introduced a bug that the `@variant`
was handled too early. If you added custom variants later _and_ used it
in the `addBase`, then you would get an error since the variant isn't
available (yet).

That issue was fixed by
#20247

Now the question remains, why did we even have the original PR when it
already worked?

The use case we had was using `@variant` as part of the
`@tailwindcss/typography` plugin configuration for one of our templates.
I was indeed able to reproduce the issue where `@variant lg` was seen in
the output CSS file.

Turns out that this template was using `@tailwindcss/typography` +
`@variant` in the configuration, but it was also using Tailwind CSS
v4.1.15.

Upgrading to the latest version automagically fixed the issue we had.
This is also the behavior you can see in the integration test.

The correct behavior was introduced in an even older PR
#19263

All that said, everything should work in the next release related to
`@variant` usages inside JS based APIs.


**Tiny improvement**

While debugging what's going on, I noticed that we looped over the AST
to get some nodes out and we did that twice. This PR also improves that
by re-using the same list of nodes instead of computing it twice. This
won't have a huge impact, but it happened while compiling every single
utility which is not ideal.

## Test plan

1. All tests should pass
2. I can't see `@variant` in the output CSS file

Input:
<img width="655" height="323" alt="image"
src="https://github.com/user-attachments/assets/20c8d524-3575-488c-b0c0-5c4669f37dc7"
/>

Before:
<img width="477" height="175" alt="image"
src="https://github.com/user-attachments/assets/045e2086-1d4b-487c-96ff-676351412935"
/>


After:
<img width="484" height="175" alt="image"
src="https://github.com/user-attachments/assets/24d950b1-7c28-40f8-96bc-81b38be0e7a3"
/>
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.

1 participant