Do not allow variants to start with `-` or `_` #18867

RobinMalfait · 2025-09-03T13:29:04Z

This PR fixes an issue where custom variants with just - in the name were allowed but weren't actually picked up by Oxide so you couldn't use them anyway.

The reason we allow - is for kebab-style-variants, which is very common, but you shouldn't use -, -- or more in a variant name.

It doesn't really solve the issue (#18863), but it fixes the inconsistencies in that exist today.

Inconsistencies:

	`-:flex`	`--:flex`
Oxide	❌	❌
Tailwind Play	✅	❌
Intellisense	✅	✅

Oxide already had the correct rules setup, so this is expected
Tailwind Play uses Tailwind's core compile step, but it considers candidates that start with -- as a CSS variable instead of a utility. This means that the --:flex was considered a CSS variable and skipped during compilation.
Intellisense uses the same APIs than Tailwind's core, but it didn't have the CSS variable check which resulted in the --:flex being "correct".

With this PR, the matrix looks like this now:

	`-:flex`	`--:flex`
Oxide	❌	❌
Tailwind Play	❌	❌
Intellisense	❌	❌

This should not be considered a breaking change because Oxide didn't pick up candidates with variants that start with a -. CSS for these candidates was never generated before.

Closes: #18863

#18869) This PR fixes a small parsing issue where variants such as `@-2xl:flex` would parse, but were handled as-if they were `@2xl:flex` instead. Noticed this while working on: #18867 This is because when we parse normal variants like `data-foo` then we want to have a `data` root and a `foo` value, not a `-foo` value. If you are now using `@-2xl:flex`, then no CSS will be generated for this anymore. If you were relying on this for some reason, you should use `@2xl:flex` instead. ## Test plan Before: <img width="862" height="586" alt="image" src="https://github.com/user-attachments/assets/b5993ca6-f907-49af-b5bd-b7206c8300e1" /> After: <img width="862" height="586" alt="image" src="https://github.com/user-attachments/assets/351f45e4-4cd3-451c-ae2a-c52c3e770629" /> --------- Co-authored-by: Jordan Pittman <thecrypticace@gmail.com>

This will disallow variants starting with `-` (or existing on its own)

Co-Authored-By: Jordan Pittman <thecrypticace@gmail.com>

This PR is a followup of #18867, but this time we won't allow `@custom-variant` to end with `-` or `_`. The same reasoning applies here where Oxide doesn't pick this up but Intellisense and Tailwind CSS' core does. --------- Co-authored-by: Jordan Pittman <thecrypticace@gmail.com>

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) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@tailwindcss%2fpostcss/4.1.17?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@tailwindcss%2fpostcss/4.1.12/4.1.17?slim=true)](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. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  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 mentioned this pull request Sep 3, 2025

Consider variants starting with @- to be invalid (e.g. @-2xl:flex) #18869

Merged

add failing test

9823ffe

RobinMalfait force-pushed the fix/issue-18863 branch from fc1f0ea to 4313f9b Compare September 3, 2025 14:14

RobinMalfait marked this pull request as ready for review September 3, 2025 14:20

RobinMalfait requested a review from a team as a code owner September 3, 2025 14:20

RobinMalfait added 2 commits September 3, 2025 16:22

adjust variant name validation regex

a9ba89b

This will disallow variants starting with `-` (or existing on its own)

update changelog

c5c3ed7

RobinMalfait force-pushed the fix/issue-18863 branch from 4313f9b to c5c3ed7 Compare September 3, 2025 14:22

adjust error message more correct rules in place

7a72703

Co-Authored-By: Jordan Pittman <thecrypticace@gmail.com>

thecrypticace approved these changes Sep 3, 2025

View reviewed changes

RobinMalfait enabled auto-merge (squash) September 3, 2025 14:30

RobinMalfait merged commit 54c3f30 into main Sep 3, 2025
7 checks passed

RobinMalfait deleted the fix/issue-18863 branch September 3, 2025 14:32

RobinMalfait mentioned this pull request Sep 3, 2025

- works as a custom variant, but -- doesn't #18863

Closed

RobinMalfait changed the title ~~Do not allow variants to start with -~~ Do not allow variants to start with - or _ Sep 3, 2025

RobinMalfait mentioned this pull request Sep 3, 2025

Do not allow variants to end with - or _ #18872

Merged

fossabot bot mentioned this pull request Oct 25, 2025

chore(deps-dev): bump tailwindcss from 3.4.18 to 4.1.16 WhizUs-Labs/kcd-showcase-trw-demo-app#28

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Do not allow variants to start with `-` or `_` #18867

Do not allow variants to start with `-` or `_` #18867

Uh oh!

RobinMalfait commented Sep 3, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Do not allow variants to start with - or _ #18867

Do not allow variants to start with - or _ #18867

Uh oh!

Conversation

RobinMalfait commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Do not allow variants to start with `-` or `_` #18867

Do not allow variants to start with `-` or `_` #18867

RobinMalfait commented Sep 3, 2025 •

edited

Loading