From e12c062d248fb1d0f38a3da4975ff149e0b267f0 Mon Sep 17 00:00:00 2001 From: Kieran Date: Sat, 14 Jan 2023 15:41:31 +0000 Subject: [PATCH 1/3] Add support for min-height container queries --- src/index.ts | 77 +++++++++------- tests/index.test.ts | 216 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 258 insertions(+), 35 deletions(-) diff --git a/src/index.ts b/src/index.ts index 84b9869..369539b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,6 +11,45 @@ export = plugin( return parseFloat(value) } + const cbFor = + (selector: string) => + (value = '', extra: { modifier: string | null }) => { + const parsed = parseValue(value) + + return parsed !== null ? `@container ${extra.modifier ?? ''} (${selector}: ${value})` : [] + } + + const options = { + values, + sort( + aVariant: { value: string; modifier: string | null }, + zVariant: { value: string; modifier: string | null } + ) { + const a = parseFloat(aVariant.value) + const z = parseFloat(zVariant.value) + + if (a === null || z === null) return 0 + + // Sort values themselves regardless of unit + if (a - z !== 0) return a - z + + const aLabel = aVariant.modifier ?? '' + const zLabel = zVariant.modifier ?? '' + + // Explicitly move empty labels to the end + if (aLabel === '' && zLabel !== '') { + return 1 + } else if (aLabel !== '' && zLabel === '') { + return -1 + } + + // Sort labels alphabetically in the English locale + // We are intentionally overriding the locale because we do not want the sort to + // be affected by the machine's locale (be it a developer or CI environment) + return aLabel.localeCompare(zLabel, 'en', { numeric: true }) + }, + } + matchUtilities( { '@container': (value, { modifier }) => { @@ -29,41 +68,9 @@ export = plugin( } ) - matchVariant( - '@', - (value = '', { modifier }) => { - let parsed = parseValue(value) - - return parsed !== null ? `@container ${modifier ?? ''} (min-width: ${value})` : [] - }, - { - values, - sort(aVariant, zVariant) { - let a = parseFloat(aVariant.value) - let z = parseFloat(zVariant.value) - - if (a === null || z === null) return 0 - - // Sort values themselves regardless of unit - if (a - z !== 0) return a - z - - let aLabel = aVariant.modifier ?? '' - let zLabel = zVariant.modifier ?? '' - - // Explicitly move empty labels to the end - if (aLabel === '' && zLabel !== '') { - return 1 - } else if (aLabel !== '' && zLabel === '') { - return -1 - } - - // Sort labels alphabetically in the English locale - // We are intentionally overriding the locale because we do not want the sort to - // be affected by the machine's locale (be it a developer or CI environment) - return aLabel.localeCompare(zLabel, 'en', { numeric: true }) - }, - } - ) + matchVariant('@', cbFor('min-width'), options) + matchVariant('@w', cbFor('min-width'), options) + matchVariant('@h', cbFor('min-height'), options) }, { theme: { diff --git a/tests/index.test.ts b/tests/index.test.ts index 077b628..f40149b 100644 --- a/tests/index.test.ts +++ b/tests/index.test.ts @@ -14,6 +14,16 @@ it('container queries', () => {
+
+
+
+
+ +
+
+
+
+
@@ -30,6 +40,14 @@ it('container queries', () => {
+ +
+
+
+ +
+
+
`, }, @@ -163,6 +181,90 @@ it('container queries', () => { text-decoration-line: underline; } } + + @container (min-width: 123px) { + .\@w-\[123px\]\:underline { + text-decoration-line: underline; + } + } + + @container (min-width: 200rem) { + .\@w-\[200rem\]\:underline { + text-decoration-line: underline; + } + } + + @container (min-width: 312px) { + .\@w-\[312px\]\:underline { + text-decoration-line: underline; + } + } + + @container container1 (min-width: 768px) { + .\@w-md\/container1\:underline { + text-decoration-line: underline; + } + } + + @container container2 (min-width: 768px) { + .\@w-md\/container2\:underline { + text-decoration-line: underline; + } + } + + @container container10 (min-width: 768px) { + .\@w-md\/container10\:underline { + text-decoration-line: underline; + } + } + + @container (min-width: 768px) { + .\@w-md\:underline { + text-decoration-line: underline; + } + } + + @container (min-height: 123px) { + .\@h-\[123px\]\:underline { + text-decoration-line: underline; + } + } + + @container (min-height: 200rem) { + .\@h-\[200rem\]\:underline { + text-decoration-line: underline; + } + } + + @container (min-height: 312px) { + .\@h-\[312px\]\:underline { + text-decoration-line: underline; + } + } + + @container container1 (min-height: 768px) { + .\@h-md\/container1\:underline { + text-decoration-line: underline; + } + } + + @container container2 (min-height: 768px) { + .\@h-md\/container2\:underline { + text-decoration-line: underline; + } + } + + @container container10 (min-height: 768px) { + .\@h-md\/container10\:underline { + text-decoration-line: underline; + } + } + + @container (min-height: 768px) { + .\@h-md\:underline { + text-decoration-line: underline; + } + } `) }) }) @@ -181,6 +283,24 @@ it('should be possible to use default container queries', () => {
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
`, }, @@ -242,6 +362,102 @@ it('should be possible to use default container queries', () => { text-decoration-line: underline; } } + + @container (min-width: 20rem) { + .\@w-xs\:underline { + text-decoration-line: underline; + } + } + + @container (min-width: 24rem) { + .\@w-sm\:underline { + text-decoration-line: underline; + } + } + + @container (min-width: 28rem) { + .\@w-md\:underline { + text-decoration-line: underline; + } + } + + @container (min-width: 32rem) { + .\@w-lg\:underline { + text-decoration-line: underline; + } + } + + @container (min-width: 48rem) { + .\@w-3xl\:underline { + text-decoration-line: underline; + } + } + + @container (min-width: 64rem) { + .\@w-5xl\:underline { + text-decoration-line: underline; + } + } + + @container (min-width: 72rem) { + .\@w-6xl\:underline { + text-decoration-line: underline; + } + } + + @container (min-width: 80rem) { + .\@w-7xl\:underline { + text-decoration-line: underline; + } + } + + @container (min-height: 20rem) { + .\@h-xs\:underline { + text-decoration-line: underline; + } + } + + @container (min-height: 24rem) { + .\@h-sm\:underline { + text-decoration-line: underline; + } + } + + @container (min-height: 28rem) { + .\@h-md\:underline { + text-decoration-line: underline; + } + } + + @container (min-height: 32rem) { + .\@h-lg\:underline { + text-decoration-line: underline; + } + } + + @container (min-height: 48rem) { + .\@h-3xl\:underline { + text-decoration-line: underline; + } + } + + @container (min-height: 64rem) { + .\@h-5xl\:underline { + text-decoration-line: underline; + } + } + + @container (min-height: 72rem) { + .\@h-6xl\:underline { + text-decoration-line: underline; + } + } + + @container (min-height: 80rem) { + .\@h-7xl\:underline { + text-decoration-line: underline; + } + } `) }) }) From e695e26a963d2eb50426af86aeaef2b22de359a9 Mon Sep 17 00:00:00 2001 From: Kieran Date: Sun, 15 Jan 2023 17:54:25 +0000 Subject: [PATCH 2/3] Switch to container-type: size by default --- src/index.ts | 3 ++- tests/index.test.ts | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/index.ts b/src/index.ts index 369539b..1a571d8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -61,7 +61,8 @@ export = plugin( }, { values: { - DEFAULT: 'inline-size', + DEFAULT: 'size', + 'inline-size': 'inline-size', normal: 'normal', }, modifiers: 'any', diff --git a/tests/index.test.ts b/tests/index.test.ts index f40149b..c0651f4 100644 --- a/tests/index.test.ts +++ b/tests/index.test.ts @@ -7,7 +7,7 @@ it('container queries', () => { { raw: html`
@@ -69,7 +69,7 @@ it('container queries', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` .\@container { - container-type: inline-size; + container-type: size; } .\@container-normal { @@ -77,7 +77,7 @@ it('container queries', () => { } .\@container\/sidebar { - container-type: inline-size; + container-type: size; container-name: sidebar; } From c8eae38b9bd435c9ab218763e79f976acf20d109 Mon Sep 17 00:00:00 2001 From: Kieran Date: Sun, 15 Jan 2023 18:51:07 +0000 Subject: [PATCH 3/3] Remove @ prefix from new variants --- src/index.ts | 4 +- tests/index.test.ts | 136 ++++++++++++++++++++++++-------------------- 2 files changed, 77 insertions(+), 63 deletions(-) diff --git a/src/index.ts b/src/index.ts index 1a571d8..7b54337 100644 --- a/src/index.ts +++ b/src/index.ts @@ -70,8 +70,8 @@ export = plugin( ) matchVariant('@', cbFor('min-width'), options) - matchVariant('@w', cbFor('min-width'), options) - matchVariant('@h', cbFor('min-height'), options) + matchVariant('container-min-w', cbFor('min-width'), options) + matchVariant('container-min-h', cbFor('min-height'), options) }, { theme: { diff --git a/tests/index.test.ts b/tests/index.test.ts index c0651f4..2798a50 100644 --- a/tests/index.test.ts +++ b/tests/index.test.ts @@ -14,15 +14,15 @@ it('container queries', () => {
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
@@ -41,13 +41,15 @@ it('container queries', () => {
-
-
-
+
+
+
+
-
-
-
+
+
+
+
`, }, @@ -182,86 +184,98 @@ it('container queries', () => { } } + @container container1 (min-width: 123px) { + .container-min-w-\[123px\]\/container1\:underline { + text-decoration-line: underline; + } + } + @container (min-width: 123px) { - .\@w-\[123px\]\:underline { + .container-min-w-\[123px\]\:underline { text-decoration-line: underline; } } @container (min-width: 200rem) { - .\@w-\[200rem\]\:underline { + .container-min-w-\[200rem\]\:underline { text-decoration-line: underline; } } @container (min-width: 312px) { - .\@w-\[312px\]\:underline { + .container-min-w-\[312px\]\:underline { text-decoration-line: underline; } } @container container1 (min-width: 768px) { - .\@w-md\/container1\:underline { + .container-min-w-md\/container1\:underline { text-decoration-line: underline; } } @container container2 (min-width: 768px) { - .\@w-md\/container2\:underline { + .container-min-w-md\/container2\:underline { text-decoration-line: underline; } } @container container10 (min-width: 768px) { - .\@w-md\/container10\:underline { + .container-min-w-md\/container10\:underline { text-decoration-line: underline; } } @container (min-width: 768px) { - .\@w-md\:underline { + .container-min-w-md\:underline { + text-decoration-line: underline; + } + } + + @container container1 (min-height: 123px) { + .container-min-h-\[123px\]\/container1\:underline { text-decoration-line: underline; } } @container (min-height: 123px) { - .\@h-\[123px\]\:underline { + .container-min-h-\[123px\]\:underline { text-decoration-line: underline; } } @container (min-height: 200rem) { - .\@h-\[200rem\]\:underline { + .container-min-h-\[200rem\]\:underline { text-decoration-line: underline; } } @container (min-height: 312px) { - .\@h-\[312px\]\:underline { + .container-min-h-\[312px\]\:underline { text-decoration-line: underline; } } @container container1 (min-height: 768px) { - .\@h-md\/container1\:underline { + .container-min-h-md\/container1\:underline { text-decoration-line: underline; } } @container container2 (min-height: 768px) { - .\@h-md\/container2\:underline { + .container-min-h-md\/container2\:underline { text-decoration-line: underline; } } @container container10 (min-height: 768px) { - .\@h-md\/container10\:underline { + .container-min-h-md\/container10\:underline { text-decoration-line: underline; } } @container (min-height: 768px) { - .\@h-md\:underline { + .container-min-h-md\:underline { text-decoration-line: underline; } } @@ -284,23 +298,23 @@ it('should be possible to use default container queries', () => {
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
`, }, @@ -364,97 +378,97 @@ it('should be possible to use default container queries', () => { } @container (min-width: 20rem) { - .\@w-xs\:underline { + .container-min-w-xs\:underline { text-decoration-line: underline; } } @container (min-width: 24rem) { - .\@w-sm\:underline { + .container-min-w-sm\:underline { text-decoration-line: underline; } } @container (min-width: 28rem) { - .\@w-md\:underline { + .container-min-w-md\:underline { text-decoration-line: underline; } } @container (min-width: 32rem) { - .\@w-lg\:underline { + .container-min-w-lg\:underline { text-decoration-line: underline; } } @container (min-width: 48rem) { - .\@w-3xl\:underline { + .container-min-w-3xl\:underline { text-decoration-line: underline; } } @container (min-width: 64rem) { - .\@w-5xl\:underline { + .container-min-w-5xl\:underline { text-decoration-line: underline; } } @container (min-width: 72rem) { - .\@w-6xl\:underline { + .container-min-w-6xl\:underline { text-decoration-line: underline; } } @container (min-width: 80rem) { - .\@w-7xl\:underline { + .container-min-w-7xl\:underline { text-decoration-line: underline; } } @container (min-height: 20rem) { - .\@h-xs\:underline { + .container-min-h-xs\:underline { text-decoration-line: underline; } } @container (min-height: 24rem) { - .\@h-sm\:underline { + .container-min-h-sm\:underline { text-decoration-line: underline; } } @container (min-height: 28rem) { - .\@h-md\:underline { + .container-min-h-md\:underline { text-decoration-line: underline; } } @container (min-height: 32rem) { - .\@h-lg\:underline { + .container-min-h-lg\:underline { text-decoration-line: underline; } } @container (min-height: 48rem) { - .\@h-3xl\:underline { + .container-min-h-3xl\:underline { text-decoration-line: underline; } } @container (min-height: 64rem) { - .\@h-5xl\:underline { + .container-min-h-5xl\:underline { text-decoration-line: underline; } } @container (min-height: 72rem) { - .\@h-6xl\:underline { + .container-min-h-6xl\:underline { text-decoration-line: underline; } } @container (min-height: 80rem) { - .\@h-7xl\:underline { + .container-min-h-7xl\:underline { text-decoration-line: underline; } }