From 27aa8d6a0f9eb3981d8921c2b1ab10bc89852e9e Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Tue, 24 Sep 2024 20:37:02 +0200 Subject: [PATCH 1/5] Add `user-valid` and `user-invalid` variants Co-authored-by: Robin Malfait --- .../__snapshots__/intellisense.test.ts.snap | 20 +++++++++++ packages/tailwindcss/src/variants.test.ts | 36 +++++++++++++++++++ packages/tailwindcss/src/variants.ts | 2 ++ 3 files changed, 58 insertions(+) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 28b443d2491a..89b8ffbf56c5 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -3884,6 +3884,8 @@ exports[`getVariants 1`] = ` "required", "valid", "invalid", + "user-valid", + "user-invalid", "in-range", "out-of-range", "read-only", @@ -3936,6 +3938,8 @@ exports[`getVariants 1`] = ` "required", "valid", "invalid", + "user-valid", + "user-invalid", "in-range", "out-of-range", "read-only", @@ -4162,6 +4166,20 @@ exports[`getVariants 1`] = ` "selectors": [Function], "values": [], }, + { + "hasDash": true, + "isArbitrary": false, + "name": "user-valid", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "user-invalid", + "selectors": [Function], + "values": [], + }, { "hasDash": true, "isArbitrary": false, @@ -4275,6 +4293,8 @@ exports[`getVariants 1`] = ` "required", "valid", "invalid", + "user-valid", + "user-invalid", "in-range", "out-of-range", "read-only", diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index f43945f890fd..14669230dac2 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -490,6 +490,42 @@ test('invalid', async () => { expect(await run(['invalid/foo:flex'])).toEqual('') }) +test('user-valid', async () => { + expect(await run(['user-valid:flex', 'group-user-valid:flex', 'peer-user-valid:flex'])) + .toMatchInlineSnapshot(` + ".group-user-valid\\:flex:is(:where(.group):user-valid *) { + display: flex; + } + + .peer-user-valid\\:flex:is(:where(.peer):user-valid ~ *) { + display: flex; + } + + .user-valid\\:flex:user-valid { + display: flex; + }" + `) + expect(await run(['user-valid/foo:flex'])).toEqual('') +}) + +test('user-invalid', async () => { + expect(await run(['user-invalid:flex', 'group-user-invalid:flex', 'peer-user-invalid:flex'])) + .toMatchInlineSnapshot(` + ".group-user-invalid\\:flex:is(:where(.group):user-invalid *) { + display: flex; + } + + .peer-user-invalid\\:flex:is(:where(.peer):user-invalid ~ *) { + display: flex; + } + + .user-invalid\\:flex:user-invalid { + display: flex; + }" + `) + expect(await run(['invalid/foo:flex'])).toEqual('') +}) + test('in-range', async () => { expect(await run(['in-range:flex', 'group-in-range:flex', 'peer-in-range:flex'])) .toMatchInlineSnapshot(` diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 968f8d7a16d5..018edc9ac1f0 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -438,6 +438,8 @@ export function createVariants(theme: Theme): Variants { staticVariant('required', ['&:required']) staticVariant('valid', ['&:valid']) staticVariant('invalid', ['&:invalid']) + staticVariant('user-valid', ['&:user-valid']) + staticVariant('user-invalid', ['&:user-invalid']) staticVariant('in-range', ['&:in-range']) staticVariant('out-of-range', ['&:out-of-range']) staticVariant('read-only', ['&:read-only']) From 1b85c9e5553a3de89209c26f654c2a1925b17f4a Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 12 Feb 2025 15:25:31 +0100 Subject: [PATCH 2/5] Add feature flag and update snapshots --- .../__snapshots__/intellisense.test.ts.snap | 4 +++ packages/tailwindcss/src/feature-flags.ts | 2 ++ packages/tailwindcss/src/variants.test.ts | 36 ++++++++----------- packages/tailwindcss/src/variants.ts | 7 ++-- 4 files changed, 25 insertions(+), 24 deletions(-) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index c342e94e583a..18384759c727 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -8405,6 +8405,8 @@ exports[`getVariants 1`] = ` "required", "valid", "invalid", + "user-valid", + "user-invalid", "in-range", "out-of-range", "read-only", @@ -8885,6 +8887,8 @@ exports[`getVariants 1`] = ` "required", "valid", "invalid", + "user-valid", + "user-invalid", "in-range", "out-of-range", "read-only", diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts index b24550429193..e6db9b7a6261 100644 --- a/packages/tailwindcss/src/feature-flags.ts +++ b/packages/tailwindcss/src/feature-flags.ts @@ -1 +1,3 @@ export const enableRemoveUnusedThemeVariables = false + +export const enableUserValid = process.env.FEATURES_ENV !== 'stable' diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index fc4cfc956b82..554be3c4d1b6 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -328,36 +328,28 @@ test('invalid', async () => { test('user-valid', async () => { expect(await run(['user-valid:flex', 'group-user-valid:flex', 'peer-user-valid:flex'])) .toMatchInlineSnapshot(` - ".group-user-valid\\:flex:is(:where(.group):user-valid *) { - display: flex; - } - - .peer-user-valid\\:flex:is(:where(.peer):user-valid ~ *) { - display: flex; - } + ".group-user-valid\\:flex:is(:where(.group):user-valid *), .peer-user-valid\\:flex:is(:where(.peer):user-valid ~ *) { + display: flex; + } - .user-valid\\:flex:user-valid { - display: flex; - }" - `) + .user-valid\\:flex:user-valid { + display: flex; + }" + `) expect(await run(['user-valid/foo:flex'])).toEqual('') }) test('user-invalid', async () => { expect(await run(['user-invalid:flex', 'group-user-invalid:flex', 'peer-user-invalid:flex'])) .toMatchInlineSnapshot(` - ".group-user-invalid\\:flex:is(:where(.group):user-invalid *) { - display: flex; - } - - .peer-user-invalid\\:flex:is(:where(.peer):user-invalid ~ *) { - display: flex; - } + ".group-user-invalid\\:flex:is(:where(.group):user-invalid *), .peer-user-invalid\\:flex:is(:where(.peer):user-invalid ~ *) { + display: flex; + } - .user-invalid\\:flex:user-invalid { - display: flex; - }" - `) + .user-invalid\\:flex:user-invalid { + display: flex; + }" + `) expect(await run(['invalid/foo:flex'])).toEqual('') }) diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index f2287fbba044..ea1de7c8acb6 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -12,6 +12,7 @@ import { type StyleRule, } from './ast' import { type Variant } from './candidate' +import { enableUserValid } from './feature-flags' import type { Theme } from './theme' import { compareBreakpoints } from './utils/compare-breakpoints' import { DefaultMap } from './utils/default-map' @@ -692,8 +693,10 @@ export function createVariants(theme: Theme): Variants { staticVariant('required', ['&:required']) staticVariant('valid', ['&:valid']) staticVariant('invalid', ['&:invalid']) - staticVariant('user-valid', ['&:user-valid']) - staticVariant('user-invalid', ['&:user-invalid']) + if (enableUserValid) { + staticVariant('user-valid', ['&:user-valid']) + staticVariant('user-invalid', ['&:user-invalid']) + } staticVariant('in-range', ['&:in-range']) staticVariant('out-of-range', ['&:out-of-range']) staticVariant('read-only', ['&:read-only']) From fb6ce1c27a5d21eaf5d0d268aa85886423930209 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 12 Feb 2025 15:37:56 +0100 Subject: [PATCH 3/5] Add change log --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 06d27203950a..23e50613bf2c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added + +- _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370)) + ### Fixed - Export `tailwindcss/lib/util/flattenColorPalette.js` for backward compatibility ([#16411](https://github.com/tailwindlabs/tailwindcss/pull/16411)) From 36002d344517e9947b90bb3a8d2d32e355768faa Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 12 Feb 2025 16:56:17 +0100 Subject: [PATCH 4/5] Fix browser build --- packages/@tailwindcss-browser/tsup.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@tailwindcss-browser/tsup.config.ts b/packages/@tailwindcss-browser/tsup.config.ts index 5a6d78273e65..8e3f39c47eb9 100644 --- a/packages/@tailwindcss-browser/tsup.config.ts +++ b/packages/@tailwindcss-browser/tsup.config.ts @@ -11,5 +11,6 @@ export default defineConfig({ }, define: { 'process.env.NODE_ENV': '"production"', + 'process.env.FEATURES_ENV': '"insiders"', }, }) From 20231e2f0e07df9e45e55ee75d6c8a40823a175b Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 12 Feb 2025 17:10:36 +0100 Subject: [PATCH 5/5] CDN build should use stable of course --- packages/@tailwindcss-browser/tsup.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@tailwindcss-browser/tsup.config.ts b/packages/@tailwindcss-browser/tsup.config.ts index 8e3f39c47eb9..bb0ddc39cde4 100644 --- a/packages/@tailwindcss-browser/tsup.config.ts +++ b/packages/@tailwindcss-browser/tsup.config.ts @@ -11,6 +11,6 @@ export default defineConfig({ }, define: { 'process.env.NODE_ENV': '"production"', - 'process.env.FEATURES_ENV': '"insiders"', + 'process.env.FEATURES_ENV': '"stable"', }, })