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/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

3 participants