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 <thecrypticace@gmail.com>
@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)
Co-Authored-By: Jordan Pittman <thecrypticace@gmail.com>
@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 - 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 <thecrypticace@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants