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>
ch4og pushed a commit to csmplay/csm-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) | [![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 (@&#8203;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 ([#&#8203;19263](tailwindlabs/tailwindcss#19263))
- Prevent occasional crash on Windows when loaded into a worker thread ([#&#8203;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 ([#&#8203;19172](tailwindlabs/tailwindcss#19172))
- Fix canonicalization of arbitrary variants with attribute selectors ([#&#8203;19176](tailwindlabs/tailwindcss#19176))
- Fix invalid colors due to nested `&` ([#&#8203;19184](tailwindlabs/tailwindcss#19184))
- Improve canonicalization for `& > :pseudo` and `& :pseudo` arbitrary variants ([#&#8203;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 ([#&#8203;19069](tailwindlabs/tailwindcss#19069))
- Suppress Lightning CSS warnings about `:deep`, `:slotted`, and `:global` ([#&#8203;19094](tailwindlabs/tailwindcss#19094))
- Fix resolving theme keys when starting with the name of another theme key in JS configs and plugins ([#&#8203;19097](tailwindlabs/tailwindcss#19097))
- Allow named groups in combination with `not-*`, `has-*`, and `in-*` ([#&#8203;19100](tailwindlabs/tailwindcss#19100))
- Prevent important utilities from affecting other utilities ([#&#8203;19110](tailwindlabs/tailwindcss#19110))
- Don’t index into strings with the `theme(…)` function ([#&#8203;19111](tailwindlabs/tailwindcss#19111))
- Fix parsing issue when `\t` is used in at-rules ([#&#8203;19130](tailwindlabs/tailwindcss#19130))
- Upgrade: Canonicalize utilities containing `0` values ([#&#8203;19095](tailwindlabs/tailwindcss#19095))
- Upgrade: Migrate deprecated `break-words` to `wrap-break-word` ([#&#8203;19157](tailwindlabs/tailwindcss#19157))

##### Changed

- Remove the `postinstall` script from oxide (\[[#&#8203;19149](https://github.com/tailwindlabs/tailwindcss/issues/19149)])([#&#8203;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 ([#&#8203;18888](tailwindlabs/tailwindcss#18888))
- Handle `@variant` inside `@custom-variant` ([#&#8203;18885](tailwindlabs/tailwindcss#18885))
- Merge suggestions when using `@utility` ([#&#8203;18900](tailwindlabs/tailwindcss#18900))
- Ensure that file system watchers created when using the CLI are always cleaned up ([#&#8203;18905](tailwindlabs/tailwindcss#18905))
- Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#&#8203;18907](tailwindlabs/tailwindcss#18907))
- Do not generate `grid-row` utilities when configuring `grid-row-start` or `grid-row-end` ([#&#8203;18907](tailwindlabs/tailwindcss#18907))
- Prevent duplicate CSS when overwriting a static utility with a theme key ([#&#8203;18056](tailwindlabs/tailwindcss#18056))
- Show Lightning CSS warnings (if any) when optimizing/minifying ([#&#8203;18918](tailwindlabs/tailwindcss#18918))
- Use `default` export condition for `@tailwindcss/vite` ([#&#8203;18948](tailwindlabs/tailwindcss#18948))
- Re-throw errors from PostCSS nodes ([#&#8203;18373](tailwindlabs/tailwindcss#18373))
- Detect classes in markdown inline directives ([#&#8203;18967](tailwindlabs/tailwindcss#18967))
- Ensure files with only `@theme` produce no output when built ([#&#8203;18979](tailwindlabs/tailwindcss#18979))
- Support Maud templates when extracting classes ([#&#8203;18988](tailwindlabs/tailwindcss#18988))
- Upgrade: Do not migrate `variant = 'outline'` during upgrades ([#&#8203;18922](tailwindlabs/tailwindcss#18922))
- Upgrade: Show version mismatch (if any) when running upgrade tool ([#&#8203;19028](tailwindlabs/tailwindcss#19028))
- Upgrade: Ensure first class inside `className` is migrated ([#&#8203;19031](tailwindlabs/tailwindcss#19031))
- Upgrade: Migrate classes inside `*ClassName` and `*Class` attributes ([#&#8203;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 ([#&#8203;18731](tailwindlabs/tailwindcss#18731))
- Drop exact duplicate declarations when emitting CSS ([#&#8203;18809](tailwindlabs/tailwindcss#18809))

##### Fixed

- Don't transition `visibility` when using `transition` ([#&#8203;18795](tailwindlabs/tailwindcss#18795))
- Discard matched variants with unknown named values ([#&#8203;18799](tailwindlabs/tailwindcss#18799))
- Discard matched variants with non-string values ([#&#8203;18799](tailwindlabs/tailwindcss#18799))
- Show suggestions for known `matchVariant` values ([#&#8203;18798](tailwindlabs/tailwindcss#18798))
- Replace deprecated `clip` with `clip-path` in `sr-only` ([#&#8203;18769](tailwindlabs/tailwindcss#18769))
- Hide internal fields from completions in `matchUtilities` ([#&#8203;18820](tailwindlabs/tailwindcss#18820))
- Ignore `.vercel` folders by default (can be overridden by `@source …` rules) ([#&#8203;18855](tailwindlabs/tailwindcss#18855))
- Consider variants starting with `@-` to be invalid (e.g. `@-2xl:flex`) ([#&#8203;18869](tailwindlabs/tailwindcss#18869))
- Do not allow custom variants to start or end with a `-` or `_` ([#&#8203;18867](tailwindlabs/tailwindcss#18867), [#&#8203;18872](tailwindlabs/tailwindcss#18872))
- Upgrade: Migrate `aria` theme keys to `@custom-variant` ([#&#8203;18815](tailwindlabs/tailwindcss#18815))
- Upgrade: Migrate `data` theme keys to `@custom-variant` ([#&#8203;18816](tailwindlabs/tailwindcss#18816))
- Upgrade: Migrate `supports` theme keys to `@custom-variant` ([#&#8203;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>
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.

3 participants