From cb518f462390ad09980964d01a52f7e0c0ae09bc Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Tue, 26 Nov 2024 12:22:12 +0100 Subject: [PATCH] Set browser targets for iOS Safari, Firefox, and Chrome (#15166) Closes #15160 We need to set browser targets for each browser individually to see vendor prefixes created for each browser. Exact values are up for discussion, this first pass is taken from @adamwathan's comments in https://github.com/tailwindlabs/tailwindcss/issues/15160 --------- Co-authored-by: Adam Wathan --- CHANGELOG.md | 1 + .../src/commands/build/index.ts | 3 +++ packages/@tailwindcss-postcss/src/index.ts | 3 +++ packages/@tailwindcss-vite/src/index.ts | 3 +++ packages/tailwindcss/src/index.test.ts | 17 ++++++++++++ packages/tailwindcss/src/test-utils/run.ts | 3 +++ packages/tailwindcss/src/utilities.test.ts | 26 +++++++++---------- packages/tailwindcss/src/variants.test.ts | 16 ++++++++++-- 8 files changed, 57 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 262a627d4..349e4ddc2 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 ### Fixed +- Ensure any necessary vendor prefixes are generated for iOS Safari, Firefox, and Chrome ([#15166](https://github.com/tailwindlabs/tailwindcss/pull/15166)) - Ensure `.group` and `.peer` are prefixed when using the `prefix(…)` option ([#15174](https://github.com/tailwindlabs/tailwindcss/pull/15174)) - Ensure 3D transforms render correctly in Safari ([#15179](https://github.com/tailwindlabs/tailwindcss/pull/15179)) diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index 5c90d8ba3..b04c779dd 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -437,6 +437,9 @@ function optimizeCss( exclude: Features.LogicalProperties, targets: { safari: (16 << 16) | (4 << 8), + ios_saf: (16 << 16) | (4 << 8), + firefox: 128 << 16, + chrome: 120 << 16, }, errorRecovery: true, }).code diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index 531cb88af..73d3f55bf 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -241,6 +241,9 @@ function optimizeCss( exclude: Features.LogicalProperties, targets: { safari: (16 << 16) | (4 << 8), + ios_saf: (16 << 16) | (4 << 8), + firefox: 128 << 16, + chrome: 120 << 16, }, errorRecovery: true, }).code diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 1eaf1d0f6..2c08920bb 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -342,6 +342,9 @@ function optimizeCss( exclude: Features.LogicalProperties, targets: { safari: (16 << 16) | (4 << 8), + ios_saf: (16 << 16) | (4 << 8), + firefox: 128 << 16, + chrome: 120 << 16, }, errorRecovery: true, }).code diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index a45272fef..96ed5f7c6 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -151,6 +151,23 @@ describe('compiling CSS', () => { }" `) }) + + test('adds vendor prefixes', async () => { + expect( + await compileCss( + css` + @tailwind utilities; + `, + ['[text-size-adjust:none]'], + ), + ).toMatchInlineSnapshot(` + ".\\[text-size-adjust\\:none\\] { + -webkit-text-size-adjust: none; + -moz-text-size-adjust: none; + text-size-adjust: none; + }" + `) + }) }) describe('arbitrary properties', () => { diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts index af6dc72e0..0aa99e3e2 100644 --- a/packages/tailwindcss/src/test-utils/run.ts +++ b/packages/tailwindcss/src/test-utils/run.ts @@ -31,6 +31,9 @@ export function optimizeCss( exclude: Features.LogicalProperties, targets: { safari: (16 << 16) | (4 << 8), + ios_saf: (16 << 16) | (4 << 8), + firefox: 128 << 16, + chrome: 120 << 16, }, errorRecovery: true, }).code diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 9c22d51e1..4c0191c7e 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -11803,22 +11803,22 @@ test('box-decoration', async () => { test('bg-clip', async () => { expect(await run(['bg-clip-border', 'bg-clip-padding', 'bg-clip-content', 'bg-clip-text'])) .toMatchInlineSnapshot(` - ".bg-clip-border { - background-clip: border-box; - } + ".bg-clip-border { + background-clip: border-box; + } - .bg-clip-content { - background-clip: content-box; - } + .bg-clip-content { + background-clip: content-box; + } - .bg-clip-padding { - background-clip: padding-box; - } + .bg-clip-padding { + background-clip: padding-box; + } - .bg-clip-text { - background-clip: text; - }" - `) + .bg-clip-text { + background-clip: text; + }" + `) expect( await run([ 'bg-clip', diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index aa2c85795..5eaa374c2 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -62,7 +62,11 @@ test('marker', async () => { test('selection', async () => { expect(await run(['selection:flex'])).toMatchInlineSnapshot(` - ".selection\\:flex ::selection, .selection\\:flex::selection { + ".selection\\:flex ::selection { + display: flex; + } + + .selection\\:flex::selection { display: flex; }" `) @@ -2161,7 +2165,15 @@ test('variant order', async () => { } } - .first-letter\\:flex:first-letter, .first-line\\:flex:first-line, .marker\\:flex ::marker, .marker\\:flex::marker, .selection\\:flex ::selection, .selection\\:flex::selection { + .first-letter\\:flex:first-letter, .first-line\\:flex:first-line, .marker\\:flex ::marker, .marker\\:flex::marker { + display: flex; + } + + .selection\\:flex ::selection { + display: flex; + } + + .selection\\:flex::selection { display: flex; }