From 88bebcf570292b1f2d624de04a513045f6fe6498 Mon Sep 17 00:00:00 2001 From: Sascha Tandel Date: Mon, 12 Dec 2022 16:48:43 +0100 Subject: [PATCH] fix: add only variant and use pseudo element for before and after --- .changeset/dry-zebras-greet.md | 5 +++ packages/core/src/tests/consume.test.ts | 6 ++-- packages/core/src/tests/extract.test.ts | 2 +- packages/core/src/tests/inline.test.ts | 2 +- .../src/__snapshots__/enumerate.test.ts.snap | 11 ++---- .../src/__snapshots__/suggest-at.test.ts.snap | 36 ++++++------------- .../src/__snapshots__/suggest.test.ts.snap | 4 --- packages/intellisense/src/suggest.test.ts | 2 +- packages/preset-tailwind/src/rules.test.json | 8 ++--- packages/preset-tailwind/src/variants.ts | 19 +++------- 10 files changed, 33 insertions(+), 62 deletions(-) create mode 100644 .changeset/dry-zebras-greet.md diff --git a/.changeset/dry-zebras-greet.md b/.changeset/dry-zebras-greet.md new file mode 100644 index 000000000..514503237 --- /dev/null +++ b/.changeset/dry-zebras-greet.md @@ -0,0 +1,5 @@ +--- +'@twind/preset-tailwind': patch +--- + +add `only` variant diff --git a/packages/core/src/tests/consume.test.ts b/packages/core/src/tests/consume.test.ts index 19b3b4e87..d43447b85 100644 --- a/packages/core/src/tests/consume.test.ts +++ b/packages/core/src/tests/consume.test.ts @@ -40,7 +40,7 @@ test('expand class names', () => { '.items-center{align-items:center}', '.justify-center{justify-content:center}', '.text-center{text-align:center}', - ".after\\:content-\\[\\'xxx\\'\\]:after{--tw-content:'xxx';content:var(--tw-content)}", + ".after\\:content-\\[\\'xxx\\'\\]::after{--tw-content:'xxx';content:var(--tw-content)}", '@media (min-width:640px){.sm\\:text-gray-800{--tw-text-opacity:1;color:rgba(31,41,55,var(--tw-text-opacity))}}', '@media (min-width:768px){.md\\:text-pink-700{--tw-text-opacity:1;color:rgba(190,24,93,var(--tw-text-opacity))}}', ]) @@ -153,7 +153,7 @@ test('handles escaped chars by react', () => { assert.deepEqual(tw.target, [ '.flex{display:flex}', '.flex-col{flex-direction:column}', - ".before\\:content-\\[\\'x\\'\\]:before{--tw-content:'x';content:var(--tw-content)}", - '.before\\:content-\\[\\"y\\"\\]:before{--tw-content:"y";content:var(--tw-content)}', + ".before\\:content-\\[\\'x\\'\\]::before{--tw-content:'x';content:var(--tw-content)}", + '.before\\:content-\\[\\"y\\"\\]::before{--tw-content:"y";content:var(--tw-content)}', ]) }) diff --git a/packages/core/src/tests/extract.test.ts b/packages/core/src/tests/extract.test.ts index 6552139ef..16bd2c3e0 100644 --- a/packages/core/src/tests/extract.test.ts +++ b/packages/core/src/tests/extract.test.ts @@ -42,7 +42,7 @@ test('expand class names', () => { '.items-center{align-items:center}', '.justify-center{justify-content:center}', '.text-center{text-align:center}', - ".after\\:content-\\[\\'xxx\\'\\]:after{--tw-content:'xxx';content:var(--tw-content)}", + ".after\\:content-\\[\\'xxx\\'\\]::after{--tw-content:'xxx';content:var(--tw-content)}", '@media (min-width:640px){.sm\\:text-gray-800{--tw-text-opacity:1;color:rgba(31,41,55,var(--tw-text-opacity))}}', '@media (min-width:768px){.md\\:text-pink-700{--tw-text-opacity:1;color:rgba(190,24,93,var(--tw-text-opacity))}}', ].join(''), diff --git a/packages/core/src/tests/inline.test.ts b/packages/core/src/tests/inline.test.ts index 810215876..8b00bd38e 100644 --- a/packages/core/src/tests/inline.test.ts +++ b/packages/core/src/tests/inline.test.ts @@ -34,7 +34,7 @@ test('expand class names', () => { - +

diff --git a/packages/intellisense/src/__snapshots__/enumerate.test.ts.snap b/packages/intellisense/src/__snapshots__/enumerate.test.ts.snap index 525d592c7..0c3ed3a32 100644 --- a/packages/intellisense/src/__snapshots__/enumerate.test.ts.snap +++ b/packages/intellisense/src/__snapshots__/enumerate.test.ts.snap @@ -24,8 +24,8 @@ exports[`enumerate 1`] = ` "even:", "file:", "first-child:", - "first-line:", "first-letter:", + "first-line:", "first-of-type:", "first:", "focus-within:", @@ -33,8 +33,6 @@ exports[`enumerate 1`] = ` "focus:", "fullscreen:", "group-active:", - "group-after:", - "group-before:", "group-checked:", "group-default:", "group-defined:", @@ -42,13 +40,11 @@ exports[`enumerate 1`] = ` "group-empty:", "group-enabled:", "group-even:", - "group-first:", "group-focus:", "group-fullscreen:", "group-hover:", "group-indeterminate:", "group-invalid:", - "group-last:", "group-link:", "group-odd:", "group-open:", @@ -90,13 +86,12 @@ exports[`enumerate 1`] = ` "odd:", "only-child:", "only-of-type:", + "only:", "open:", "optional:", "out-of-range:", "paused:", "peer-active:", - "peer-after:", - "peer-before:", "peer-checked:", "peer-default:", "peer-defined:", @@ -104,13 +99,11 @@ exports[`enumerate 1`] = ` "peer-empty:", "peer-enabled:", "peer-even:", - "peer-first:", "peer-focus:", "peer-fullscreen:", "peer-hover:", "peer-indeterminate:", "peer-invalid:", - "peer-last:", "peer-link:", "peer-odd:", "peer-open:", diff --git a/packages/intellisense/src/__snapshots__/suggest-at.test.ts.snap b/packages/intellisense/src/__snapshots__/suggest-at.test.ts.snap index c0cae2f39..0efce08be 100644 --- a/packages/intellisense/src/__snapshots__/suggest-at.test.ts.snap +++ b/packages/intellisense/src/__snapshots__/suggest-at.test.ts.snap @@ -353,17 +353,13 @@ exports[`suggestAt html 4`] = ` "defined:", "default:", "checked:", - "before:", "any-link:", - "after:", "active:", "dark:", "ltr:", "rtl:", "group-active:", - "group-after:", "group-any-link:", - "group-before:", "group-checked:", "group-default:", "group-defined:", @@ -373,7 +369,6 @@ exports[`suggestAt html 4`] = ` "group-even:", "group-first-child:", "group-first-of-type:", - "group-first:", "group-focus-visible:", "group-focus-within:", "group-focus:", @@ -384,7 +379,6 @@ exports[`suggestAt html 4`] = ` "group-invalid:", "group-last-child:", "group-last-of-type:", - "group-last:", "group-link:", "group-odd:", "group-only-child:", @@ -403,9 +397,7 @@ exports[`suggestAt html 4`] = ` "group-valid:", "group-visited:", "peer-active:", - "peer-after:", "peer-any-link:", - "peer-before:", "peer-checked:", "peer-default:", "peer-defined:", @@ -415,7 +407,6 @@ exports[`suggestAt html 4`] = ` "peer-even:", "peer-first-child:", "peer-first-of-type:", - "peer-first:", "peer-focus-visible:", "peer-focus-within:", "peer-focus:", @@ -426,7 +417,6 @@ exports[`suggestAt html 4`] = ` "peer-invalid:", "peer-last-child:", "peer-last-of-type:", - "peer-last:", "peer-link:", "peer-odd:", "peer-only-child:", @@ -447,15 +437,18 @@ exports[`suggestAt html 4`] = ` "open:", "odd:", "even:", - "last:", "first:", - "backdrop:", - "placeholder:", + "last:", + "only:", "file:", - "first-line:", - "first-letter:", - "selection:", "marker:", + "selection:", + "after:", + "backdrop:", + "before:", + "first-letter:", + "first-line:", + "placeholder:", "contrast-less:", "contrast-more:", "landscape:", @@ -495,8 +488,8 @@ exports[`suggestAt html 5`] = ` "even:", "file:", "first-child:", - "first-line:", "first-letter:", + "first-line:", "first-of-type:", "first:", "focus-within:", @@ -504,8 +497,6 @@ exports[`suggestAt html 5`] = ` "focus:", "fullscreen:", "group-active:", - "group-after:", - "group-before:", "group-checked:", "group-default:", "group-defined:", @@ -513,13 +504,11 @@ exports[`suggestAt html 5`] = ` "group-empty:", "group-enabled:", "group-even:", - "group-first:", "group-focus:", "group-fullscreen:", "group-hover:", "group-indeterminate:", "group-invalid:", - "group-last:", "group-link:", "group-odd:", "group-open:", @@ -561,13 +550,12 @@ exports[`suggestAt html 5`] = ` "odd:", "only-child:", "only-of-type:", + "only:", "open:", "optional:", "out-of-range:", "paused:", "peer-active:", - "peer-after:", - "peer-before:", "peer-checked:", "peer-default:", "peer-defined:", @@ -575,13 +563,11 @@ exports[`suggestAt html 5`] = ` "peer-empty:", "peer-enabled:", "peer-even:", - "peer-first:", "peer-focus:", "peer-fullscreen:", "peer-hover:", "peer-indeterminate:", "peer-invalid:", - "peer-last:", "peer-link:", "peer-odd:", "peer-open:", diff --git a/packages/intellisense/src/__snapshots__/suggest.test.ts.snap b/packages/intellisense/src/__snapshots__/suggest.test.ts.snap index ca28e887b..0749afc6a 100644 --- a/packages/intellisense/src/__snapshots__/suggest.test.ts.snap +++ b/packages/intellisense/src/__snapshots__/suggest.test.ts.snap @@ -118,8 +118,6 @@ exports[`suggest with single char input 1`] = ` "focus:", "fullscreen:", "group-active:", - "group-after:", - "group-before:", "group-checked:", "group-default:", "group-defined:", @@ -127,13 +125,11 @@ exports[`suggest with single char input 1`] = ` "group-empty:", "group-enabled:", "group-even:", - "group-first:", "group-focus:", "group-fullscreen:", "group-hover:", "group-indeterminate:", "group-invalid:", - "group-last:", "group-link:", "group-odd:", "group-open:", diff --git a/packages/intellisense/src/suggest.test.ts b/packages/intellisense/src/suggest.test.ts index 63443643e..f57cc5c8f 100644 --- a/packages/intellisense/src/suggest.test.ts +++ b/packages/intellisense/src/suggest.test.ts @@ -16,7 +16,7 @@ const $ = (suggestions: Promise) => suggestions.then((suggestions) => suggestions.map(({ value }) => value)) test('suggest with empty input', async () => { - await expect(intellisense.suggest('')).resolves.toHaveLength(14687) + await expect(intellisense.suggest('')).resolves.toHaveLength(14680) }) test('suggest with single char input', async () => { diff --git a/packages/preset-tailwind/src/rules.test.json b/packages/preset-tailwind/src/rules.test.json index b676b8ac3..a66d7d376 100644 --- a/packages/preset-tailwind/src/rules.test.json +++ b/packages/preset-tailwind/src/rules.test.json @@ -1899,12 +1899,12 @@ "scroll-auto": ".scroll-auto{scroll-behavior:auto}", "scroll-smooth": ".scroll-smooth{scroll-behavior:smooth}", "content-none": ".content-none{--tw-content:none;content:var(--tw-content)}", - "after:content-['_↗']": ".after\\:content-\\[\\'_↗\\'\\]:after{--tw-content:' ↗';content:var(--tw-content)}", - "before:content-[attr(before)]": ".before\\:content-\\[attr\\(before\\)\\]:before{--tw-content:attr(before);content:var(--tw-content)}", + "after:content-['_↗']": ".after\\:content-\\[\\'_↗\\'\\]::after{--tw-content:' ↗';content:var(--tw-content)}", + "before:content-[attr(before)]": ".before\\:content-\\[attr\\(before\\)\\]::before{--tw-content:attr(before);content:var(--tw-content)}", "grid-cols-[1fr_500px_2fr]": ".grid-cols-\\[1fr_500px_2fr\\]{grid-template-columns:1fr 500px 2fr}", "bg-[url('/what_a_rush.png')]": ".bg-\\[url\\(\\'\\/what_a_rush\\.png\\'\\)\\]{background-image:url('/what_a_rush.png')}", - "after:content-['__↗__\\_']": ".after\\:content-\\[\\'__↗__\\\\_\\'\\]:after{--tw-content:' ↗ _';content:var(--tw-content)}", - "after:content-['_']": ".after\\:content-\\[\\'_\\'\\]:after{--tw-content:' ';content:var(--tw-content)}", + "after:content-['__↗__\\_']": ".after\\:content-\\[\\'__↗__\\\\_\\'\\]::after{--tw-content:' ↗ _';content:var(--tw-content)}", + "after:content-['_']": ".after\\:content-\\[\\'_\\'\\]::after{--tw-content:' ';content:var(--tw-content)}", "[mask-type:luminance] hover:[mask-type:alpha]": [ ".\\[mask-type\\:luminance\\]{mask-type:luminance}", ".hover\\:\\[mask-type\\:alpha\\]:hover{mask-type:alpha}" diff --git a/packages/preset-tailwind/src/variants.ts b/packages/preset-tailwind/src/variants.ts index 2d6083298..a1076a9e8 100644 --- a/packages/preset-tailwind/src/variants.ts +++ b/packages/preset-tailwind/src/variants.ts @@ -26,23 +26,14 @@ const variants: Variant[] = [ ['motion-reduce', '@media (prefers-reduced-motion:reduce)'], ['motion-safe', '@media (prefers-reduced-motion:no-preference)'], ['print', '@media print'], - ['portrait', '@media (orientation:portrait)'], - ['landscape', '@media (orientation:landscape)'], - ['contrast-more', '@media (prefers-contrast:more)'], - ['contrast-less', '@media (prefers-contrast:less)'], + ['(portrait|landscape)', ({ 1: $1 }) => `@media (orientation:${$1})`], + ['contrast-(more|less)', ({ 1: $1 }) => `@media (prefers-contrast:${$1})`], - ['marker', '& *::marker,&::marker'], - ['selection', '& *::selection,&::selection'], - - // TODO: use pseudoElement helper? - ['first-letter', '&::first-letter'], - ['first-line', '&::first-line'], + ['(first-(letter|line)|placeholder|backdrop|before|after)', ({ 1: $1 }) => `&::${$1}`], + ['(marker|selection)', ({ 1: $1 }) => `& *::${$1},&::${$1}`], ['file', '&::file-selector-button'], - ['placeholder', '&::placeholder'], - ['backdrop', '&::backdrop'], - ['first', '&:first-child'], - ['last', '&:last-child'], + ['(first|last|only)', ({ 1: $1 }) => `&:${$1}-child`], ['even', '&:nth-child(2n)'], ['odd', '&:nth-child(odd)'],