From e30b9bc0b38d48714e3c1732b94d9070dfd20efd Mon Sep 17 00:00:00 2001 From: Luke Warlow Date: Fri, 6 Dec 2024 11:26:43 +0000 Subject: [PATCH 1/2] Add `details-content` variant This matches the new `::details-content` pseudo element. --- .../src/__snapshots__/intellisense.test.ts.snap | 7 +++++++ packages/tailwindcss/src/variants.test.ts | 14 ++++++++++++++ packages/tailwindcss/src/variants.ts | 1 + 3 files changed, 22 insertions(+) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index bd2b3dad964d..04aeb792cd1c 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -8610,6 +8610,13 @@ exports[`getVariants 1`] = ` "selectors": [Function], "values": [], }, + { + "hasDash": true, + "isArbitrary": false, + "name": "details-content", + "selectors": [Function], + "values": [], + }, { "hasDash": true, "isArbitrary": false, diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index afde353945f5..989ba83b08af 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -95,6 +95,15 @@ test('backdrop', async () => { expect(await run(['backdrop/foo:flex'])).toEqual('') }) +test('details-content', async () => { + expect(await run(['details-content:flex'])).toMatchInlineSnapshot(` + ".details-content\\:flex::details-content { + display: flex; + }" + `) + expect(await run(['details-content/foo:flex'])).toEqual('') +}) + test('before', async () => { expect(await run(['before:flex'])).toMatchInlineSnapshot(` ".before\\:flex:before { @@ -2092,6 +2101,7 @@ test('variant order', async () => { 'data-custom:flex', 'data-[custom=true]:flex', 'default:flex', + 'details-content:flex', 'disabled:flex', 'empty:flex', 'enabled:flex', @@ -2178,6 +2188,10 @@ test('variant order', async () => { display: flex; } + .details-content\\:flex::details-content { + display: flex; + } + .before\\:flex:before, .after\\:flex:after { content: var(--tw-content); display: flex; diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index a79eebe5f10c..6129c20e977f 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -628,6 +628,7 @@ export function createVariants(theme: Theme): Variants { staticVariant('file', ['&::file-selector-button']) staticVariant('placeholder', ['&::placeholder']) staticVariant('backdrop', ['&::backdrop']) + staticVariant('details-content', ['&::details-content']) { function contentProperties() { From e7ac745841129be9878c356f4b18e1f9fdb15815 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 26 Feb 2025 11:32:56 +0100 Subject: [PATCH 2/2] Update changelog and add feature flag --- CHANGELOG.md | 1 + packages/tailwindcss/src/feature-flags.ts | 1 + packages/tailwindcss/src/variants.ts | 6 ++++-- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f1b39a5cbf79..e2cf69322edc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- _Experimental_: Add `details-content` variant ([#15319](https://github.com/tailwindlabs/tailwindcss/pull/15319)) - _Experimental_: Add `inverted-colors` variant ([#11693](https://github.com/tailwindlabs/tailwindcss/pull/11693)) - _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370)) - _Experimental_: Add `wrap-anywhere`, `wrap-break-word`, and `wrap-normal` utilities ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128)) diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts index c84536abc644..ccba9055ef7a 100644 --- a/packages/tailwindcss/src/feature-flags.ts +++ b/packages/tailwindcss/src/feature-flags.ts @@ -1,3 +1,4 @@ +export const enableDetailsContent = process.env.FEATURES_ENV !== 'stable' export const enableInvertedColors = process.env.FEATURES_ENV !== 'stable' export const enableUserValid = process.env.FEATURES_ENV !== 'stable' export const enableWrapAnywhere = process.env.FEATURES_ENV !== 'stable' diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 6129c20e977f..7d7df8cd03d0 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -12,7 +12,7 @@ import { type StyleRule, } from './ast' import { type Variant } from './candidate' -import { enableInvertedColors, enableUserValid } from './feature-flags' +import { enableDetailsContent, enableInvertedColors, enableUserValid } from './feature-flags' import type { Theme } from './theme' import { compareBreakpoints } from './utils/compare-breakpoints' import { DefaultMap } from './utils/default-map' @@ -628,7 +628,9 @@ export function createVariants(theme: Theme): Variants { staticVariant('file', ['&::file-selector-button']) staticVariant('placeholder', ['&::placeholder']) staticVariant('backdrop', ['&::backdrop']) - staticVariant('details-content', ['&::details-content']) + if (enableDetailsContent) { + staticVariant('details-content', ['&::details-content']) + } { function contentProperties() {