Skip to content

Conversation

@RobinMalfait
Copy link
Member

This PR is similar to and a follow up of #18815, but this time to migrate the data theme keys.

Let's imagine you have the following Tailwind CSS v3 configuration:

export default {
  content: ['./src/**/*.html'],
  theme: {
    extend: {
      data: {
        // Automatically handled by bare values
        foo: 'foo',
    //  ^^^   ^^^       ← same names

        // Not automatically handled by bare values
        bar: 'baz',
    //  ^^^   ^^^       ← different names

        // Completely custom
        checked: 'ui~="checked"',
      },
    },
  },
}

Then we would generate the following Tailwind CSS v4 CSS:

@custom-variant data-bar (&[data-baz]);
@custom-variant data-checked (&[data-ui~="checked"]);

Notice how we didn't generate a custom variant for data-foo because those are automatically handled by bare values.

@RobinMalfait RobinMalfait requested a review from a team as a code owner August 28, 2025 10:50
@RobinMalfait RobinMalfait force-pushed the feat/upgrade-data-theme branch from 17b2f0a to 0e1549a Compare August 28, 2025 14:11
@RobinMalfait RobinMalfait force-pushed the feat/upgrade-aria-theme branch from 950eac2 to ebfee41 Compare August 28, 2025 14:36
@RobinMalfait RobinMalfait force-pushed the feat/upgrade-data-theme branch from 0e1549a to a08cb3d Compare August 28, 2025 14:37
Base automatically changed from feat/upgrade-aria-theme to main August 28, 2025 14:40
But we will make sure that we skip the ones that would be handled
automatically by bare values. E.g.: `data-foo:flex` will generate
`[data-foo]`.
If you migrate both `aria-*` and `data-*` custom variants, then the
output would look like this:

```css
@custom-variant aria-bar (&[aria-baz="true"]);
@custom-variant aria-asc (&[aria-sort="ascending"]);
@custom-variant aria-desc (&[aria-sort="descending"]);

@custom-variant data-checked (&[data-ui~="checked"]);
```

Instead of
```css
@custom-variant aria-bar (&[aria-baz="true"]);
@custom-variant aria-asc (&[aria-sort="ascending"]);
@custom-variant aria-desc (&[aria-sort="descending"]);
@custom-variant data-checked (&[data-ui~="checked"]);
```
@RobinMalfait RobinMalfait force-pushed the feat/upgrade-data-theme branch from a08cb3d to 894143b Compare August 28, 2025 14:41
@RobinMalfait RobinMalfait enabled auto-merge (squash) August 28, 2025 14:41
@RobinMalfait RobinMalfait merged commit 82034ec into main Aug 28, 2025
7 checks passed
@RobinMalfait RobinMalfait deleted the feat/upgrade-data-theme branch August 28, 2025 14:45
RobinMalfait added a commit that referenced this pull request Aug 28, 2025
This PR is a follow up of #18815 and #18816, but this time let's migrate
the `supports` theme keys.

Let's imagine you have the following Tailwind CSS v3 configuration:
```ts
export default {
  content: ['./src/**/*.html'],
  theme: {
    extend: {
      supports: {
        // Automatically handled by bare values (using CSS variable as the value)
        foo: 'foo: var(--foo)', // parentheses are optional
        bar: '(bar: var(--bar))',

        // Not automatically handled because names differ
        baz: 'qux: var(--foo)',
   //   ^^^   ^^^       ← different names

        // Custom
        grid: 'display: grid',
      },
    },
  },
}
```

Then we would generate the following Tailwind CSS v4 CSS:

```css
@custom-variant supports-baz {
  @supports (qux: var(--foo)) {
    @slot;
  }
}
@custom-variant supports-grid {
  @supports (display: grid) {
    @slot;
  }
}
```

Notice how we didn't generate a custom variant for `data-foo` or
`data-bar` because those are automatically handled by bare values.

I also went with the longer form of `@custom-variant`, we could use the
single selector approach, but that felt less clear to me.

```css
@custom-variant supports-baz (@supports (qux: var(--foo)));
@custom-variant supports-grid (@supports (display: grid));
```

---------

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