Skip to content

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Sep 3, 2025

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

RobinMalfait added a commit that referenced this pull request Sep 3, 2025
#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 <[email protected]>
@RobinMalfait RobinMalfait marked this pull request as ready for review September 3, 2025 14:20
@RobinMalfait RobinMalfait requested a review from a team as a code owner September 3, 2025 14:20
This will disallow variants starting with `-` (or existing on its own)
@RobinMalfait RobinMalfait enabled auto-merge (squash) September 3, 2025 14:30
@RobinMalfait RobinMalfait merged commit 54c3f30 into main Sep 3, 2025
7 checks passed
@RobinMalfait RobinMalfait deleted the fix/issue-18863 branch September 3, 2025 14:32
@RobinMalfait RobinMalfait changed the title Do not allow variants to start with - Do not allow variants to start with - or _ Sep 3, 2025
RobinMalfait added a commit that referenced this pull request Sep 3, 2025
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 <[email protected]>
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.

- works as a custom variant, but -- doesn't
2 participants