From b70f8fd0364ba1cc4ce7275546215fc64dd8bb93 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 18 Dec 2023 13:56:52 -0500 Subject: [PATCH 01/24] Add `svh`, `lvh`, and `dvh` values to default theme (#11317) * Add svh, lvh, and dvh values to default theme * Update changelog --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 4 ++- stubs/config.full.js | 12 +++++++++ tests/basic-usage.oxide.test.css | 45 ++++++++++++++++++++++++++++++++ tests/basic-usage.test.css | 45 ++++++++++++++++++++++++++++++++ tests/basic-usage.test.js | 5 ++-- 5 files changed, 108 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 31f65b985218..8afb2ce4fe8d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Added + +- Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317)) ## [3.3.7] - 2023-12-18 diff --git a/stubs/config.full.js b/stubs/config.full.js index 2dd01c6fd467..ed0b5a9860f0 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -517,6 +517,9 @@ module.exports = { '5/6': '83.333333%', full: '100%', screen: '100vh', + svh: '100svh', + lvh: '100lvh', + dvh: '100dvh', min: 'min-content', max: 'max-content', fit: 'fit-content', @@ -621,6 +624,9 @@ module.exports = { none: 'none', full: '100%', screen: '100vh', + svh: '100svh', + lvh: '100lvh', + dvh: '100dvh', min: 'min-content', max: 'max-content', fit: 'fit-content', @@ -650,6 +656,9 @@ module.exports = { 0: '0px', full: '100%', screen: '100vh', + svh: '100svh', + lvh: '100lvh', + dvh: '100dvh', min: 'min-content', max: 'max-content', fit: 'fit-content', @@ -967,6 +976,9 @@ module.exports = { '11/12': '91.666667%', full: '100%', screen: '100vw', + svw: '100svw', + lvw: '100lvw', + dvw: '100dvw', min: 'min-content', max: 'max-content', fit: 'fit-content', diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css index 6a01dc045efa..455e672ee7b4 100644 --- a/tests/basic-usage.oxide.test.css +++ b/tests/basic-usage.oxide.test.css @@ -201,15 +201,60 @@ .aspect-video { aspect-ratio: 16 / 9; } +.h-0 { + height: 0; +} .h-16 { height: 4rem; } +.h-dvh { + height: 100dvh; +} +.h-full { + height: 100%; +} +.h-lvh { + height: 100lvh; +} +.h-screen { + height: 100vh; +} +.h-svh { + height: 100svh; +} +.max-h-0 { + max-height: 0; +} +.max-h-dvh { + max-height: 100dvh; +} +.max-h-full { + max-height: 100%; +} +.max-h-lvh { + max-height: 100lvh; +} .max-h-screen { max-height: 100vh; } +.max-h-svh { + max-height: 100svh; +} .min-h-0 { min-height: 0; } +.min-h-dvh { + min-height: 100dvh; +} +.min-h-full { + min-height: 100%; +} +.min-h-lvh { + min-height: 100lvh; +} +.min-h-svh { + min-height: 100svh; +} .w-12 { width: 3rem; } diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 720c783e91ab..8d1ba2da8dd1 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -201,15 +201,60 @@ .aspect-video { aspect-ratio: 16 / 9; } +.h-0 { + height: 0; +} .h-16 { height: 4rem; } +.h-dvh { + height: 100dvh; +} +.h-full { + height: 100%; +} +.h-lvh { + height: 100lvh; +} +.h-screen { + height: 100vh; +} +.h-svh { + height: 100svh; +} +.max-h-0 { + max-height: 0; +} +.max-h-dvh { + max-height: 100dvh; +} +.max-h-full { + max-height: 100%; +} +.max-h-lvh { + max-height: 100lvh; +} .max-h-screen { max-height: 100vh; } +.max-h-svh { + max-height: 100svh; +} .min-h-0 { min-height: 0; } +.min-h-dvh { + min-height: 100dvh; +} +.min-h-full { + min-height: 100%; +} +.min-h-lvh { + min-height: 100lvh; +} +.min-h-svh { + min-height: 100svh; +} .w-12 { width: 3rem; } diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index 24bae0e68537..c8a560c3b05e 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -91,9 +91,10 @@ crosscheck(({ stable, oxide, engine }) => {
-
+ +
-
+
From d72c1893c81e1b6c1af38e8e80fa96f71c7b00e5 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 30 May 2023 12:21:08 -0400 Subject: [PATCH 02/24] Add `has-*` variants for `:has(...)` pseudo-class (#11318) * Add `has-*` variants for `:has(...)` pseudo-class * Update changelog * Fix mistake in test --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 1 + src/corePlugins.js | 20 +++++ src/lib/setupContextUtils.js | 1 + tests/arbitrary-variants.test.js | 126 +++++++++++++++++++++++++++++++ 4 files changed, 148 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8afb2ce4fe8d..89e2344c9283 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317)) +- Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318)) ## [3.3.7] - 2023-12-18 diff --git a/src/corePlugins.js b/src/corePlugins.js index 5db1fdb74e7b..b8bf04279fd7 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -392,6 +392,26 @@ export let variantPlugins = { ) }, + hasVariants: ({ matchVariant }) => { + matchVariant('has', (value) => `&:has(${normalize(value)})`, { values: {} }) + matchVariant( + 'group-has', + (value, { modifier }) => + modifier + ? `:merge(.group\\/${modifier}):has(${normalize(value)}) &` + : `:merge(.group):has(${normalize(value)}) &`, + { values: {} } + ) + matchVariant( + 'peer-has', + (value, { modifier }) => + modifier + ? `:merge(.peer\\/${modifier}):has(${normalize(value)}) ~ &` + : `:merge(.peer):has(${normalize(value)}) ~ &`, + { values: {} } + ) + }, + ariaVariants: ({ matchVariant, theme }) => { matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} }) matchVariant( diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index 59c261d698b3..4fc8468a4b83 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -758,6 +758,7 @@ function resolvePlugins(context, root) { let beforeVariants = [ variantPlugins['pseudoElementVariants'], variantPlugins['pseudoClassVariants'], + variantPlugins['hasVariants'], variantPlugins['ariaVariants'], variantPlugins['dataVariants'], ] diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index b210bdc77ecb..c4f8960dc638 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -845,6 +845,132 @@ crosscheck(({ stable, oxide }) => { }) }) + test('has-* variants with arbitrary values', () => { + let config = { + theme: {}, + content: [ + { + raw: html` +
+
+
+
+
+
+
+
+
+
+ `, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .has-\[\.foo\:hover\]\:block:has(.foo:hover) { + display: block; + } + .has-\[figcaption\]\:inline-block:has(figcaption) { + display: inline-block; + } + .has-\[\[data-active\]\]\:inline:has([data-active]) { + display: inline; + } + .has-\[\.foo\]\:flex:has(.foo) { + display: flex; + } + .has-\[\>_\.potato\]\:table:has(> .potato) { + display: table; + } + .has-\[\+_h2\]\:grid:has(+ h2) { + display: grid; + } + .has-\[\>_h1_\+_h2\]\:contents:has(> h1 + h2) { + display: contents; + } + .has-\[h2\]\:has-\[\.banana\]\:hidden:has(.banana):has(h2) { + display: none; + } + `) + }) + }) + + test('group-has-* variants with arbitrary values', () => { + let config = { + theme: {}, + content: [ + { + raw: html` +
+
+
+
+
+
+ `, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .group:has(> h1 + .foo) .group-has-\[\>_h1_\+_\.foo\]\:block { + display: block; + } + .group\/two:has(> h1 + .foo) .group-has-\[\>_h1_\+_\.foo\]\/two\:flex { + display: flex; + } + `) + }) + }) + + test('peer-has-* variants with arbitrary values', () => { + let config = { + theme: {}, + content: [ + { + raw: html` +
+
+
+
+
+
+
+
+ `, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .peer:has(> h1 + .foo) ~ .peer-has-\[\>_h1_\+_\.foo\]\:block { + display: block; + } + .peer\/two:has(> h1 + .foo) ~ .peer-has-\[\>_h1_\+_\.foo\]\/two\:flex { + display: flex; + } + `) + }) + }) + it('should be possible to use modifiers and arbitrary groups', () => { let config = { content: [ From 9caa9547b2e9bf4c766bbb8c44eeda7dd7ef8b7b Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 30 May 2023 15:26:27 -0400 Subject: [PATCH 03/24] Add support for `text-wrap` property (#11320) Update changelog Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 1 + src/corePlugins.js | 8 ++++++++ tests/basic-usage.oxide.test.css | 9 +++++++++ tests/basic-usage.test.css | 9 +++++++++ tests/basic-usage.test.js | 1 + 5 files changed, 28 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 89e2344c9283..5330caa92e26 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317)) - Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318)) +- Add `text-wrap` utilities including `text-balance` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320)) ## [3.3.7] - 2023-12-18 diff --git a/src/corePlugins.js b/src/corePlugins.js index b8bf04279fd7..c8ee027b0be6 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1529,6 +1529,14 @@ export let corePlugins = { }) }, + textWrap: ({ addUtilities }) => { + addUtilities({ + '.text-wrap': { 'text-wrap': 'wrap' }, + '.text-nowrap': { 'text-wrap': 'nowrap' }, + '.text-balance': { 'text-wrap': 'balance' }, + }) + }, + wordBreak: ({ addUtilities }) => { addUtilities({ '.break-normal': { 'overflow-wrap': 'normal', 'word-break': 'normal' }, diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css index 455e672ee7b4..6e2d6652d7c1 100644 --- a/tests/basic-usage.oxide.test.css +++ b/tests/basic-usage.oxide.test.css @@ -593,6 +593,15 @@ .whitespace-nowrap { white-space: nowrap; } +.text-wrap { + text-wrap: wrap; +} +.text-nowrap { + text-wrap: nowrap; +} +.text-balance { + text-wrap: balance; +} .break-words { overflow-wrap: break-word; } diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 8d1ba2da8dd1..80c406bf6bbd 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -597,6 +597,15 @@ .whitespace-nowrap { white-space: nowrap; } +.text-wrap { + text-wrap: wrap; +} +.text-nowrap { + text-wrap: nowrap; +} +.text-balance { + text-wrap: balance; +} .break-words { overflow-wrap: break-word; } diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index c8a560c3b05e..facc87ee25fa 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -193,6 +193,7 @@ crosscheck(({ stable, oxide, engine }) => {
+
From 0183a8442b542503a89425b64d75060043cecba8 Mon Sep 17 00:00:00 2001 From: Yuhei Yasuda Date: Tue, 19 Sep 2023 21:49:20 +0900 Subject: [PATCH 04/24] Add support for `text-wrap: pretty` (#12031) * Add support for `text-wrap: pretty` * Update changelog --------- Co-authored-by: Jonathan Reinink --- CHANGELOG.md | 2 +- src/corePlugins.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5330caa92e26..f44ff6bc2c76 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317)) - Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318)) -- Add `text-wrap` utilities including `text-balance` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320)) +- Add `text-wrap` utilities including `text-balance` and `text-pretty` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320), [#12031](https://github.com/tailwindlabs/tailwindcss/pull/12031)) ## [3.3.7] - 2023-12-18 diff --git a/src/corePlugins.js b/src/corePlugins.js index c8ee027b0be6..9cb62af58e80 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1534,6 +1534,7 @@ export let corePlugins = { '.text-wrap': { 'text-wrap': 'wrap' }, '.text-nowrap': { 'text-wrap': 'nowrap' }, '.text-balance': { 'text-wrap': 'balance' }, + '.text-pretty': { 'text-wrap': 'pretty' }, }) }, From 8201846565b69abcc2a32d3b93ffc42adcb0bceb Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 16 Aug 2023 11:44:14 -0400 Subject: [PATCH 05/24] Extend opacity scale to include all steps of 5 (#11832) * Extend opacity scale to include all steps of 5 * Update changelog --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 1 + stubs/config.full.js | 6 ++++++ tests/getClassList.test.js | 6 ++++++ 3 files changed, 13 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f44ff6bc2c76..de73ae825254 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317)) - Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318)) - Add `text-wrap` utilities including `text-balance` and `text-pretty` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320), [#12031](https://github.com/tailwindlabs/tailwindcss/pull/12031)) +- Extend default `opacity` scale to include all steps of 5 ([#11832](https://github.com/tailwindlabs/tailwindcss/pull/11832)) ## [3.3.7] - 2023-12-18 diff --git a/stubs/config.full.js b/stubs/config.full.js index ed0b5a9860f0..11d1d0bd7a66 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -685,15 +685,21 @@ module.exports = { 0: '0', 5: '0.05', 10: '0.1', + 15: '0.15', 20: '0.2', 25: '0.25', 30: '0.3', + 35: '0.35', 40: '0.4', + 45: '0.45', 50: '0.5', + 55: '0.55', 60: '0.6', + 65: '0.65', 70: '0.7', 75: '0.75', 80: '0.8', + 85: '0.85', 90: '0.9', 95: '0.95', 100: '1', diff --git a/tests/getClassList.test.js b/tests/getClassList.test.js index 671a767ecfe5..65ca7a074b26 100644 --- a/tests/getClassList.test.js +++ b/tests/getClassList.test.js @@ -97,15 +97,21 @@ crosscheck(() => { '0', '5', '10', + '15', '20', '25', '30', + '35', '40', + '45', '50', + '55', '60', + '65', '70', '75', '80', + '85', '90', '95', '100', From 9a26814b8db902f608810daa93a2b21481c7e11c Mon Sep 17 00:00:00 2001 From: Brandon McConnell Date: Fri, 8 Sep 2023 08:46:57 -0700 Subject: [PATCH 06/24] Update Preflight `html` styles to include shadow DOM `:host` pseudo-class (#11200) * Extend current preflight `html` styles to support other root/host scopes Supports SVG root scope, ShadowDOM, and presumably other root scopes * Replace `:root` with `html` * Update tests * Update changelog --------- Co-authored-by: Jonathan Reinink --- CHANGELOG.md | 1 + src/css/preflight.css | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index de73ae825254..dbc8de168eac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318)) - Add `text-wrap` utilities including `text-balance` and `text-pretty` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320), [#12031](https://github.com/tailwindlabs/tailwindcss/pull/12031)) - Extend default `opacity` scale to include all steps of 5 ([#11832](https://github.com/tailwindlabs/tailwindcss/pull/11832)) +- Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200)) ## [3.3.7] - 2023-12-18 diff --git a/src/css/preflight.css b/src/css/preflight.css index 8783e9b935ea..a3fcfc249a01 100644 --- a/src/css/preflight.css +++ b/src/css/preflight.css @@ -26,7 +26,8 @@ 6. Use the user's configured `sans` font-variation-settings by default. */ -html { +html, +:host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ From 089fa971ff025f16ff928608d977337c38173d92 Mon Sep 17 00:00:00 2001 From: bandogora <26842354+bandogora@users.noreply.github.com> Date: Wed, 11 Oct 2023 21:00:22 -0400 Subject: [PATCH 07/24] Equal number of grid columns and rows (#12180) Update test snapshots --- stubs/config.full.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/stubs/config.full.js b/stubs/config.full.js index 11d1d0bd7a66..a4931114f2a7 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -451,6 +451,12 @@ module.exports = { 'span-4': 'span 4 / span 4', 'span-5': 'span 5 / span 5', 'span-6': 'span 6 / span 6', + 'span-7': 'span 7 / span 7', + 'span-8': 'span 8 / span 8', + 'span-9': 'span 9 / span 9', + 'span-10': 'span 10 / span 10', + 'span-11': 'span 11 / span 11', + 'span-12': 'span 12 / span 12', 'span-full': '1 / -1', }, gridRowEnd: { @@ -462,6 +468,12 @@ module.exports = { 5: '5', 6: '6', 7: '7', + 8: '8', + 9: '9', + 10: '10', + 11: '11', + 12: '12', + 13: '13', }, gridRowStart: { auto: 'auto', @@ -472,6 +484,12 @@ module.exports = { 5: '5', 6: '6', 7: '7', + 8: '8', + 9: '9', + 10: '10', + 11: '11', + 12: '12', + 13: '13', }, gridTemplateColumns: { none: 'none', @@ -496,6 +514,12 @@ module.exports = { 4: 'repeat(4, minmax(0, 1fr))', 5: 'repeat(5, minmax(0, 1fr))', 6: 'repeat(6, minmax(0, 1fr))', + 7: 'repeat(7, minmax(0, 1fr))', + 8: 'repeat(8, minmax(0, 1fr))', + 9: 'repeat(9, minmax(0, 1fr))', + 10: 'repeat(10, minmax(0, 1fr))', + 11: 'repeat(11, minmax(0, 1fr))', + 12: 'repeat(12, minmax(0, 1fr))', }, height: ({ theme }) => ({ auto: 'auto', From 074f5deb891006fff310b62042c0badbc9a58d80 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Wed, 11 Oct 2023 21:01:50 -0400 Subject: [PATCH 08/24] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index dbc8de168eac..79f3a8f93128 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `text-wrap` utilities including `text-balance` and `text-pretty` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320), [#12031](https://github.com/tailwindlabs/tailwindcss/pull/12031)) - Extend default `opacity` scale to include all steps of 5 ([#11832](https://github.com/tailwindlabs/tailwindcss/pull/11832)) - Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200)) +- Increase default values for `grid-rows-*` utilities from 1–6 to 1–12 ([#12180](https://github.com/tailwindlabs/tailwindcss/pull/12180)) ## [3.3.7] - 2023-12-18 From 4a2aa1ccb1b60cf283c4fcc01bcd6f915526e4b5 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 4 Dec 2023 15:13:57 -0500 Subject: [PATCH 09/24] Add `size-*` shorthand (#12287) * Add `size-*` shorthand Add plugin tests Adjust options wip * Update changelog --- CHANGELOG.md | 1 + src/corePlugins.js | 2 ++ stubs/config.full.js | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 37 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 79f3a8f93128..4a35a4bffe77 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Extend default `opacity` scale to include all steps of 5 ([#11832](https://github.com/tailwindlabs/tailwindcss/pull/11832)) - Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200)) - Increase default values for `grid-rows-*` utilities from 1–6 to 1–12 ([#12180](https://github.com/tailwindlabs/tailwindcss/pull/12180)) +- Add `size-*` utilities ([#12287](https://github.com/tailwindlabs/tailwindcss/pull/12287)) ## [3.3.7] - 2023-12-18 diff --git a/src/corePlugins.js b/src/corePlugins.js index 9cb62af58e80..8f296bb0f443 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -779,6 +779,8 @@ export let corePlugins = { aspectRatio: createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]]), + size: createUtilityPlugin('size', [['size', ['width', 'height']]]), + height: createUtilityPlugin('height', [['h', ['height']]]), maxHeight: createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]]), minHeight: createUtilityPlugin('minHeight', [['min-h', ['minHeight']]]), diff --git a/stubs/config.full.js b/stubs/config.full.js index a4931114f2a7..2e78294abd71 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -975,6 +975,40 @@ module.exports = { '3/4': '75%', full: '100%', }), + size: ({ theme }) => ({ + auto: 'auto', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', + full: '100%', + min: 'min-content', + max: 'max-content', + fit: 'fit-content', + }), width: ({ theme }) => ({ auto: 'auto', ...theme('spacing'), From 324953c093086931f30d8fd426f36e70d81ff715 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 26 Oct 2023 12:52:39 -0400 Subject: [PATCH 10/24] Add subgrid utilities (#12298) * Add subgrid utilities * Update CHANGELOG --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 1 + stubs/config.full.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a35a4bffe77..2c6a5a39ab84 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200)) - Increase default values for `grid-rows-*` utilities from 1–6 to 1–12 ([#12180](https://github.com/tailwindlabs/tailwindcss/pull/12180)) - Add `size-*` utilities ([#12287](https://github.com/tailwindlabs/tailwindcss/pull/12287)) +- Add utilities for CSS subgrid ([#12298](https://github.com/tailwindlabs/tailwindcss/pull/12298)) ## [3.3.7] - 2023-12-18 diff --git a/stubs/config.full.js b/stubs/config.full.js index 2e78294abd71..dc864644c4ad 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -493,6 +493,7 @@ module.exports = { }, gridTemplateColumns: { none: 'none', + subgrid: 'subgrid', 1: 'repeat(1, minmax(0, 1fr))', 2: 'repeat(2, minmax(0, 1fr))', 3: 'repeat(3, minmax(0, 1fr))', @@ -508,6 +509,7 @@ module.exports = { }, gridTemplateRows: { none: 'none', + subgrid: 'subgrid', 1: 'repeat(1, minmax(0, 1fr))', 2: 'repeat(2, minmax(0, 1fr))', 3: 'repeat(3, minmax(0, 1fr))', From b3d39b185f313f2f2a375ead55ba5dea34284b4f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 26 Oct 2023 14:14:43 -0400 Subject: [PATCH 11/24] Add spacing scale to `min-width`, `min-height`, and `max-width` (#12300) * Add spacing scale to `min-width`, `min-height`, and `max-width` * Update snapshots * Update changelog --- CHANGELOG.md | 1 + stubs/config.full.js | 14 +++++++------- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c6a5a39ab84..4f5e6c40d997 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Increase default values for `grid-rows-*` utilities from 1–6 to 1–12 ([#12180](https://github.com/tailwindlabs/tailwindcss/pull/12180)) - Add `size-*` utilities ([#12287](https://github.com/tailwindlabs/tailwindcss/pull/12287)) - Add utilities for CSS subgrid ([#12298](https://github.com/tailwindlabs/tailwindcss/pull/12298)) +- Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300)) ## [3.3.7] - 2023-12-18 diff --git a/stubs/config.full.js b/stubs/config.full.js index dc864644c4ad..e1578c6e7171 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -658,8 +658,8 @@ module.exports = { fit: 'fit-content', }), maxWidth: ({ theme, breakpoints }) => ({ + ...theme('spacing'), none: 'none', - 0: '0rem', xs: '20rem', sm: '24rem', md: '28rem', @@ -678,8 +678,8 @@ module.exports = { prose: '65ch', ...breakpoints(theme('screens')), }), - minHeight: { - 0: '0px', + minHeight: ({ theme }) => ({ + ...theme('spacing'), full: '100%', screen: '100vh', svh: '100svh', @@ -688,14 +688,14 @@ module.exports = { min: 'min-content', max: 'max-content', fit: 'fit-content', - }, - minWidth: { - 0: '0px', + }), + minWidth: ({ theme }) => ({ + ...theme('spacing'), full: '100%', min: 'min-content', max: 'max-content', fit: 'fit-content', - }, + }), objectPosition: { bottom: 'bottom', center: 'center', From a35e7fc19973787d8326acf5acc6426d8c79dc45 Mon Sep 17 00:00:00 2001 From: Luke Warlow Date: Thu, 2 Nov 2023 16:48:11 +0000 Subject: [PATCH 12/24] Add `forced-color-adjust` utilities (#11931) * Add forced-colors-adjust utilities * Update forcedColorsAdjust.test.js * use `toMatchSnapshot` instead of `toMatchFormattedCss` More info: https://github.com/tailwindlabs/tailwindcss/pull/12170 * rename `forced-colors-adjust` -> `forced-color-adjust` Dropped the `s` in `colors`. * update changelog * fix typo * use full `forced-color-adjust-auto` and `forced-color-adjust-none` names --------- Co-authored-by: Robin Malfait --- CHANGELOG.md | 1 + src/corePlugins.js | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f5e6c40d997..e77ef13f7230 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `size-*` utilities ([#12287](https://github.com/tailwindlabs/tailwindcss/pull/12287)) - Add utilities for CSS subgrid ([#12298](https://github.com/tailwindlabs/tailwindcss/pull/12298)) - Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300)) +- Add `forced-color-adjust` utilities ([#11931](https://github.com/tailwindlabs/tailwindcss/pull/11931)) ## [3.3.7] - 2023-12-18 diff --git a/src/corePlugins.js b/src/corePlugins.js index 8f296bb0f443..7f4aa6a9c7fe 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -2883,4 +2883,10 @@ export let corePlugins = { content: createUtilityPlugin('content', [ ['content', ['--tw-content', ['content', 'var(--tw-content)']]], ]), + forcedColorAdjust: ({ addUtilities }) => { + addUtilities({ + '.forced-color-adjust-auto': { 'forced-color-adjust': 'auto' }, + '.forced-color-adjust-none': { 'forced-color-adjust': 'none' }, + }) + }, } From add51c658cce597fa0a5404b25a3f52dbdcefc45 Mon Sep 17 00:00:00 2001 From: Luke Warlow Date: Thu, 2 Nov 2023 19:28:50 +0000 Subject: [PATCH 13/24] Add `forced-colors` variant (#11694) * Add forced-colors variant Also add a contrast-custom variant to match custom contrast preferences * use `toMatchSnapshot` instead of `toMatchFormattedCss` More info: https://github.com/tailwindlabs/tailwindcss/pull/12170 * remove `contrast-custom` variant * move `forcedColorsVariants` next to `prefersContrastVariants` * update changelog --------- Co-authored-by: Robin Malfait --- CHANGELOG.md | 1 + src/corePlugins.js | 4 ++++ src/lib/setupContextUtils.js | 1 + 3 files changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e77ef13f7230..5c6810c28762 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add utilities for CSS subgrid ([#12298](https://github.com/tailwindlabs/tailwindcss/pull/12298)) - Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300)) - Add `forced-color-adjust` utilities ([#11931](https://github.com/tailwindlabs/tailwindcss/pull/11931)) +- Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694)) ## [3.3.7] - 2023-12-18 diff --git a/src/corePlugins.js b/src/corePlugins.js index 7f4aa6a9c7fe..9e7eb9b70e15 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -461,6 +461,10 @@ export let variantPlugins = { addVariant('contrast-more', '@media (prefers-contrast: more)') addVariant('contrast-less', '@media (prefers-contrast: less)') }, + + forcedColorsVariants: ({ addVariant }) => { + addVariant('forced-colors', '@media (forced-colors: active)') + }, } let cssTransformValue = [ diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index 4fc8468a4b83..28991dc838c8 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -767,6 +767,7 @@ function resolvePlugins(context, root) { variantPlugins['directionVariants'], variantPlugins['reducedMotionVariants'], variantPlugins['prefersContrastVariants'], + variantPlugins['forcedColorsVariants'], variantPlugins['darkVariants'], variantPlugins['printVariant'], variantPlugins['screenVariants'], From adfcccf57a764f048e0a5977a32104e7638294bd Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 12 Nov 2023 11:22:35 -0500 Subject: [PATCH 14/24] Add `appearance-auto` utility (#12404) * Add `appearance-auto` utility * Update CHANGELOG --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 1 + src/corePlugins.js | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c6810c28762..d8e98f4a3ce7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300)) - Add `forced-color-adjust` utilities ([#11931](https://github.com/tailwindlabs/tailwindcss/pull/11931)) - Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694)) +- Add `appearance-none` utility ([#12404](https://github.com/tailwindlabs/tailwindcss/pull/12404)) ## [3.3.7] - 2023-12-18 diff --git a/src/corePlugins.js b/src/corePlugins.js index 9e7eb9b70e15..a54c709c8eda 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1135,6 +1135,7 @@ export let corePlugins = { appearance: ({ addUtilities }) => { addUtilities({ '.appearance-none': { appearance: 'none' }, + '.appearance-auto': { appearance: 'auto' }, }) }, From 4ef97179cd2ac89941d33df27f45a9ebf58e27db Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 17 Nov 2023 12:12:24 -0500 Subject: [PATCH 15/24] Fix typo in changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d8e98f4a3ce7..959cf411b68a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,7 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300)) - Add `forced-color-adjust` utilities ([#11931](https://github.com/tailwindlabs/tailwindcss/pull/11931)) - Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694)) -- Add `appearance-none` utility ([#12404](https://github.com/tailwindlabs/tailwindcss/pull/12404)) +- Add `appearance-auto` utility ([#12404](https://github.com/tailwindlabs/tailwindcss/pull/12404)) ## [3.3.7] - 2023-12-18 From 9129defd0db0b052e3e36f7a4ecdb2d4f5787476 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ng=C3=B4=20Qu=E1=BB=91c=20=C4=90=E1=BA=A1t?= Date: Mon, 27 Nov 2023 21:12:58 +0700 Subject: [PATCH 16/24] Add logical properties support for float and clear (#12480) --- src/corePlugins.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/corePlugins.js b/src/corePlugins.js index a54c709c8eda..76443f5544cc 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -690,6 +690,8 @@ export let corePlugins = { float: ({ addUtilities }) => { addUtilities({ + '.float-start': { float: 'inline-start' }, + '.float-end': { float: 'inline-end' }, '.float-right': { float: 'right' }, '.float-left': { float: 'left' }, '.float-none': { float: 'none' }, @@ -698,6 +700,8 @@ export let corePlugins = { clear: ({ addUtilities }) => { addUtilities({ + '.clear-start': { clear: 'inline-start' }, + '.clear-end': { clear: 'inline-end' }, '.clear-left': { clear: 'left' }, '.clear-right': { clear: 'right' }, '.clear-both': { clear: 'both' }, From b215f13276ad3ed4e1fd37de8b234ff4d5777fc6 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Mon, 27 Nov 2023 09:13:56 -0500 Subject: [PATCH 17/24] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 959cf411b68a..5289cbac4a19 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `forced-color-adjust` utilities ([#11931](https://github.com/tailwindlabs/tailwindcss/pull/11931)) - Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694)) - Add `appearance-auto` utility ([#12404](https://github.com/tailwindlabs/tailwindcss/pull/12404)) +- Add logical property values for `float` and `clear` utilities ([#12480](https://github.com/tailwindlabs/tailwindcss/pull/12480)) ## [3.3.7] - 2023-12-18 From 06972065defd552e4b4e8d52fcdbf5319e19ccd0 Mon Sep 17 00:00:00 2001 From: Emilia Date: Tue, 8 Aug 2023 06:26:30 -0400 Subject: [PATCH 18/24] feat(preflight): simplify sans-serif font stack (#11748) * feat(preflight): simplify sans-serif font stack `-apple-system` and `BlinkMacSystemFont` were historically needed for IE11 and chakra-based Edge (The one that wasn't chromium-based). https://caniuse.com/font-family-system-ui has more details around it. * further simplify `font-family` * update tests * update changelog --------- Co-authored-by: Robin Malfait --- CHANGELOG.md | 4 + src/css/preflight.css | 2 +- stubs/config.full.js | 7 - tests/basic-usage.oxide.test.css | 5 +- tests/basic-usage.test.css | 5 +- tests/kitchen-sink.test.js | 6 +- tests/raw-content.oxide.test.css | 5 +- tests/raw-content.test.css | 5 +- tests/resolveConfig.test.js | 4 +- tests/source-maps.test.js | 574 +++++++++++++++---------------- 10 files changed, 304 insertions(+), 313 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5289cbac4a19..24e60c775273 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `appearance-auto` utility ([#12404](https://github.com/tailwindlabs/tailwindcss/pull/12404)) - Add logical property values for `float` and `clear` utilities ([#12480](https://github.com/tailwindlabs/tailwindcss/pull/12480)) +### Changed + +- Simplify the `sans` font-family stack ([#11748](https://github.com/tailwindlabs/tailwindcss/pull/11748)) + ## [3.3.7] - 2023-12-18 ### Fixed diff --git a/src/css/preflight.css b/src/css/preflight.css index a3fcfc249a01..42d2c65cffbe 100644 --- a/src/css/preflight.css +++ b/src/css/preflight.css @@ -32,7 +32,7 @@ html, -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ tab-size: 4; /* 3 */ - font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */ + font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */ font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */ font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */ } diff --git a/stubs/config.full.js b/stubs/config.full.js index e1578c6e7171..8eddd48984ba 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -303,13 +303,6 @@ module.exports = { sans: [ 'ui-sans-serif', 'system-ui', - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css index 6e2d6652d7c1..2c102b7a35e5 100644 --- a/tests/basic-usage.oxide.test.css +++ b/tests/basic-usage.oxide.test.css @@ -767,9 +767,8 @@ vertical-align: middle; } .font-sans { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, - Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, - Noto Color Emoji; + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } .text-2xl { font-size: 1.5rem; diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 80c406bf6bbd..17600764a711 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -785,9 +785,8 @@ vertical-align: middle; } .font-sans { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, - Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, - Noto Color Emoji; + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } .text-2xl { font-size: 1.5rem; diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index 3b02c8966014..5923de27eb98 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -240,8 +240,7 @@ crosscheck(({ stable, oxide }) => { stable.expect(result.css).toMatchFormattedCss(css` .theme-test { color: #3b82f6; - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, - Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; } @media (min-width: 1024px) { @@ -813,8 +812,7 @@ crosscheck(({ stable, oxide }) => { oxide.expect(result.css).toMatchFormattedCss(css` .theme-test { color: #3b82f6; - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, - Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; } @media (min-width: 1024px) { diff --git a/tests/raw-content.oxide.test.css b/tests/raw-content.oxide.test.css index aa5abd127083..3408975df9d4 100644 --- a/tests/raw-content.oxide.test.css +++ b/tests/raw-content.oxide.test.css @@ -512,9 +512,8 @@ vertical-align: middle; } .font-sans { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, - Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, - Noto Color Emoji; + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } .text-2xl { font-size: 1.5rem; diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index dba9f3194292..a6be31fd0aec 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -524,9 +524,8 @@ vertical-align: middle; } .font-sans { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, - Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, - Noto Color Emoji; + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } .text-2xl { font-size: 1.5rem; diff --git a/tests/resolveConfig.test.js b/tests/resolveConfig.test.js index c99a986defa0..69a62bba5529 100644 --- a/tests/resolveConfig.test.js +++ b/tests/resolveConfig.test.js @@ -150,7 +150,7 @@ crosscheck(() => { 'grey-lighter': '#f1f5f8', }, fonts: { - sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'], + sans: ['system-ui', 'Roboto', 'sans-serif'], serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'], }, screens: { @@ -176,7 +176,7 @@ crosscheck(() => { 'grey-lighter': '#f1f5f8', }, fonts: { - sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'], + sans: ['system-ui', 'Roboto', 'sans-serif'], serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'], }, screens: { diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js index 75bfd84fc7b7..e783137a6335 100644 --- a/tests/source-maps.test.js +++ b/tests/source-maps.test.js @@ -100,307 +100,307 @@ crosscheck(({ stable, oxide }) => { '2:6 -> 22:0', '2:20 -> 29:1', '2:6 -> 31:0', - '2:6-20 -> 32:2-26', - '2:6-20 -> 33:2-40', - '2:6-20 -> 34:2-26', - '2:6-20 -> 35:2-21', - '2:6-20 -> 36:2-230', - '2:6-20 -> 37:2-39', - '2:6-20 -> 38:2-41', - '2:20 -> 39:0', - '2:6 -> 41:0', - '2:20 -> 44:1', - '2:6 -> 46:0', - '2:6-20 -> 47:2-19', - '2:6-20 -> 48:2-30', - '2:20 -> 49:0', - '2:6 -> 51:0', - '2:20 -> 55:1', - '2:6 -> 57:0', - '2:6-20 -> 58:2-19', - '2:6-20 -> 59:2-24', - '2:6-20 -> 60:2-31', - '2:20 -> 61:0', - '2:6 -> 63:0', - '2:20 -> 65:1', - '2:6 -> 67:0', - '2:6-20 -> 68:2-35', - '2:20 -> 69:0', - '2:6 -> 71:0', - '2:20 -> 73:1', - '2:6 -> 75:0', - '2:6-20 -> 81:2-20', - '2:6-20 -> 82:2-22', - '2:20 -> 83:0', - '2:6 -> 85:0', - '2:20 -> 87:1', - '2:6 -> 89:0', - '2:6-20 -> 90:2-16', - '2:6-20 -> 91:2-26', - '2:20 -> 92:0', - '2:6 -> 94:0', - '2:20 -> 96:1', - '2:6 -> 98:0', - '2:6-20 -> 100:2-21', - '2:20 -> 101:0', - '2:6 -> 103:0', - '2:20 -> 108:1', - '2:6 -> 110:0', - '2:6-20 -> 114:2-121', - '2:6-20 -> 115:2-39', - '2:6-20 -> 116:2-41', - '2:6-20 -> 117:2-24', - '2:20 -> 118:0', - '2:6 -> 120:0', - '2:20 -> 122:1', - '2:6 -> 124:0', - '2:6-20 -> 125:2-16', - '2:20 -> 126:0', - '2:6 -> 128:0', - '2:20 -> 130:1', - '2:6 -> 132:0', - '2:6-20 -> 134:2-16', + '2:6-20 -> 33:2-26', + '2:6-20 -> 34:2-40', + '2:6-20 -> 35:2-26', + '2:6-20 -> 36:2-21', + '2:6-20 -> 37:2-137', + '2:6-20 -> 38:2-39', + '2:6-20 -> 39:2-41', + '2:20 -> 40:0', + '2:6 -> 42:0', + '2:20 -> 45:1', + '2:6 -> 47:0', + '2:6-20 -> 48:2-19', + '2:6-20 -> 49:2-30', + '2:20 -> 50:0', + '2:6 -> 52:0', + '2:20 -> 56:1', + '2:6 -> 58:0', + '2:6-20 -> 59:2-19', + '2:6-20 -> 60:2-24', + '2:6-20 -> 61:2-31', + '2:20 -> 62:0', + '2:6 -> 64:0', + '2:20 -> 66:1', + '2:6 -> 68:0', + '2:6-20 -> 69:2-35', + '2:20 -> 70:0', + '2:6 -> 72:0', + '2:20 -> 74:1', + '2:6 -> 76:0', + '2:6-20 -> 82:2-20', + '2:6-20 -> 83:2-22', + '2:20 -> 84:0', + '2:6 -> 86:0', + '2:20 -> 88:1', + '2:6 -> 90:0', + '2:6-20 -> 91:2-16', + '2:6-20 -> 92:2-26', + '2:20 -> 93:0', + '2:6 -> 95:0', + '2:20 -> 97:1', + '2:6 -> 99:0', + '2:6-20 -> 101:2-21', + '2:20 -> 102:0', + '2:6 -> 104:0', + '2:20 -> 109:1', + '2:6 -> 111:0', + '2:6-20 -> 115:2-121', + '2:6-20 -> 116:2-39', + '2:6-20 -> 117:2-41', + '2:6-20 -> 118:2-24', + '2:20 -> 119:0', + '2:6 -> 121:0', + '2:20 -> 123:1', + '2:6 -> 125:0', + '2:6-20 -> 126:2-16', + '2:20 -> 127:0', + '2:6 -> 129:0', + '2:20 -> 131:1', + '2:6 -> 133:0', '2:6-20 -> 135:2-16', - '2:6-20 -> 136:2-20', - '2:6-20 -> 137:2-26', - '2:20 -> 138:0', - '2:6 -> 140:0', - '2:6-20 -> 141:2-17', - '2:20 -> 142:0', - '2:6 -> 144:0', - '2:6-20 -> 145:2-13', - '2:20 -> 146:0', - '2:6 -> 148:0', - '2:20 -> 152:1', - '2:6 -> 154:0', - '2:6-20 -> 155:2-24', - '2:6-20 -> 156:2-31', - '2:6-20 -> 157:2-35', - '2:20 -> 158:0', - '2:6 -> 160:0', - '2:20 -> 164:1', - '2:6 -> 166:0', - '2:6-20 -> 171:2-30', - '2:6-20 -> 172:2-40', - '2:6-20 -> 173:2-42', - '2:6-20 -> 174:2-25', - '2:6-20 -> 175:2-30', + '2:6-20 -> 136:2-16', + '2:6-20 -> 137:2-20', + '2:6-20 -> 138:2-26', + '2:20 -> 139:0', + '2:6 -> 141:0', + '2:6-20 -> 142:2-17', + '2:20 -> 143:0', + '2:6 -> 145:0', + '2:6-20 -> 146:2-13', + '2:20 -> 147:0', + '2:6 -> 149:0', + '2:20 -> 153:1', + '2:6 -> 155:0', + '2:6-20 -> 156:2-24', + '2:6-20 -> 157:2-31', + '2:6-20 -> 158:2-35', + '2:20 -> 159:0', + '2:6 -> 161:0', + '2:20 -> 165:1', + '2:6 -> 167:0', + '2:6-20 -> 172:2-30', + '2:6-20 -> 173:2-40', + '2:6-20 -> 174:2-42', + '2:6-20 -> 175:2-25', '2:6-20 -> 176:2-30', - '2:6-20 -> 177:2-24', - '2:6-20 -> 178:2-19', - '2:6-20 -> 179:2-20', - '2:20 -> 180:0', - '2:6 -> 182:0', - '2:20 -> 184:1', - '2:6 -> 186:0', - '2:6-20 -> 188:2-22', - '2:20 -> 189:0', - '2:6 -> 191:0', - '2:20 -> 194:1', - '2:6 -> 196:0', - '2:6-20 -> 200:2-36', - '2:6-20 -> 201:2-39', - '2:6-20 -> 202:2-32', - '2:20 -> 203:0', - '2:6 -> 205:0', - '2:20 -> 207:1', - '2:6 -> 209:0', - '2:6-20 -> 210:2-15', - '2:20 -> 211:0', - '2:6 -> 213:0', - '2:20 -> 215:1', - '2:6 -> 217:0', - '2:6-20 -> 218:2-18', - '2:20 -> 219:0', - '2:6 -> 221:0', - '2:20 -> 223:1', - '2:6 -> 225:0', - '2:6-20 -> 226:2-26', - '2:20 -> 227:0', - '2:6 -> 229:0', - '2:20 -> 231:1', - '2:6 -> 233:0', - '2:6-20 -> 235:2-14', - '2:20 -> 236:0', - '2:6 -> 238:0', - '2:20 -> 241:1', - '2:6 -> 243:0', - '2:6-20 -> 244:2-39', - '2:6-20 -> 245:2-30', - '2:20 -> 246:0', - '2:6 -> 248:0', - '2:20 -> 250:1', - '2:6 -> 252:0', - '2:6-20 -> 253:2-26', - '2:20 -> 254:0', - '2:6 -> 256:0', - '2:20 -> 259:1', - '2:6 -> 261:0', - '2:6-20 -> 262:2-36', - '2:6-20 -> 263:2-23', - '2:20 -> 264:0', - '2:6 -> 266:0', - '2:20 -> 268:1', - '2:6 -> 270:0', - '2:6-20 -> 271:2-20', - '2:20 -> 272:0', - '2:6 -> 274:0', - '2:20 -> 276:1', - '2:6 -> 278:0', - '2:6-20 -> 291:2-11', - '2:20 -> 292:0', - '2:6 -> 294:0', - '2:6-20 -> 295:2-11', - '2:6-20 -> 296:2-12', - '2:20 -> 297:0', - '2:6 -> 299:0', - '2:6-20 -> 300:2-12', - '2:20 -> 301:0', - '2:6 -> 303:0', - '2:6-20 -> 306:2-18', - '2:6-20 -> 307:2-11', - '2:6-20 -> 308:2-12', - '2:20 -> 309:0', - '2:6 -> 311:0', - '2:20 -> 313:1', - '2:6 -> 314:0', - '2:6-20 -> 315:2-12', - '2:20 -> 316:0', - '2:6 -> 318:0', - '2:20 -> 320:1', - '2:6 -> 322:0', - '2:6-20 -> 323:2-18', - '2:20 -> 324:0', - '2:6 -> 326:0', - '2:20 -> 329:1', - '2:6 -> 331:0', - '2:6-20 -> 333:2-20', - '2:6-20 -> 334:2-24', - '2:20 -> 335:0', - '2:6 -> 337:0', - '2:20 -> 339:1', - '2:6 -> 341:0', - '2:6-20 -> 343:2-17', - '2:20 -> 344:0', - '2:6 -> 346:0', - '2:20 -> 348:1', - '2:6 -> 349:0', - '2:6-20 -> 350:2-17', - '2:20 -> 351:0', - '2:6 -> 353:0', - '2:20 -> 357:1', - '2:6 -> 359:0', - '2:6-20 -> 367:2-24', - '2:6-20 -> 368:2-32', - '2:20 -> 369:0', - '2:6 -> 371:0', - '2:20 -> 373:1', - '2:6 -> 375:0', - '2:6-20 -> 377:2-17', - '2:6-20 -> 378:2-14', - '2:20 -> 379:0', - '2:6-20 -> 381:0-72', - '2:6 -> 382:0', - '2:6-20 -> 383:2-15', - '2:20 -> 384:0', - '2:6 -> 386:0', - '2:6-20 -> 387:2-26', + '2:6-20 -> 177:2-30', + '2:6-20 -> 178:2-24', + '2:6-20 -> 179:2-19', + '2:6-20 -> 180:2-20', + '2:20 -> 181:0', + '2:6 -> 183:0', + '2:20 -> 185:1', + '2:6 -> 187:0', + '2:6-20 -> 189:2-22', + '2:20 -> 190:0', + '2:6 -> 192:0', + '2:20 -> 195:1', + '2:6 -> 197:0', + '2:6-20 -> 201:2-36', + '2:6-20 -> 202:2-39', + '2:6-20 -> 203:2-32', + '2:20 -> 204:0', + '2:6 -> 206:0', + '2:20 -> 208:1', + '2:6 -> 210:0', + '2:6-20 -> 211:2-15', + '2:20 -> 212:0', + '2:6 -> 214:0', + '2:20 -> 216:1', + '2:6 -> 218:0', + '2:6-20 -> 219:2-18', + '2:20 -> 220:0', + '2:6 -> 222:0', + '2:20 -> 224:1', + '2:6 -> 226:0', + '2:6-20 -> 227:2-26', + '2:20 -> 228:0', + '2:6 -> 230:0', + '2:20 -> 232:1', + '2:6 -> 234:0', + '2:6-20 -> 236:2-14', + '2:20 -> 237:0', + '2:6 -> 239:0', + '2:20 -> 242:1', + '2:6 -> 244:0', + '2:6-20 -> 245:2-39', + '2:6-20 -> 246:2-30', + '2:20 -> 247:0', + '2:6 -> 249:0', + '2:20 -> 251:1', + '2:6 -> 253:0', + '2:6-20 -> 254:2-26', + '2:20 -> 255:0', + '2:6 -> 257:0', + '2:20 -> 260:1', + '2:6 -> 262:0', + '2:6-20 -> 263:2-36', + '2:6-20 -> 264:2-23', + '2:20 -> 265:0', + '2:6 -> 267:0', + '2:20 -> 269:1', + '2:6 -> 271:0', + '2:6-20 -> 272:2-20', + '2:20 -> 273:0', + '2:6 -> 275:0', + '2:20 -> 277:1', + '2:6 -> 279:0', + '2:6-20 -> 292:2-11', + '2:20 -> 293:0', + '2:6 -> 295:0', + '2:6-20 -> 296:2-11', + '2:6-20 -> 297:2-12', + '2:20 -> 298:0', + '2:6 -> 300:0', + '2:6-20 -> 301:2-12', + '2:20 -> 302:0', + '2:6 -> 304:0', + '2:6-20 -> 307:2-18', + '2:6-20 -> 308:2-11', + '2:6-20 -> 309:2-12', + '2:20 -> 310:0', + '2:6 -> 312:0', + '2:20 -> 314:1', + '2:6 -> 315:0', + '2:6-20 -> 316:2-12', + '2:20 -> 317:0', + '2:6 -> 319:0', + '2:20 -> 321:1', + '2:6 -> 323:0', + '2:6-20 -> 324:2-18', + '2:20 -> 325:0', + '2:6 -> 327:0', + '2:20 -> 330:1', + '2:6 -> 332:0', + '2:6-20 -> 334:2-20', + '2:6-20 -> 335:2-24', + '2:20 -> 336:0', + '2:6 -> 338:0', + '2:20 -> 340:1', + '2:6 -> 342:0', + '2:6-20 -> 344:2-17', + '2:20 -> 345:0', + '2:6 -> 347:0', + '2:20 -> 349:1', + '2:6 -> 350:0', + '2:6-20 -> 351:2-17', + '2:20 -> 352:0', + '2:6 -> 354:0', + '2:20 -> 358:1', + '2:6 -> 360:0', + '2:6-20 -> 368:2-24', + '2:6-20 -> 369:2-32', + '2:20 -> 370:0', + '2:6 -> 372:0', + '2:20 -> 374:1', + '2:6 -> 376:0', + '2:6-20 -> 378:2-17', + '2:6-20 -> 379:2-14', + '2:20 -> 380:0', + '2:6-20 -> 382:0-72', + '2:6 -> 383:0', + '2:6-20 -> 384:2-15', + '2:20 -> 385:0', + '2:6 -> 387:0', '2:6-20 -> 388:2-26', - '2:6-20 -> 389:2-21', + '2:6-20 -> 389:2-26', '2:6-20 -> 390:2-21', - '2:6-20 -> 391:2-16', + '2:6-20 -> 391:2-21', '2:6-20 -> 392:2-16', '2:6-20 -> 393:2-16', - '2:6-20 -> 394:2-17', + '2:6-20 -> 394:2-16', '2:6-20 -> 395:2-17', - '2:6-20 -> 396:2-15', + '2:6-20 -> 396:2-17', '2:6-20 -> 397:2-15', - '2:6-20 -> 398:2-20', - '2:6-20 -> 399:2-40', - '2:6-20 -> 400:2-32', - '2:6-20 -> 401:2-31', - '2:6-20 -> 402:2-30', - '2:6-20 -> 403:2-17', - '2:6-20 -> 404:2-22', - '2:6-20 -> 405:2-24', - '2:6-20 -> 406:2-25', - '2:6-20 -> 407:2-26', - '2:6-20 -> 408:2-20', - '2:6-20 -> 409:2-29', - '2:6-20 -> 410:2-30', - '2:6-20 -> 411:2-40', - '2:6-20 -> 412:2-36', - '2:6-20 -> 413:2-29', - '2:6-20 -> 414:2-24', - '2:6-20 -> 415:2-32', - '2:6-20 -> 416:2-14', - '2:6-20 -> 417:2-20', - '2:6-20 -> 418:2-18', - '2:6-20 -> 419:2-19', - '2:6-20 -> 420:2-20', - '2:6-20 -> 421:2-16', - '2:6-20 -> 422:2-18', - '2:6-20 -> 423:2-15', - '2:6-20 -> 424:2-21', - '2:6-20 -> 425:2-23', - '2:6-20 -> 426:2-29', - '2:6-20 -> 427:2-27', - '2:6-20 -> 428:2-28', - '2:6-20 -> 429:2-29', - '2:6-20 -> 430:2-25', - '2:6-20 -> 431:2-26', - '2:6-20 -> 432:2-27', - '2:6 -> 433:2', - '2:20 -> 434:0', - '2:6 -> 436:0', - '2:6-20 -> 437:2-26', + '2:6-20 -> 398:2-15', + '2:6-20 -> 399:2-20', + '2:6-20 -> 400:2-40', + '2:6-20 -> 401:2-32', + '2:6-20 -> 402:2-31', + '2:6-20 -> 403:2-30', + '2:6-20 -> 404:2-17', + '2:6-20 -> 405:2-22', + '2:6-20 -> 406:2-24', + '2:6-20 -> 407:2-25', + '2:6-20 -> 408:2-26', + '2:6-20 -> 409:2-20', + '2:6-20 -> 410:2-29', + '2:6-20 -> 411:2-30', + '2:6-20 -> 412:2-40', + '2:6-20 -> 413:2-36', + '2:6-20 -> 414:2-29', + '2:6-20 -> 415:2-24', + '2:6-20 -> 416:2-32', + '2:6-20 -> 417:2-14', + '2:6-20 -> 418:2-20', + '2:6-20 -> 419:2-18', + '2:6-20 -> 420:2-19', + '2:6-20 -> 421:2-20', + '2:6-20 -> 422:2-16', + '2:6-20 -> 423:2-18', + '2:6-20 -> 424:2-15', + '2:6-20 -> 425:2-21', + '2:6-20 -> 426:2-23', + '2:6-20 -> 427:2-29', + '2:6-20 -> 428:2-27', + '2:6-20 -> 429:2-28', + '2:6-20 -> 430:2-29', + '2:6-20 -> 431:2-25', + '2:6-20 -> 432:2-26', + '2:6-20 -> 433:2-27', + '2:6 -> 434:2', + '2:20 -> 435:0', + '2:6 -> 437:0', '2:6-20 -> 438:2-26', - '2:6-20 -> 439:2-21', + '2:6-20 -> 439:2-26', '2:6-20 -> 440:2-21', - '2:6-20 -> 441:2-16', + '2:6-20 -> 441:2-21', '2:6-20 -> 442:2-16', '2:6-20 -> 443:2-16', - '2:6-20 -> 444:2-17', + '2:6-20 -> 444:2-16', '2:6-20 -> 445:2-17', - '2:6-20 -> 446:2-15', + '2:6-20 -> 446:2-17', '2:6-20 -> 447:2-15', - '2:6-20 -> 448:2-20', - '2:6-20 -> 449:2-40', - '2:6-20 -> 450:2-32', - '2:6-20 -> 451:2-31', - '2:6-20 -> 452:2-30', - '2:6-20 -> 453:2-17', - '2:6-20 -> 454:2-22', - '2:6-20 -> 455:2-24', - '2:6-20 -> 456:2-25', - '2:6-20 -> 457:2-26', - '2:6-20 -> 458:2-20', - '2:6-20 -> 459:2-29', - '2:6-20 -> 460:2-30', - '2:6-20 -> 461:2-40', - '2:6-20 -> 462:2-36', - '2:6-20 -> 463:2-29', - '2:6-20 -> 464:2-24', - '2:6-20 -> 465:2-32', - '2:6-20 -> 466:2-14', - '2:6-20 -> 467:2-20', - '2:6-20 -> 468:2-18', - '2:6-20 -> 469:2-19', - '2:6-20 -> 470:2-20', - '2:6-20 -> 471:2-16', - '2:6-20 -> 472:2-18', - '2:6-20 -> 473:2-15', - '2:6-20 -> 474:2-21', - '2:6-20 -> 475:2-23', - '2:6-20 -> 476:2-29', - '2:6-20 -> 477:2-27', - '2:6-20 -> 478:2-28', - '2:6-20 -> 479:2-29', - '2:6-20 -> 480:2-25', - '2:6-20 -> 481:2-26', - '2:6-20 -> 482:2-27', - '2:6 -> 483:2', - '2:20 -> 484:0', + '2:6-20 -> 448:2-15', + '2:6-20 -> 449:2-20', + '2:6-20 -> 450:2-40', + '2:6-20 -> 451:2-32', + '2:6-20 -> 452:2-31', + '2:6-20 -> 453:2-30', + '2:6-20 -> 454:2-17', + '2:6-20 -> 455:2-22', + '2:6-20 -> 456:2-24', + '2:6-20 -> 457:2-25', + '2:6-20 -> 458:2-26', + '2:6-20 -> 459:2-20', + '2:6-20 -> 460:2-29', + '2:6-20 -> 461:2-30', + '2:6-20 -> 462:2-40', + '2:6-20 -> 463:2-36', + '2:6-20 -> 464:2-29', + '2:6-20 -> 465:2-24', + '2:6-20 -> 466:2-32', + '2:6-20 -> 467:2-14', + '2:6-20 -> 468:2-20', + '2:6-20 -> 469:2-18', + '2:6-20 -> 470:2-19', + '2:6-20 -> 471:2-20', + '2:6-20 -> 472:2-16', + '2:6-20 -> 473:2-18', + '2:6-20 -> 474:2-15', + '2:6-20 -> 475:2-21', + '2:6-20 -> 476:2-23', + '2:6-20 -> 477:2-29', + '2:6-20 -> 478:2-27', + '2:6-20 -> 479:2-28', + '2:6-20 -> 480:2-29', + '2:6-20 -> 481:2-25', + '2:6-20 -> 482:2-26', + '2:6-20 -> 483:2-27', + '2:6 -> 484:2', + '2:20 -> 485:0', ]) }) From 7642e28cfe5bb8928d3e6629b52de0cf83239022 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 26 Oct 2023 13:09:38 -0400 Subject: [PATCH 19/24] Disable tap highlights on iOS (#12299) * Disable tap highlights on iOS * Update changelog * Update snapshots * Update changelog --- CHANGELOG.md | 1 + src/css/preflight.css | 2 + tests/source-maps.test.js | 603 +++++++++++++++++++------------------- 3 files changed, 305 insertions(+), 301 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 24e60c775273..19dfcbcc945f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed - Simplify the `sans` font-family stack ([#11748](https://github.com/tailwindlabs/tailwindcss/pull/11748)) +- Disable the tap highlight overlay on iOS ([#12299](https://github.com/tailwindlabs/tailwindcss/pull/12299)) ## [3.3.7] - 2023-12-18 diff --git a/src/css/preflight.css b/src/css/preflight.css index 42d2c65cffbe..3e4fa066386f 100644 --- a/src/css/preflight.css +++ b/src/css/preflight.css @@ -24,6 +24,7 @@ 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS */ html, @@ -35,6 +36,7 @@ html, font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */ font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */ font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */ + -webkit-tap-highlight-color: transparent; /* 7 */ } /* diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js index e783137a6335..686ec14eae59 100644 --- a/tests/source-maps.test.js +++ b/tests/source-maps.test.js @@ -98,309 +98,310 @@ crosscheck(({ stable, oxide }) => { '2:6-20 -> 19:2-18', '2:20 -> 20:0', '2:6 -> 22:0', - '2:20 -> 29:1', - '2:6 -> 31:0', - '2:6-20 -> 33:2-26', - '2:6-20 -> 34:2-40', - '2:6-20 -> 35:2-26', - '2:6-20 -> 36:2-21', - '2:6-20 -> 37:2-137', - '2:6-20 -> 38:2-39', - '2:6-20 -> 39:2-41', - '2:20 -> 40:0', - '2:6 -> 42:0', - '2:20 -> 45:1', - '2:6 -> 47:0', - '2:6-20 -> 48:2-19', - '2:6-20 -> 49:2-30', - '2:20 -> 50:0', - '2:6 -> 52:0', - '2:20 -> 56:1', - '2:6 -> 58:0', - '2:6-20 -> 59:2-19', - '2:6-20 -> 60:2-24', - '2:6-20 -> 61:2-31', - '2:20 -> 62:0', - '2:6 -> 64:0', - '2:20 -> 66:1', - '2:6 -> 68:0', - '2:6-20 -> 69:2-35', - '2:20 -> 70:0', - '2:6 -> 72:0', - '2:20 -> 74:1', - '2:6 -> 76:0', - '2:6-20 -> 82:2-20', - '2:6-20 -> 83:2-22', - '2:20 -> 84:0', - '2:6 -> 86:0', - '2:20 -> 88:1', - '2:6 -> 90:0', - '2:6-20 -> 91:2-16', - '2:6-20 -> 92:2-26', - '2:20 -> 93:0', - '2:6 -> 95:0', - '2:20 -> 97:1', - '2:6 -> 99:0', - '2:6-20 -> 101:2-21', - '2:20 -> 102:0', - '2:6 -> 104:0', - '2:20 -> 109:1', - '2:6 -> 111:0', - '2:6-20 -> 115:2-121', - '2:6-20 -> 116:2-39', - '2:6-20 -> 117:2-41', - '2:6-20 -> 118:2-24', - '2:20 -> 119:0', - '2:6 -> 121:0', - '2:20 -> 123:1', - '2:6 -> 125:0', - '2:6-20 -> 126:2-16', - '2:20 -> 127:0', - '2:6 -> 129:0', - '2:20 -> 131:1', - '2:6 -> 133:0', - '2:6-20 -> 135:2-16', - '2:6-20 -> 136:2-16', - '2:6-20 -> 137:2-20', - '2:6-20 -> 138:2-26', - '2:20 -> 139:0', - '2:6 -> 141:0', - '2:6-20 -> 142:2-17', - '2:20 -> 143:0', - '2:6 -> 145:0', - '2:6-20 -> 146:2-13', - '2:20 -> 147:0', - '2:6 -> 149:0', - '2:20 -> 153:1', - '2:6 -> 155:0', - '2:6-20 -> 156:2-24', - '2:6-20 -> 157:2-31', - '2:6-20 -> 158:2-35', - '2:20 -> 159:0', - '2:6 -> 161:0', - '2:20 -> 165:1', - '2:6 -> 167:0', - '2:6-20 -> 172:2-30', - '2:6-20 -> 173:2-40', - '2:6-20 -> 174:2-42', - '2:6-20 -> 175:2-25', - '2:6-20 -> 176:2-30', - '2:6-20 -> 177:2-30', - '2:6-20 -> 178:2-24', - '2:6-20 -> 179:2-19', - '2:6-20 -> 180:2-20', - '2:20 -> 181:0', - '2:6 -> 183:0', - '2:20 -> 185:1', - '2:6 -> 187:0', - '2:6-20 -> 189:2-22', - '2:20 -> 190:0', - '2:6 -> 192:0', - '2:20 -> 195:1', - '2:6 -> 197:0', - '2:6-20 -> 201:2-36', - '2:6-20 -> 202:2-39', - '2:6-20 -> 203:2-32', - '2:20 -> 204:0', - '2:6 -> 206:0', - '2:20 -> 208:1', - '2:6 -> 210:0', - '2:6-20 -> 211:2-15', - '2:20 -> 212:0', - '2:6 -> 214:0', - '2:20 -> 216:1', - '2:6 -> 218:0', - '2:6-20 -> 219:2-18', - '2:20 -> 220:0', - '2:6 -> 222:0', - '2:20 -> 224:1', - '2:6 -> 226:0', - '2:6-20 -> 227:2-26', - '2:20 -> 228:0', - '2:6 -> 230:0', - '2:20 -> 232:1', - '2:6 -> 234:0', - '2:6-20 -> 236:2-14', - '2:20 -> 237:0', - '2:6 -> 239:0', - '2:20 -> 242:1', - '2:6 -> 244:0', - '2:6-20 -> 245:2-39', - '2:6-20 -> 246:2-30', - '2:20 -> 247:0', - '2:6 -> 249:0', - '2:20 -> 251:1', - '2:6 -> 253:0', - '2:6-20 -> 254:2-26', - '2:20 -> 255:0', - '2:6 -> 257:0', - '2:20 -> 260:1', - '2:6 -> 262:0', - '2:6-20 -> 263:2-36', - '2:6-20 -> 264:2-23', - '2:20 -> 265:0', - '2:6 -> 267:0', - '2:20 -> 269:1', - '2:6 -> 271:0', - '2:6-20 -> 272:2-20', - '2:20 -> 273:0', - '2:6 -> 275:0', - '2:20 -> 277:1', - '2:6 -> 279:0', - '2:6-20 -> 292:2-11', - '2:20 -> 293:0', - '2:6 -> 295:0', - '2:6-20 -> 296:2-11', - '2:6-20 -> 297:2-12', - '2:20 -> 298:0', - '2:6 -> 300:0', - '2:6-20 -> 301:2-12', - '2:20 -> 302:0', - '2:6 -> 304:0', - '2:6-20 -> 307:2-18', - '2:6-20 -> 308:2-11', - '2:6-20 -> 309:2-12', - '2:20 -> 310:0', - '2:6 -> 312:0', - '2:20 -> 314:1', - '2:6 -> 315:0', - '2:6-20 -> 316:2-12', - '2:20 -> 317:0', - '2:6 -> 319:0', - '2:20 -> 321:1', - '2:6 -> 323:0', - '2:6-20 -> 324:2-18', - '2:20 -> 325:0', - '2:6 -> 327:0', - '2:20 -> 330:1', - '2:6 -> 332:0', - '2:6-20 -> 334:2-20', - '2:6-20 -> 335:2-24', - '2:20 -> 336:0', - '2:6 -> 338:0', - '2:20 -> 340:1', - '2:6 -> 342:0', - '2:6-20 -> 344:2-17', - '2:20 -> 345:0', - '2:6 -> 347:0', - '2:20 -> 349:1', - '2:6 -> 350:0', - '2:6-20 -> 351:2-17', - '2:20 -> 352:0', - '2:6 -> 354:0', - '2:20 -> 358:1', - '2:6 -> 360:0', - '2:6-20 -> 368:2-24', - '2:6-20 -> 369:2-32', - '2:20 -> 370:0', - '2:6 -> 372:0', - '2:20 -> 374:1', - '2:6 -> 376:0', - '2:6-20 -> 378:2-17', - '2:6-20 -> 379:2-14', - '2:20 -> 380:0', - '2:6-20 -> 382:0-72', - '2:6 -> 383:0', - '2:6-20 -> 384:2-15', - '2:20 -> 385:0', - '2:6 -> 387:0', - '2:6-20 -> 388:2-26', - '2:6-20 -> 389:2-26', - '2:6-20 -> 390:2-21', - '2:6-20 -> 391:2-21', - '2:6-20 -> 392:2-16', - '2:6-20 -> 393:2-16', + '2:20 -> 30:1', + '2:6 -> 32:0', + '2:6-20 -> 34:2-26', + '2:6-20 -> 35:2-40', + '2:6-20 -> 36:2-26', + '2:6-20 -> 37:2-21', + '2:6-20 -> 38:2-137', + '2:6-20 -> 39:2-39', + '2:6-20 -> 40:2-41', + '2:6-20 -> 41:2-50', + '2:20 -> 42:0', + '2:6 -> 44:0', + '2:20 -> 47:1', + '2:6 -> 49:0', + '2:6-20 -> 50:2-19', + '2:6-20 -> 51:2-30', + '2:20 -> 52:0', + '2:6 -> 54:0', + '2:20 -> 58:1', + '2:6 -> 60:0', + '2:6-20 -> 61:2-19', + '2:6-20 -> 62:2-24', + '2:6-20 -> 63:2-31', + '2:20 -> 64:0', + '2:6 -> 66:0', + '2:20 -> 68:1', + '2:6 -> 70:0', + '2:6-20 -> 71:2-35', + '2:20 -> 72:0', + '2:6 -> 74:0', + '2:20 -> 76:1', + '2:6 -> 78:0', + '2:6-20 -> 84:2-20', + '2:6-20 -> 85:2-22', + '2:20 -> 86:0', + '2:6 -> 88:0', + '2:20 -> 90:1', + '2:6 -> 92:0', + '2:6-20 -> 93:2-16', + '2:6-20 -> 94:2-26', + '2:20 -> 95:0', + '2:6 -> 97:0', + '2:20 -> 99:1', + '2:6 -> 101:0', + '2:6-20 -> 103:2-21', + '2:20 -> 104:0', + '2:6 -> 106:0', + '2:20 -> 111:1', + '2:6 -> 113:0', + '2:6-20 -> 117:2-121', + '2:6-20 -> 118:2-39', + '2:6-20 -> 119:2-41', + '2:6-20 -> 120:2-24', + '2:20 -> 121:0', + '2:6 -> 123:0', + '2:20 -> 125:1', + '2:6 -> 127:0', + '2:6-20 -> 128:2-16', + '2:20 -> 129:0', + '2:6 -> 131:0', + '2:20 -> 133:1', + '2:6 -> 135:0', + '2:6-20 -> 137:2-16', + '2:6-20 -> 138:2-16', + '2:6-20 -> 139:2-20', + '2:6-20 -> 140:2-26', + '2:20 -> 141:0', + '2:6 -> 143:0', + '2:6-20 -> 144:2-17', + '2:20 -> 145:0', + '2:6 -> 147:0', + '2:6-20 -> 148:2-13', + '2:20 -> 149:0', + '2:6 -> 151:0', + '2:20 -> 155:1', + '2:6 -> 157:0', + '2:6-20 -> 158:2-24', + '2:6-20 -> 159:2-31', + '2:6-20 -> 160:2-35', + '2:20 -> 161:0', + '2:6 -> 163:0', + '2:20 -> 167:1', + '2:6 -> 169:0', + '2:6-20 -> 174:2-30', + '2:6-20 -> 175:2-40', + '2:6-20 -> 176:2-42', + '2:6-20 -> 177:2-25', + '2:6-20 -> 178:2-30', + '2:6-20 -> 179:2-30', + '2:6-20 -> 180:2-24', + '2:6-20 -> 181:2-19', + '2:6-20 -> 182:2-20', + '2:20 -> 183:0', + '2:6 -> 185:0', + '2:20 -> 187:1', + '2:6 -> 189:0', + '2:6-20 -> 191:2-22', + '2:20 -> 192:0', + '2:6 -> 194:0', + '2:20 -> 197:1', + '2:6 -> 199:0', + '2:6-20 -> 203:2-36', + '2:6-20 -> 204:2-39', + '2:6-20 -> 205:2-32', + '2:20 -> 206:0', + '2:6 -> 208:0', + '2:20 -> 210:1', + '2:6 -> 212:0', + '2:6-20 -> 213:2-15', + '2:20 -> 214:0', + '2:6 -> 216:0', + '2:20 -> 218:1', + '2:6 -> 220:0', + '2:6-20 -> 221:2-18', + '2:20 -> 222:0', + '2:6 -> 224:0', + '2:20 -> 226:1', + '2:6 -> 228:0', + '2:6-20 -> 229:2-26', + '2:20 -> 230:0', + '2:6 -> 232:0', + '2:20 -> 234:1', + '2:6 -> 236:0', + '2:6-20 -> 238:2-14', + '2:20 -> 239:0', + '2:6 -> 241:0', + '2:20 -> 244:1', + '2:6 -> 246:0', + '2:6-20 -> 247:2-39', + '2:6-20 -> 248:2-30', + '2:20 -> 249:0', + '2:6 -> 251:0', + '2:20 -> 253:1', + '2:6 -> 255:0', + '2:6-20 -> 256:2-26', + '2:20 -> 257:0', + '2:6 -> 259:0', + '2:20 -> 262:1', + '2:6 -> 264:0', + '2:6-20 -> 265:2-36', + '2:6-20 -> 266:2-23', + '2:20 -> 267:0', + '2:6 -> 269:0', + '2:20 -> 271:1', + '2:6 -> 273:0', + '2:6-20 -> 274:2-20', + '2:20 -> 275:0', + '2:6 -> 277:0', + '2:20 -> 279:1', + '2:6 -> 281:0', + '2:6-20 -> 294:2-11', + '2:20 -> 295:0', + '2:6 -> 297:0', + '2:6-20 -> 298:2-11', + '2:6-20 -> 299:2-12', + '2:20 -> 300:0', + '2:6 -> 302:0', + '2:6-20 -> 303:2-12', + '2:20 -> 304:0', + '2:6 -> 306:0', + '2:6-20 -> 309:2-18', + '2:6-20 -> 310:2-11', + '2:6-20 -> 311:2-12', + '2:20 -> 312:0', + '2:6 -> 314:0', + '2:20 -> 316:1', + '2:6 -> 317:0', + '2:6-20 -> 318:2-12', + '2:20 -> 319:0', + '2:6 -> 321:0', + '2:20 -> 323:1', + '2:6 -> 325:0', + '2:6-20 -> 326:2-18', + '2:20 -> 327:0', + '2:6 -> 329:0', + '2:20 -> 332:1', + '2:6 -> 334:0', + '2:6-20 -> 336:2-20', + '2:6-20 -> 337:2-24', + '2:20 -> 338:0', + '2:6 -> 340:0', + '2:20 -> 342:1', + '2:6 -> 344:0', + '2:6-20 -> 346:2-17', + '2:20 -> 347:0', + '2:6 -> 349:0', + '2:20 -> 351:1', + '2:6 -> 352:0', + '2:6-20 -> 353:2-17', + '2:20 -> 354:0', + '2:6 -> 356:0', + '2:20 -> 360:1', + '2:6 -> 362:0', + '2:6-20 -> 370:2-24', + '2:6-20 -> 371:2-32', + '2:20 -> 372:0', + '2:6 -> 374:0', + '2:20 -> 376:1', + '2:6 -> 378:0', + '2:6-20 -> 380:2-17', + '2:6-20 -> 381:2-14', + '2:20 -> 382:0', + '2:6-20 -> 384:0-72', + '2:6 -> 385:0', + '2:6-20 -> 386:2-15', + '2:20 -> 387:0', + '2:6 -> 389:0', + '2:6-20 -> 390:2-26', + '2:6-20 -> 391:2-26', + '2:6-20 -> 392:2-21', + '2:6-20 -> 393:2-21', '2:6-20 -> 394:2-16', - '2:6-20 -> 395:2-17', - '2:6-20 -> 396:2-17', - '2:6-20 -> 397:2-15', - '2:6-20 -> 398:2-15', - '2:6-20 -> 399:2-20', - '2:6-20 -> 400:2-40', - '2:6-20 -> 401:2-32', - '2:6-20 -> 402:2-31', - '2:6-20 -> 403:2-30', - '2:6-20 -> 404:2-17', - '2:6-20 -> 405:2-22', - '2:6-20 -> 406:2-24', - '2:6-20 -> 407:2-25', - '2:6-20 -> 408:2-26', - '2:6-20 -> 409:2-20', - '2:6-20 -> 410:2-29', - '2:6-20 -> 411:2-30', - '2:6-20 -> 412:2-40', - '2:6-20 -> 413:2-36', - '2:6-20 -> 414:2-29', - '2:6-20 -> 415:2-24', - '2:6-20 -> 416:2-32', - '2:6-20 -> 417:2-14', - '2:6-20 -> 418:2-20', - '2:6-20 -> 419:2-18', - '2:6-20 -> 420:2-19', - '2:6-20 -> 421:2-20', - '2:6-20 -> 422:2-16', - '2:6-20 -> 423:2-18', - '2:6-20 -> 424:2-15', - '2:6-20 -> 425:2-21', - '2:6-20 -> 426:2-23', - '2:6-20 -> 427:2-29', - '2:6-20 -> 428:2-27', - '2:6-20 -> 429:2-28', - '2:6-20 -> 430:2-29', - '2:6-20 -> 431:2-25', - '2:6-20 -> 432:2-26', - '2:6-20 -> 433:2-27', - '2:6 -> 434:2', - '2:20 -> 435:0', - '2:6 -> 437:0', - '2:6-20 -> 438:2-26', - '2:6-20 -> 439:2-26', - '2:6-20 -> 440:2-21', - '2:6-20 -> 441:2-21', - '2:6-20 -> 442:2-16', - '2:6-20 -> 443:2-16', + '2:6-20 -> 395:2-16', + '2:6-20 -> 396:2-16', + '2:6-20 -> 397:2-17', + '2:6-20 -> 398:2-17', + '2:6-20 -> 399:2-15', + '2:6-20 -> 400:2-15', + '2:6-20 -> 401:2-20', + '2:6-20 -> 402:2-40', + '2:6-20 -> 403:2-32', + '2:6-20 -> 404:2-31', + '2:6-20 -> 405:2-30', + '2:6-20 -> 406:2-17', + '2:6-20 -> 407:2-22', + '2:6-20 -> 408:2-24', + '2:6-20 -> 409:2-25', + '2:6-20 -> 410:2-26', + '2:6-20 -> 411:2-20', + '2:6-20 -> 412:2-29', + '2:6-20 -> 413:2-30', + '2:6-20 -> 414:2-40', + '2:6-20 -> 415:2-36', + '2:6-20 -> 416:2-29', + '2:6-20 -> 417:2-24', + '2:6-20 -> 418:2-32', + '2:6-20 -> 419:2-14', + '2:6-20 -> 420:2-20', + '2:6-20 -> 421:2-18', + '2:6-20 -> 422:2-19', + '2:6-20 -> 423:2-20', + '2:6-20 -> 424:2-16', + '2:6-20 -> 425:2-18', + '2:6-20 -> 426:2-15', + '2:6-20 -> 427:2-21', + '2:6-20 -> 428:2-23', + '2:6-20 -> 429:2-29', + '2:6-20 -> 430:2-27', + '2:6-20 -> 431:2-28', + '2:6-20 -> 432:2-29', + '2:6-20 -> 433:2-25', + '2:6-20 -> 434:2-26', + '2:6-20 -> 435:2-27', + '2:6 -> 436:2', + '2:20 -> 437:0', + '2:6 -> 439:0', + '2:6-20 -> 440:2-26', + '2:6-20 -> 441:2-26', + '2:6-20 -> 442:2-21', + '2:6-20 -> 443:2-21', '2:6-20 -> 444:2-16', - '2:6-20 -> 445:2-17', - '2:6-20 -> 446:2-17', - '2:6-20 -> 447:2-15', - '2:6-20 -> 448:2-15', - '2:6-20 -> 449:2-20', - '2:6-20 -> 450:2-40', - '2:6-20 -> 451:2-32', - '2:6-20 -> 452:2-31', - '2:6-20 -> 453:2-30', - '2:6-20 -> 454:2-17', - '2:6-20 -> 455:2-22', - '2:6-20 -> 456:2-24', - '2:6-20 -> 457:2-25', - '2:6-20 -> 458:2-26', - '2:6-20 -> 459:2-20', - '2:6-20 -> 460:2-29', - '2:6-20 -> 461:2-30', - '2:6-20 -> 462:2-40', - '2:6-20 -> 463:2-36', - '2:6-20 -> 464:2-29', - '2:6-20 -> 465:2-24', - '2:6-20 -> 466:2-32', - '2:6-20 -> 467:2-14', - '2:6-20 -> 468:2-20', - '2:6-20 -> 469:2-18', - '2:6-20 -> 470:2-19', - '2:6-20 -> 471:2-20', - '2:6-20 -> 472:2-16', - '2:6-20 -> 473:2-18', - '2:6-20 -> 474:2-15', - '2:6-20 -> 475:2-21', - '2:6-20 -> 476:2-23', - '2:6-20 -> 477:2-29', - '2:6-20 -> 478:2-27', - '2:6-20 -> 479:2-28', - '2:6-20 -> 480:2-29', - '2:6-20 -> 481:2-25', - '2:6-20 -> 482:2-26', - '2:6-20 -> 483:2-27', - '2:6 -> 484:2', - '2:20 -> 485:0', + '2:6-20 -> 445:2-16', + '2:6-20 -> 446:2-16', + '2:6-20 -> 447:2-17', + '2:6-20 -> 448:2-17', + '2:6-20 -> 449:2-15', + '2:6-20 -> 450:2-15', + '2:6-20 -> 451:2-20', + '2:6-20 -> 452:2-40', + '2:6-20 -> 453:2-32', + '2:6-20 -> 454:2-31', + '2:6-20 -> 455:2-30', + '2:6-20 -> 456:2-17', + '2:6-20 -> 457:2-22', + '2:6-20 -> 458:2-24', + '2:6-20 -> 459:2-25', + '2:6-20 -> 460:2-26', + '2:6-20 -> 461:2-20', + '2:6-20 -> 462:2-29', + '2:6-20 -> 463:2-30', + '2:6-20 -> 464:2-40', + '2:6-20 -> 465:2-36', + '2:6-20 -> 466:2-29', + '2:6-20 -> 467:2-24', + '2:6-20 -> 468:2-32', + '2:6-20 -> 469:2-14', + '2:6-20 -> 470:2-20', + '2:6-20 -> 471:2-18', + '2:6-20 -> 472:2-19', + '2:6-20 -> 473:2-20', + '2:6-20 -> 474:2-16', + '2:6-20 -> 475:2-18', + '2:6-20 -> 476:2-15', + '2:6-20 -> 477:2-21', + '2:6-20 -> 478:2-23', + '2:6-20 -> 479:2-29', + '2:6-20 -> 480:2-27', + '2:6-20 -> 481:2-28', + '2:6-20 -> 482:2-29', + '2:6-20 -> 483:2-25', + '2:6-20 -> 484:2-26', + '2:6-20 -> 485:2-27', + '2:6 -> 486:2', + '2:20 -> 487:0', ]) }) From 47dbb4a2b3fd0982e55aa44707c42e1da820b54e Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 9 Dec 2023 09:11:00 -0500 Subject: [PATCH 20/24] Add `*` variant for targeting direct children (#12551) * add `*` as child variant * add `*` as allowed variant character * update test to reflect Lightning CSS output * add `childVariant` test * Update changelog --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Co-authored-by: Robin Malfait Co-authored-by: Gregor Kaczmarczyk --- CHANGELOG.md | 1 + oxide/crates/core/src/parser.rs | 12 +++++++++++- src/corePlugins.js | 3 +++ src/lib/setupContextUtils.js | 1 + tests/variants.test.js | 33 +++++++++++++++++++++++++++++++++ 5 files changed, 49 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 19dfcbcc945f..2118af616c3b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694)) - Add `appearance-auto` utility ([#12404](https://github.com/tailwindlabs/tailwindcss/pull/12404)) - Add logical property values for `float` and `clear` utilities ([#12480](https://github.com/tailwindlabs/tailwindcss/pull/12480)) +- Add `*` variant for targeting direct children ([#12551](https://github.com/tailwindlabs/tailwindcss/pull/12551)) ### Changed diff --git a/oxide/crates/core/src/parser.rs b/oxide/crates/core/src/parser.rs index 16831afffd41..2f159f25ab46 100644 --- a/oxide/crates/core/src/parser.rs +++ b/oxide/crates/core/src/parser.rs @@ -278,7 +278,7 @@ impl<'a> Extractor<'a> { } // Allowed first characters. - b'@' | b'!' | b'-' | b'<' | b'0'..=b'9' | b'a'..=b'z' | b'A'..=b'Z' => { + b'@' | b'!' | b'-' | b'<' | b'0'..=b'9' | b'a'..=b'z' | b'A'..=b'Z' | b'*' => { // TODO: A bunch of characters that we currently support but maybe we only want it behind // a flag. E.g.: '' | '$' | '^' | '_' @@ -329,6 +329,7 @@ impl<'a> Extractor<'a> { | b'!' | b'@' | b'%' + | b'*' if prev != b']' => { /* TODO: The `b'@'` is necessary for custom separators like _@, maybe we can handle this in a better way... */ @@ -508,6 +509,15 @@ mod test { assert_eq!(candidates, vec!["hover:underline"]); } + #[test] + fn it_can_parse_start_variants() { + let candidates = run("*:underline", false); + assert_eq!(candidates, vec!["*:underline"]); + + let candidates = run("hover:*:underline", false); + assert_eq!(candidates, vec!["hover:*:underline"]); + } + #[test] fn it_can_parse_simple_candidates_with_stacked_variants() { let candidates = run("focus:hover:underline", false); diff --git a/src/corePlugins.js b/src/corePlugins.js index 76443f5544cc..a0687ab675e4 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -25,6 +25,9 @@ import { normalize } from './util/dataTypes' import { INTERNAL_FEATURES } from './lib/setupContextUtils' export let variantPlugins = { + childVariant: ({ addVariant }) => { + addVariant('*', '& > *') + }, pseudoElementVariants: ({ addVariant }) => { addVariant('first-letter', '&::first-letter') addVariant('first-line', '&::first-line') diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index 28991dc838c8..d47620218d4c 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -756,6 +756,7 @@ function resolvePlugins(context, root) { // TODO: This is a workaround for backwards compatibility, since custom variants // were historically sorted before screen/stackable variants. let beforeVariants = [ + variantPlugins['childVariant'], variantPlugins['pseudoElementVariants'], variantPlugins['pseudoClassVariants'], variantPlugins['hasVariants'], diff --git a/tests/variants.test.js b/tests/variants.test.js index 55facc122f41..139d00ad8d62 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -1201,4 +1201,37 @@ crosscheck(({ stable, oxide }) => { } `) }) + + test('* is matched by the parser as the children variant', async () => { + let config = { + content: [ + { + raw: html` +
+
+
+
+
+ `, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind utilities; + ` + + let result = await run(input, config) + + expect(result.css).toMatchFormattedCss(css` + .\*\:italic > *, + .\*\:hover\:italic:hover > *, + .hover\:\*\:italic > :hover, + .data-\[slot\=label\]\:\*\:hover\:italic:hover > [data-slot='label'], + .\[\&_p\]\:\*\:hover\:italic:hover > * p { + font-style: italic; + } + `) + }) }) From 11a6ba3949451f7c843b6be5d7847f8e91acc52b Mon Sep 17 00:00:00 2001 From: Luke Warlow Date: Wed, 13 Dec 2023 15:03:14 +0000 Subject: [PATCH 21/24] Move forced-colors variant after dark variant (#12582) Also add test for the order of the forced-colors variant --- src/lib/setupContextUtils.js | 2 +- tests/variants.test.css | 5 +++++ tests/variants.test.html | 3 +++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index d47620218d4c..d3cde4488fa0 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -768,8 +768,8 @@ function resolvePlugins(context, root) { variantPlugins['directionVariants'], variantPlugins['reducedMotionVariants'], variantPlugins['prefersContrastVariants'], - variantPlugins['forcedColorsVariants'], variantPlugins['darkVariants'], + variantPlugins['forcedColorsVariants'], variantPlugins['printVariant'], variantPlugins['screenVariants'], variantPlugins['orientationVariants'], diff --git a/tests/variants.test.css b/tests/variants.test.css index 8a9d481ee7bc..cd2ec1dd7977 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -347,6 +347,11 @@ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +@media (forced-colors: active) { + .forced-colors\:flex { + display: flex; + } +} @media print { .print\:bg-yellow-300 { --tw-bg-opacity: 1; diff --git a/tests/variants.test.html b/tests/variants.test.html index bd40b625fbdb..f3ba2ba3b6ad 100644 --- a/tests/variants.test.html +++ b/tests/variants.test.html @@ -121,6 +121,9 @@
+ +
+
From dae4618e97244606e53d2936ccd4b0f650ecb5ec Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Wed, 13 Dec 2023 10:03:40 -0500 Subject: [PATCH 22/24] Update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2118af616c3b..d7ea9ab443ef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,7 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add utilities for CSS subgrid ([#12298](https://github.com/tailwindlabs/tailwindcss/pull/12298)) - Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300)) - Add `forced-color-adjust` utilities ([#11931](https://github.com/tailwindlabs/tailwindcss/pull/11931)) -- Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694)) +- Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694), [#12582](https://github.com/tailwindlabs/tailwindcss/pull/12582)) - Add `appearance-auto` utility ([#12404](https://github.com/tailwindlabs/tailwindcss/pull/12404)) - Add logical property values for `float` and `clear` utilities ([#12480](https://github.com/tailwindlabs/tailwindcss/pull/12480)) - Add `*` variant for targeting direct children ([#12551](https://github.com/tailwindlabs/tailwindcss/pull/12551)) From fbdb858e97053e389d732e017a9d9acdc54924a0 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 16 Dec 2023 18:53:08 -0500 Subject: [PATCH 23/24] Improve relative precedence of `rtl`, `ltr`, `forced-colors` and `dark` variants (#12584) * Reduce specificity of `rtl`, `ltr`, and `dark` variants Reduce specificity of `rtl`, `ltr`, and `dark` variants (when using `darkMode: 'class'`) to make them the same as other variants. This also sorts the LTR/RTL and dark variants later in the variant plugin list to ensure that the reduced specificity doesn't cause them to start "losing" to other variants to keep things as backwards compatible as possible. Resolves a long-standing issue where `darkMode: 'media'` and `darkMode: 'class'` had different specificity, which meant switching your dark mode strategy could break your site. * Update changelog --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 1 + src/corePlugins.js | 6 +- src/lib/setupContextUtils.js | 6 +- tests/apply.test.js | 24 +++--- tests/custom-separator.test.js | 12 +-- tests/dark-mode.test.js | 4 +- tests/format-variant-selector.test.js | 4 +- tests/important-boolean.test.js | 12 +-- tests/important-selector.test.js | 26 +++---- tests/kitchen-sink.test.js | 39 ++++++---- tests/prefix.test.js | 22 +++--- tests/util/apply-important-selector.test.js | 4 +- tests/variants.oxide.test.css | 79 +++++++++++++------ tests/variants.test.css | 84 ++++++++++++++------- tests/variants.test.js | 4 +- 15 files changed, 196 insertions(+), 131 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d7ea9ab443ef..ae682f777620 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Simplify the `sans` font-family stack ([#11748](https://github.com/tailwindlabs/tailwindcss/pull/11748)) - Disable the tap highlight overlay on iOS ([#12299](https://github.com/tailwindlabs/tailwindcss/pull/12299)) +- Improve relative precedence of `rtl`, `ltr`, `forced-colors`, and `dark` variants ([#12584](https://github.com/tailwindlabs/tailwindcss/pull/12584)) ## [3.3.7] - 2023-12-18 diff --git a/src/corePlugins.js b/src/corePlugins.js index a0687ab675e4..a04dce82e3bd 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -207,8 +207,8 @@ export let variantPlugins = { }, directionVariants: ({ addVariant }) => { - addVariant('ltr', ':is([dir="ltr"] &)') - addVariant('rtl', ':is([dir="rtl"] &)') + addVariant('ltr', ':is(:where([dir="ltr"]) &)') + addVariant('rtl', ':is(:where([dir="rtl"]) &)') }, reducedMotionVariants: ({ addVariant }) => { @@ -229,7 +229,7 @@ export let variantPlugins = { } if (mode === 'class') { - addVariant('dark', `:is(${className} &)`) + addVariant('dark', `:is(:where(${className}) &)`) } else if (mode === 'media') { addVariant('dark', '@media (prefers-color-scheme: dark)') } diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index d3cde4488fa0..91d5f66bfc8e 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -765,14 +765,14 @@ function resolvePlugins(context, root) { ] let afterVariants = [ variantPlugins['supportsVariants'], - variantPlugins['directionVariants'], variantPlugins['reducedMotionVariants'], variantPlugins['prefersContrastVariants'], - variantPlugins['darkVariants'], - variantPlugins['forcedColorsVariants'], variantPlugins['printVariant'], variantPlugins['screenVariants'], variantPlugins['orientationVariants'], + variantPlugins['directionVariants'], + variantPlugins['darkVariants'], + variantPlugins['forcedColorsVariants'], ] return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins] diff --git a/tests/apply.test.js b/tests/apply.test.js index 141d5dab912f..fe2b572496ba 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -216,14 +216,14 @@ crosscheck(({ stable, oxide }) => { text-align: left; } } - :is(.dark .apply-dark-variant) { + :is(:where(.dark) .apply-dark-variant) { text-align: center; } - :is(.dark .apply-dark-variant:hover) { + :is(:where(.dark) .apply-dark-variant:hover) { text-align: right; } @media (min-width: 1024px) { - :is(.dark .apply-dark-variant) { + :is(:where(.dark) .apply-dark-variant) { text-align: left; } } @@ -513,14 +513,14 @@ crosscheck(({ stable, oxide }) => { text-align: left; } } - :is(.dark .apply-dark-variant) { + :is(:where(.dark) .apply-dark-variant) { text-align: center; } - :is(.dark .apply-dark-variant:hover) { + :is(:where(.dark) .apply-dark-variant:hover) { text-align: right; } @media (min-width: 1024px) { - :is(.dark .apply-dark-variant) { + :is(:where(.dark) .apply-dark-variant) { text-align: left; } } @@ -2404,18 +2404,18 @@ crosscheck(({ stable, oxide }) => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - :is(.dark .foo)::before, - :is([dir='rtl'] :is(.dark .bar))::before, - :is([dir='rtl'] :is(.dark .baz:hover))::before { + :is(:where(.dark) .foo)::before, + :is(:where([dir='rtl']) :is(:where(.dark) .bar))::before, + :is(:where([dir='rtl']) :is(:where(.dark) .baz:hover))::before { background-color: #000; } - :is([dir='rtl'] :is(.dark .qux))::file-selector-button:hover { + :is(:where([dir='rtl']) :is(:where(.dark) .qux))::file-selector-button:hover { background-color: #000; } - :is([dir='rtl'] :is(.dark .steve):hover):before { + :is(:where([dir='rtl']) :is(:where(.dark) .steve):hover):before { background-color: #000; } - :is([dir='rtl'] :is(.dark .bob))::file-selector-button:hover { + :is(:where([dir='rtl']) :is(:where(.dark) .bob))::file-selector-button:hover { background-color: #000; } :has([dir='rtl'] .foo:hover):before { diff --git a/tests/custom-separator.test.js b/tests/custom-separator.test.js index adc1d55afd65..6546f4ed2c63 100644 --- a/tests/custom-separator.test.js +++ b/tests/custom-separator.test.js @@ -23,22 +23,22 @@ crosscheck(() => { .group:hover .group-hover_focus-within_text-left:focus-within { text-align: left; } - :is([dir='rtl'] .rtl_active_text-center:active) { - text-align: center; - } @media (prefers-reduced-motion: no-preference) { .motion-safe_hover_text-center:hover { text-align: center; } } - :is(.dark .dark_focus_text-left:focus) { - text-align: left; - } @media (min-width: 768px) { .md_hover_text-right:hover { text-align: right; } } + :is(:where([dir='rtl']) .rtl_active_text-center:active) { + text-align: center; + } + :is(:where(.dark) .dark_focus_text-left:focus) { + text-align: left; + } `) }) }) diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js index ce06496b2124..9845e0fdfe61 100644 --- a/tests/dark-mode.test.js +++ b/tests/dark-mode.test.js @@ -17,7 +17,7 @@ crosscheck(() => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` ${defaults} - :is(.dark .dark\:font-bold) { + :is(:where(.dark) .dark\:font-bold) { font-weight: 700; } `) @@ -40,7 +40,7 @@ crosscheck(() => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` ${defaults} - :is(.test-dark .dark\:font-bold) { + :is(:where(.test-dark) .dark\:font-bold) { font-weight: 700; } `) diff --git a/tests/format-variant-selector.test.js b/tests/format-variant-selector.test.js index c94fb95f615c..ea0b92741d13 100644 --- a/tests/format-variant-selector.test.js +++ b/tests/format-variant-selector.test.js @@ -348,8 +348,8 @@ crosscheck(() => { ${'.parent::before &:hover'} | ${'.parent &:hover::before'} ${':where(&::before) :is(h1, h2, h3, h4)'} | ${':where(&) :is(h1, h2, h3, h4)::before'} ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'} | ${':where(&::file-selector-button) :is(h1, h2, h3, h4)'} - ${'#app :is(.dark &::before)'} | ${'#app :is(.dark &)::before'} - ${'#app :is(:is(.dark &)::before)'} | ${'#app :is(:is(.dark &))::before'} + ${'#app :is(:where(.dark) &::before)'} | ${'#app :is(:where(.dark) &)::before'} + ${'#app :is(:is(:where(.dark) &)::before)'} | ${'#app :is(:is(:where(.dark) &))::before'} ${'#app :is(.foo::file-selector-button)'} | ${'#app :is(.foo)::file-selector-button'} ${'#app :is(.foo::-webkit-progress-bar)'} | ${'#app :is(.foo)::-webkit-progress-bar'} ${'.parent::marker li'} | ${'.parent li::marker'} diff --git a/tests/important-boolean.test.js b/tests/important-boolean.test.js index 895ca053c901..6b028736c441 100644 --- a/tests/important-boolean.test.js +++ b/tests/important-boolean.test.js @@ -138,22 +138,22 @@ crosscheck(() => { .group:hover .group-hover\:focus-within\:text-left:focus-within { text-align: left !important; } - :is([dir='rtl'] .rtl\:active\:text-center:active) { - text-align: center !important; - } @media (prefers-reduced-motion: no-preference) { .motion-safe\:hover\:text-center:hover { text-align: center !important; } } - :is(.dark .dark\:focus\:text-left:focus) { - text-align: left !important; - } @media (min-width: 768px) { .md\:hover\:text-right:hover { text-align: right !important; } } + :is(:where([dir='rtl']) .rtl\:active\:text-center:active) { + text-align: center !important; + } + :is(:where(.dark) .dark\:focus\:text-left:focus) { + text-align: left !important; + } `) }) }) diff --git a/tests/important-selector.test.js b/tests/important-selector.test.js index 22edafb94dd1..24533f02f34d 100644 --- a/tests/important-selector.test.js +++ b/tests/important-selector.test.js @@ -136,29 +136,29 @@ crosscheck(({ stable, oxide }) => { #app :is(.group:hover .group-hover\:focus-within\:text-left:focus-within) { text-align: left; } - #app :is(:is([dir='rtl'] .rtl\:active\:text-center:active)) { - text-align: center; - } @media (prefers-reduced-motion: no-preference) { #app :is(.motion-safe\:hover\:text-center:hover) { text-align: center; } } - #app :is(.dark .dark\:before\:underline):before { - content: var(--tw-content); - text-decoration-line: underline; - } - #app :is(:is(.dark .dark\:focus\:text-left:focus)) { - text-align: left; - } @media (min-width: 768px) { #app :is(.md\:hover\:text-right:hover) { text-align: right; } } + #app :is(:is(:where([dir='rtl']) .rtl\:active\:text-center:active)) { + text-align: center; + } + #app :is(:where(.dark) .dark\:before\:underline):before { + content: var(--tw-content); + text-decoration-line: underline; + } + #app :is(:is(:where(.dark) .dark\:focus\:text-left:focus)) { + text-align: left; + } #app :is( - [dir='rtl'] :is(.dark .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100) + :where([dir='rtl']) :is(:where(.dark) .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100) )::file-selector-button:hover { background-color: #000; } @@ -187,7 +187,7 @@ crosscheck(({ stable, oxide }) => { return run(input, config).then((result) => { stable.expect(result.css).toMatchFormattedCss(css` ${defaults} - #app :is(.dark .dark\:before\:bg-black)::before { + #app :is(:where(.dark) .dark\:before\:bg-black)::before { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); @@ -195,7 +195,7 @@ crosscheck(({ stable, oxide }) => { `) oxide.expect(result.css).toMatchFormattedCss(css` ${defaults} - #app :is(.dark .dark\:before\:bg-black)::before { + #app :is(:where(.dark) .dark\:before\:bg-black)::before { content: var(--tw-content); background-color: #000; } diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index 5923de27eb98..44665ffab4a6 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -305,7 +305,7 @@ crosscheck(({ stable, oxide }) => { } .drop-empty-rules:hover, .group:hover .apply-group, - :is(.dark .apply-dark-mode) { + :is(:where(.dark) .apply-dark-mode) { font-weight: 700; } .apply-with-existing:hover { @@ -340,7 +340,7 @@ crosscheck(({ stable, oxide }) => { .apply-order-b { margin: 1.5rem 1.25rem 1.25rem; } - :is(.dark .group:hover .apply-dark-group-example-a) { + :is(:where(.dark) .group:hover .apply-dark-group-example-a) { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } @@ -741,9 +741,6 @@ crosscheck(({ stable, oxide }) => { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } } - :is(.dark .dark\:custom-util) { - background: #abcdef; - } @media (min-width: 640px) { .sm\:text-center { text-align: center; @@ -788,9 +785,6 @@ crosscheck(({ stable, oxide }) => { transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } - :is(.dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active) { - background: #abcdef !important; - } } @media (min-width: 640px) { .md\:sm\:text-center { @@ -808,6 +802,16 @@ crosscheck(({ stable, oxide }) => { text-align: left; } } + :is(:where(.dark) .dark\:custom-util) { + background: #abcdef; + } + @media (min-width: 768px) { + @media (prefers-reduced-motion: no-preference) { + :is(:where(.dark) .md\:dark\:motion-safe\:foo\:active\:custom-util:active) { + background: #abcdef !important; + } + } + } `) oxide.expect(result.css).toMatchFormattedCss(css` .theme-test { @@ -874,7 +878,7 @@ crosscheck(({ stable, oxide }) => { } .drop-empty-rules:hover, .group:hover .apply-group, - :is(.dark .apply-dark-mode) { + :is(:where(.dark) .apply-dark-mode) { font-weight: 700; } .apply-with-existing:hover { @@ -908,7 +912,7 @@ crosscheck(({ stable, oxide }) => { .apply-order-b { margin: 1.5rem 1.25rem 1.25rem; } - :is(.dark .group:hover .apply-dark-group-example-a) { + :is(:where(.dark) .group:hover .apply-dark-group-example-a) { background-color: #22c55e; } @media (min-width: 640px) { @@ -1299,9 +1303,6 @@ crosscheck(({ stable, oxide }) => { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } } - :is(.dark .dark\:custom-util) { - background: #abcdef; - } @media (min-width: 640px) { .sm\:text-center { text-align: center; @@ -1346,9 +1347,6 @@ crosscheck(({ stable, oxide }) => { transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } - :is(.dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active) { - background: #abcdef !important; - } } @media (min-width: 640px) { .md\:sm\:text-center { @@ -1366,6 +1364,15 @@ crosscheck(({ stable, oxide }) => { text-align: left; } } + :is(:where(.dark) .dark\:custom-util) { + background: #abcdef; + } + @media (min-width: 768px) { + @media (prefers-reduced-motion: no-preference) { + :is(:where(.dark) .md\:dark\:motion-safe\:foo\:active\:custom-util:active) { + background: #abcdef !important; + } + } `) }) }) diff --git a/tests/prefix.test.js b/tests/prefix.test.js index cf5085509d7a..a1fb6733ebc8 100644 --- a/tests/prefix.test.js +++ b/tests/prefix.test.js @@ -128,7 +128,7 @@ crosscheck(({ stable, oxide }) => { .custom-component { font-weight: 700; } - :is(.tw-dark .tw-group:hover .custom-component) { + :is(:where(.tw-dark) .tw-group:hover .custom-component) { font-weight: 400; } .tw--ml-4 { @@ -155,21 +155,11 @@ crosscheck(({ stable, oxide }) => { .tw-group:hover .group-hover\:focus-within\:tw-text-left:focus-within { text-align: left; } - :is([dir='rtl'] .rtl\:active\:tw-text-center:active) { - text-align: center; - } @media (prefers-reduced-motion: no-preference) { .motion-safe\:hover\:tw-text-center:hover { text-align: center; } } - :is(.tw-dark .dark\:tw-bg-\[rgb\(255\,0\,0\)\]) { - --tw-bg-opacity: 1; - background-color: rgb(255 0 0 / var(--tw-bg-opacity)); - } - :is(.tw-dark .dark\:focus\:tw-text-left:focus) { - text-align: left; - } @media (min-width: 768px) { .md\:tw--ml-5 { margin-left: -1.25rem; @@ -181,6 +171,16 @@ crosscheck(({ stable, oxide }) => { text-align: right; } } + :is(:where([dir='rtl']) .rtl\:active\:tw-text-center:active) { + text-align: center; + } + :is(:where(.tw-dark) .dark\:tw-bg-\[rgb\(255\,0\,0\)\]) { + --tw-bg-opacity: 1; + background-color: rgb(255 0 0 / var(--tw-bg-opacity)); + } + :is(:where(.tw-dark) .dark\:focus\:tw-text-left:focus) { + text-align: left; + } `) }) }) diff --git a/tests/util/apply-important-selector.test.js b/tests/util/apply-important-selector.test.js index 3f4ef294c92f..cc2cacf524fd 100644 --- a/tests/util/apply-important-selector.test.js +++ b/tests/util/apply-important-selector.test.js @@ -13,8 +13,8 @@ crosscheck(() => { ${'.foo::file-selector-button'} | ${'#app :is(.foo)::file-selector-button'} ${'.foo::-webkit-progress-bar'} | ${'#app :is(.foo)::-webkit-progress-bar'} ${'.foo:hover::before'} | ${'#app :is(.foo:hover)::before'} - ${':is(.dark :is([dir="rtl"] .foo::before))'} | ${'#app :is(.dark :is([dir="rtl"] .foo))::before'} - ${':is(.dark .foo) .bar'} | ${'#app :is(:is(.dark .foo) .bar)'} + ${':is(:where(.dark) :is(:where([dir="rtl"]) .foo::before))'} | ${'#app :is(:where(.dark) :is(:where([dir="rtl"]) .foo))::before'} + ${':is(:where(.dark) .foo) .bar'} | ${'#app :is(:is(:where(.dark) .foo) .bar)'} ${':is(.foo) :is(.bar)'} | ${'#app :is(:is(.foo) :is(.bar))'} ${':is(.foo)::before'} | ${'#app :is(.foo)::before'} ${'.foo:before'} | ${'#app :is(.foo):before'} diff --git a/tests/variants.oxide.test.css b/tests/variants.oxide.test.css index 5e06f3942492..2aaab5e70730 100644 --- a/tests/variants.oxide.test.css +++ b/tests/variants.oxide.test.css @@ -285,9 +285,7 @@ .peer:enabled ~ .peer-enabled\:shadow-md, .peer:disabled ~ .peer-disabled\:shadow-md, .peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:shadow-md, -.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md:first-child, -:is([dir='ltr'] .ltr\:shadow-md), -:is([dir='rtl'] .rtl\:shadow-md) { +.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md:first-child { --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), @@ -321,14 +319,6 @@ background-color: #fde047; } } -:is(.dark .dark\:shadow-md), -:is(.dark .group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md), -:is(.dark .peer:disabled:focus:hover ~ .dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md) { - --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); -} @media print { .print\:bg-yellow-300 { background-color: #fde047; @@ -363,8 +353,7 @@ .lg\:animate-spin { animation: 1s linear infinite spin; } - .lg\:shadow-md, - :is(.dark .lg\:dark\:shadow-md) { + .lg\:shadow-md { --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); @@ -373,8 +362,7 @@ } } @media (min-width: 1280px) { - .xl\:shadow-md, - :is(.dark .xl\:dark\:disabled\:shadow-md:disabled) { + .xl\:shadow-md { --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); @@ -390,15 +378,6 @@ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - @media (prefers-reduced-motion: no-preference) { - :is(.dark .\32 xl\:dark\:motion-safe\:focus-within\:shadow-md:focus-within) { - --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), - 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); - } - } } @media (orientation: portrait) { .portrait\:bg-yellow-300 { @@ -410,3 +389,55 @@ background-color: #fde047; } } +:is(:where([dir="ltr"]) .ltr\:shadow-md), +:is(:where([dir="rtl"]) .rtl\:shadow-md), +:is(:where(.dark) .dark\:shadow-md), +:is( + :where(.dark) + .group:disabled:focus:hover + .dark\:group-disabled\:group-focus\:group-hover\:shadow-md + ), +:is( + :where(.dark) + .peer:disabled:focus:hover + ~ .dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md + ) { + --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +@media (min-width: 1024px) { + :is(:where(.dark) .lg\:dark\:shadow-md) { + --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} +@media (min-width: 1280px) { + :is(:where(.dark) .xl\:dark\:disabled\:shadow-md:disabled) { + --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} +@media (min-width: 1536px) { + @media (prefers-reduced-motion: no-preference) { + :is(:where(.dark) .\32 xl\:dark\:motion-safe\:focus-within\:shadow-md:focus-within) { + --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } + } +} +@media (forced-colors: active) { + .forced-colors\:flex { + display: flex; + } +} diff --git a/tests/variants.test.css b/tests/variants.test.css index cd2ec1dd7977..c2fadabcbab7 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -301,9 +301,7 @@ .peer:enabled ~ .peer-enabled\:shadow-md, .peer:disabled ~ .peer-disabled\:shadow-md, .peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:shadow-md, -.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md:first-child, -:is([dir='ltr'] .ltr\:shadow-md), -:is([dir='rtl'] .rtl\:shadow-md) { +.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md:first-child { --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), @@ -339,19 +337,6 @@ background-color: rgb(253 224 71 / var(--tw-bg-opacity)); } } -:is(.dark .dark\:shadow-md), -:is(.dark .group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md), -:is(.dark .peer:disabled:focus:hover ~ .dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md) { - --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); -} -@media (forced-colors: active) { - .forced-colors\:flex { - display: flex; - } -} @media print { .print\:bg-yellow-300 { --tw-bg-opacity: 1; @@ -387,8 +372,7 @@ .lg\:animate-spin { animation: 1s linear infinite spin; } - .lg\:shadow-md, - :is(.dark .lg\:dark\:shadow-md) { + .lg\:shadow-md { --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); @@ -397,8 +381,7 @@ } } @media (min-width: 1280px) { - .xl\:shadow-md, - :is(.dark .xl\:dark\:disabled\:shadow-md:disabled) { + .xl\:shadow-md { --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); @@ -414,15 +397,6 @@ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - @media (prefers-reduced-motion: no-preference) { - :is(.dark .\32 xl\:dark\:motion-safe\:focus-within\:shadow-md:focus-within) { - --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), - 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); - } - } } @media (orientation: portrait) { .portrait\:bg-yellow-300 { @@ -436,3 +410,55 @@ background-color: rgb(253 224 71 / var(--tw-bg-opacity)); } } +:is(:where([dir="ltr"]) .ltr\:shadow-md), +:is(:where([dir="rtl"]) .rtl\:shadow-md), +:is(:where(.dark) .dark\:shadow-md), +:is( + :where(.dark) + .group:disabled:focus:hover + .dark\:group-disabled\:group-focus\:group-hover\:shadow-md + ), +:is( + :where(.dark) + .peer:disabled:focus:hover + ~ .dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md + ) { + --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +@media (min-width: 1024px) { + :is(:where(.dark) .lg\:dark\:shadow-md) { + --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} +@media (min-width: 1280px) { + :is(:where(.dark) .xl\:dark\:disabled\:shadow-md:disabled) { + --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} +@media (min-width: 1536px) { + @media (prefers-reduced-motion: no-preference) { + :is(:where(.dark) .\32 xl\:dark\:motion-safe\:focus-within\:shadow-md:focus-within) { + --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } + } +} +@media (forced-colors: active) { + .forced-colors\:flex { + display: flex; + } +} \ No newline at end of file diff --git a/tests/variants.test.js b/tests/variants.test.js index 139d00ad8d62..14535dfd0ce1 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -1172,7 +1172,7 @@ crosscheck(({ stable, oxide }) => { let result = await run(input, config) expect(result.css).toMatchFormattedCss(css` - :is(.dark :is([dir='rtl'] .dark\:rtl\:italic)) { + :is(:where(.dark) :is(:where([dir='rtl']) .dark\:rtl\:italic)) { font-style: italic; } `) @@ -1196,7 +1196,7 @@ crosscheck(({ stable, oxide }) => { let result = await run(input, config) expect(result.css).toMatchFormattedCss(css` - :is(.dark :is([dir='rtl'] .dark\:rtl\:placeholder\:italic))::placeholder { + :is(:where(.dark) :is(:where([dir='rtl']) .dark\:rtl\:placeholder\:italic))::placeholder { font-style: italic; } `) From 8350cffdad34efb6625e0f2b0ff738edaf0d1cce Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 18 Dec 2023 12:32:34 -0500 Subject: [PATCH 24/24] 3.4.0 --- CHANGELOG.md | 5 ++++- package-lock.json | 4 ++-- package-lock.stable.json | 4 ++-- package.json | 2 +- package.stable.json | 2 +- standalone-cli/package-lock.json | 2 +- 6 files changed, 11 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ae682f777620..01f33ccdf79d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [3.4.0] - 2023-12-19 + ### Added - Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317)) @@ -2331,7 +2333,8 @@ No release notes - Everything! -[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.7...HEAD +[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.0...HEAD +[3.4.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.7...v3.4.0 [3.3.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.6...v3.3.7 [3.3.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.5...v3.3.6 [3.3.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.4...v3.3.5 diff --git a/package-lock.json b/package-lock.json index 79d5ffac9056..22e90644cad8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "tailwindcss", - "version": "3.3.7", + "version": "3.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "tailwindcss", - "version": "3.3.7", + "version": "3.4.0", "license": "MIT", "workspaces": [ "integrations/*", diff --git a/package-lock.stable.json b/package-lock.stable.json index 8d5a555afee3..8c2f5023a9d6 100644 --- a/package-lock.stable.json +++ b/package-lock.stable.json @@ -1,12 +1,12 @@ { "name": "tailwindcss", - "version": "3.3.7", + "version": "3.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "tailwindcss", - "version": "3.3.7", + "version": "3.4.0", "license": "MIT", "dependencies": { "@alloc/quick-lru": "^5.2.0", diff --git a/package.json b/package.json index 9c7590fe33c3..fee562349ead 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss", - "version": "3.3.7", + "version": "3.4.0", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "main": "lib/index.js", diff --git a/package.stable.json b/package.stable.json index ce3215c4066a..f5ef9ce064d1 100644 --- a/package.stable.json +++ b/package.stable.json @@ -1,6 +1,6 @@ { "name": "tailwindcss", - "version": "3.3.7", + "version": "3.4.0", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "main": "lib/index.js", diff --git a/standalone-cli/package-lock.json b/standalone-cli/package-lock.json index 7073bb61b7e9..4d4049dbc651 100644 --- a/standalone-cli/package-lock.json +++ b/standalone-cli/package-lock.json @@ -24,7 +24,7 @@ } }, "..": { - "version": "3.3.7", + "version": "3.4.0", "dev": true, "license": "MIT", "workspaces": [