Substitute @variant inside utilities - #19263
Merged
Merged
Conversation
RobinMalfait
approved these changes
Nov 4, 2025
RobinMalfait
left a comment
Member
There was a problem hiding this comment.
A bit odd to include new features in old APIs. But given other things already worked I don't think it hurts to include these 🤔
This was referenced Nov 6, 2025
1 task
This was referenced Nov 7, 2025
This was referenced Nov 8, 2025
1 task
ch4og
pushed a commit
to csmplay/mapban
that referenced
this pull request
Nov 18, 2025
This PR contains the following updates: | Package | Change | Age | Confidence | |---|---|---|---| | [@tailwindcss/postcss](https://tailwindcss.com) ([source](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/@tailwindcss-postcss)) | [`4.1.12` -> `4.1.17`](https://renovatebot.com/diffs/npm/@tailwindcss%2fpostcss/4.1.12/4.1.17) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>tailwindlabs/tailwindcss (@​tailwindcss/postcss)</summary> ### [`v4.1.17`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4117---2025-11-06) [Compare Source](tailwindlabs/tailwindcss@v4.1.16...v4.1.17) ##### Fixed - Substitute `@variant` inside legacy JS APIs ([#​19263](tailwindlabs/tailwindcss#19263)) - Prevent occasional crash on Windows when loaded into a worker thread ([#​19242](tailwindlabs/tailwindcss#19242)) ### [`v4.1.16`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4116---2025-10-23) [Compare Source](tailwindlabs/tailwindcss@v4.1.15...v4.1.16) ##### Fixed - Discard candidates with an empty data type ([#​19172](tailwindlabs/tailwindcss#19172)) - Fix canonicalization of arbitrary variants with attribute selectors ([#​19176](tailwindlabs/tailwindcss#19176)) - Fix invalid colors due to nested `&` ([#​19184](tailwindlabs/tailwindcss#19184)) - Improve canonicalization for `& > :pseudo` and `& :pseudo` arbitrary variants ([#​19178](tailwindlabs/tailwindcss#19178)) ### [`v4.1.15`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4115---2025-10-20) [Compare Source](tailwindlabs/tailwindcss@v4.1.14...v4.1.15) ##### Fixed - Fix Safari devtools rendering issue due to `color-mix` fallback ([#​19069](tailwindlabs/tailwindcss#19069)) - Suppress Lightning CSS warnings about `:deep`, `:slotted`, and `:global` ([#​19094](tailwindlabs/tailwindcss#19094)) - Fix resolving theme keys when starting with the name of another theme key in JS configs and plugins ([#​19097](tailwindlabs/tailwindcss#19097)) - Allow named groups in combination with `not-*`, `has-*`, and `in-*` ([#​19100](tailwindlabs/tailwindcss#19100)) - Prevent important utilities from affecting other utilities ([#​19110](tailwindlabs/tailwindcss#19110)) - Don’t index into strings with the `theme(…)` function ([#​19111](tailwindlabs/tailwindcss#19111)) - Fix parsing issue when `\t` is used in at-rules ([#​19130](tailwindlabs/tailwindcss#19130)) - Upgrade: Canonicalize utilities containing `0` values ([#​19095](tailwindlabs/tailwindcss#19095)) - Upgrade: Migrate deprecated `break-words` to `wrap-break-word` ([#​19157](tailwindlabs/tailwindcss#19157)) ##### Changed - Remove the `postinstall` script from oxide (\[[#​19149](https://github.com/tailwindlabs/tailwindcss/issues/19149)])([#​19149](https://github.com/tailwindlabs/tailwindcss/pull/19149)) ### [`v4.1.14`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4114---2025-10-01) [Compare Source](tailwindlabs/tailwindcss@v4.1.13...v4.1.14) ##### Fixed - Handle `'` syntax in ClojureScript when extracting classes ([#​18888](tailwindlabs/tailwindcss#18888)) - Handle `@variant` inside `@custom-variant` ([#​18885](tailwindlabs/tailwindcss#18885)) - Merge suggestions when using `@utility` ([#​18900](tailwindlabs/tailwindcss#18900)) - Ensure that file system watchers created when using the CLI are always cleaned up ([#​18905](tailwindlabs/tailwindcss#18905)) - Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#​18907](tailwindlabs/tailwindcss#18907)) - Do not generate `grid-row` utilities when configuring `grid-row-start` or `grid-row-end` ([#​18907](tailwindlabs/tailwindcss#18907)) - Prevent duplicate CSS when overwriting a static utility with a theme key ([#​18056](tailwindlabs/tailwindcss#18056)) - Show Lightning CSS warnings (if any) when optimizing/minifying ([#​18918](tailwindlabs/tailwindcss#18918)) - Use `default` export condition for `@tailwindcss/vite` ([#​18948](tailwindlabs/tailwindcss#18948)) - Re-throw errors from PostCSS nodes ([#​18373](tailwindlabs/tailwindcss#18373)) - Detect classes in markdown inline directives ([#​18967](tailwindlabs/tailwindcss#18967)) - Ensure files with only `@theme` produce no output when built ([#​18979](tailwindlabs/tailwindcss#18979)) - Support Maud templates when extracting classes ([#​18988](tailwindlabs/tailwindcss#18988)) - Upgrade: Do not migrate `variant = 'outline'` during upgrades ([#​18922](tailwindlabs/tailwindcss#18922)) - Upgrade: Show version mismatch (if any) when running upgrade tool ([#​19028](tailwindlabs/tailwindcss#19028)) - Upgrade: Ensure first class inside `className` is migrated ([#​19031](tailwindlabs/tailwindcss#19031)) - Upgrade: Migrate classes inside `*ClassName` and `*Class` attributes ([#​19031](tailwindlabs/tailwindcss#19031)) ### [`v4.1.13`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4113---2025-09-03) [Compare Source](tailwindlabs/tailwindcss@v4.1.12...v4.1.13) ##### Changed - Drop warning from browser build ([#​18731](tailwindlabs/tailwindcss#18731)) - Drop exact duplicate declarations when emitting CSS ([#​18809](tailwindlabs/tailwindcss#18809)) ##### Fixed - Don't transition `visibility` when using `transition` ([#​18795](tailwindlabs/tailwindcss#18795)) - Discard matched variants with unknown named values ([#​18799](tailwindlabs/tailwindcss#18799)) - Discard matched variants with non-string values ([#​18799](tailwindlabs/tailwindcss#18799)) - Show suggestions for known `matchVariant` values ([#​18798](tailwindlabs/tailwindcss#18798)) - Replace deprecated `clip` with `clip-path` in `sr-only` ([#​18769](tailwindlabs/tailwindcss#18769)) - Hide internal fields from completions in `matchUtilities` ([#​18820](tailwindlabs/tailwindcss#18820)) - Ignore `.vercel` folders by default (can be overridden by `@source …` rules) ([#​18855](tailwindlabs/tailwindcss#18855)) - Consider variants starting with `@-` to be invalid (e.g. `@-2xl:flex`) ([#​18869](tailwindlabs/tailwindcss#18869)) - Do not allow custom variants to start or end with a `-` or `_` ([#​18867](tailwindlabs/tailwindcss#18867), [#​18872](tailwindlabs/tailwindcss#18872)) - Upgrade: Migrate `aria` theme keys to `@custom-variant` ([#​18815](tailwindlabs/tailwindcss#18815)) - Upgrade: Migrate `data` theme keys to `@custom-variant` ([#​18816](tailwindlabs/tailwindcss#18816)) - Upgrade: Migrate `supports` theme keys to `@custom-variant` ([#​18817](tailwindlabs/tailwindcss#18817)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS4xNDguNCIsInVwZGF0ZWRJblZlciI6IjQyLjAuMyIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> Reviewed-on: https://git.in.csmpro.ru/csmpro/csm-mapban/pulls/28 Co-authored-by: Renovate Bot <renovate@csmpro.ru> Co-committed-by: Renovate Bot <renovate@csmpro.ru>
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" />
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #19258