diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f77b5f5a9ec..0b76f9b8f702 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _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 `scripting`, `scripting-none`, and `scripting-initial` variants ([#11929](https://github.com/tailwindlabs/tailwindcss/pull/11929)) +- _Experimental_: Add `pointer-none`, `pointer-coarse`, and `pointer-fine` variant ([#16946](https://github.com/tailwindlabs/tailwindcss/pull/16946)) +- _Experimental_: Add `any-pointer-none`, `any-pointer-coarse`, and `any-pointer-fine` variants ([#16941](https://github.com/tailwindlabs/tailwindcss/pull/16941)) - _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)) - Add `col-` and `row-` utilities for `grid-column` and `grid-row` ([#15183](https://github.com/tailwindlabs/tailwindcss/pull/15183)) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index ec055e7b4aa3..29f45d7fccb5 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -8447,6 +8447,12 @@ exports[`getVariants 1`] = ` "print", "forced-colors", "inverted-colors", + "pointer-none", + "pointer-coarse", + "pointer-fine", + "any-pointer-none", + "any-pointer-coarse", + "any-pointer-fine", "scripting-initial", "scripting-none", "scripting", @@ -9185,6 +9191,48 @@ exports[`getVariants 1`] = ` "selectors": [Function], "values": [], }, + { + "hasDash": true, + "isArbitrary": false, + "name": "pointer-none", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "pointer-coarse", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "pointer-fine", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "any-pointer-none", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "any-pointer-coarse", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "any-pointer-fine", + "selectors": [Function], + "values": [], + }, { "hasDash": true, "isArbitrary": false, diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts index 5852e95b2072..d3278905e8d2 100644 --- a/packages/tailwindcss/src/feature-flags.ts +++ b/packages/tailwindcss/src/feature-flags.ts @@ -1,5 +1,6 @@ export const enableDetailsContent = process.env.FEATURES_ENV !== 'stable' export const enableInvertedColors = process.env.FEATURES_ENV !== 'stable' +export const enablePointerVariants = process.env.FEATURES_ENV !== 'stable' export const enableScripting = 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.test.ts b/packages/tailwindcss/src/variants.test.ts index 84be051c5b79..5f4f2401c74b 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -1919,6 +1919,66 @@ test('inverted-colors', async () => { `) }) +test('pointer-none', async () => { + expect(await run(['pointer-none:flex'])).toMatchInlineSnapshot(` + "@media (pointer: none) { + .pointer-none\\:flex { + display: flex; + } + }" + `) +}) + +test('pointer-coarse', async () => { + expect(await run(['pointer-coarse:flex'])).toMatchInlineSnapshot(` + "@media (pointer: coarse) { + .pointer-coarse\\:flex { + display: flex; + } + }" + `) +}) + +test('pointer-fine', async () => { + expect(await run(['pointer-fine:flex'])).toMatchInlineSnapshot(` + "@media (pointer: fine) { + .pointer-fine\\:flex { + display: flex; + } + }" + `) +}) + +test('any-pointer-none', async () => { + expect(await run(['any-pointer-none:flex'])).toMatchInlineSnapshot(` + "@media (any-pointer: none) { + .any-pointer-none\\:flex { + display: flex; + } + }" + `) +}) + +test('any-pointer-coarse', async () => { + expect(await run(['any-pointer-coarse:flex'])).toMatchInlineSnapshot(` + "@media (any-pointer: coarse) { + .any-pointer-coarse\\:flex { + display: flex; + } + }" + `) +}) + +test('any-pointer-fine', async () => { + expect(await run(['any-pointer-fine:flex'])).toMatchInlineSnapshot(` + "@media (any-pointer: fine) { + .any-pointer-fine\\:flex { + display: flex; + } + }" + `) +}) + test('scripting-initial', async () => { expect(await run(['scripting-initial:flex'])).toMatchInlineSnapshot(` "@media (scripting: initial-only) { diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 22ae5beec817..c428b3a1a704 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -15,6 +15,7 @@ import { type Variant } from './candidate' import { enableDetailsContent, enableInvertedColors, + enablePointerVariants, enableScripting, enableUserValid, } from './feature-flags' @@ -1150,6 +1151,15 @@ export function createVariants(theme: Theme): Variants { staticVariant('inverted-colors', ['@media (inverted-colors: inverted)']) } + if (enablePointerVariants) { + staticVariant('pointer-none', ['@media (pointer: none)']) + staticVariant('pointer-coarse', ['@media (pointer: coarse)']) + staticVariant('pointer-fine', ['@media (pointer: fine)']) + staticVariant('any-pointer-none', ['@media (any-pointer: none)']) + staticVariant('any-pointer-coarse', ['@media (any-pointer: coarse)']) + staticVariant('any-pointer-fine', ['@media (any-pointer: fine)']) + } + if (enableScripting) { staticVariant('scripting-initial', ['@media (scripting: initial-only)']) staticVariant('scripting-none', ['@media (scripting: none)'])