fix: add only variant and use pseudo element for before and after

tw-in-js · Dec 12, 2022 · 88bebcf · 88bebcf
1 parent bbf6edf
commit 88bebcf
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 62 deletions.
diff --git a/.changeset/dry-zebras-greet.md 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
@@ -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
@@ -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
@@ -34,7 +34,7 @@ test('expand class names', () => {
       <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <style data-twind>/*!dbgidc,t,text-white*/.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}/*!dbgidc,v,flex*/.flex{display:flex}/*!dbgidc,v,h-screen*/.h-screen{height:100vh}/*!dbgidc,w,bg-purple-400*/.bg-purple-400{--tw-bg-opacity:1;background-color:rgba(192,132,252,var(--tw-bg-opacity))}/*!dbgidc,w,text-5xl*/.text-5xl{font-size:3rem;line-height:1}/*!dbgidc,y,font-bold*/.font-bold{font-weight:700}/*!dbgidc,y,font-sans*/.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"}/*!dbgidc,y,items-center*/.items-center{align-items:center}/*!dbgidc,y,justify-center*/.justify-center{justify-content:center}/*!dbgidc,y,text-center*/.text-center{text-align:center}/*!dbjbi8,t,after:content-['xxx']*/.after\\:content-\\[\\'xxx\\'\\]:after{--tw-content:'xxx';content:var(--tw-content)}/*!eupiio,t,sm:text-gray-800*/@media (min-width:640px){.sm\\:text-gray-800{--tw-text-opacity:1;color:rgba(31,41,55,var(--tw-text-opacity))}}/*!ex7ev4,t,md:text-pink-700*/@media (min-width:768px){.md\\:text-pink-700{--tw-text-opacity:1;color:rgba(190,24,93,var(--tw-text-opacity))}}</style></head>
+      <style data-twind>/*!dbgidc,t,text-white*/.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}/*!dbgidc,v,flex*/.flex{display:flex}/*!dbgidc,v,h-screen*/.h-screen{height:100vh}/*!dbgidc,w,bg-purple-400*/.bg-purple-400{--tw-bg-opacity:1;background-color:rgba(192,132,252,var(--tw-bg-opacity))}/*!dbgidc,w,text-5xl*/.text-5xl{font-size:3rem;line-height:1}/*!dbgidc,y,font-bold*/.font-bold{font-weight:700}/*!dbgidc,y,font-sans*/.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"}/*!dbgidc,y,items-center*/.items-center{align-items:center}/*!dbgidc,y,justify-center*/.justify-center{justify-content:center}/*!dbgidc,y,text-center*/.text-center{text-align:center}/*!dbjbi8,t,after:content-['xxx']*/.after\\:content-\\[\\'xxx\\'\\]::after{--tw-content:'xxx';content:var(--tw-content)}/*!eupiio,t,sm:text-gray-800*/@media (min-width:640px){.sm\\:text-gray-800{--tw-text-opacity:1;color:rgba(31,41,55,var(--tw-text-opacity))}}/*!ex7ev4,t,md:text-pink-700*/@media (min-width:768px){.md\\:text-pink-700{--tw-text-opacity:1;color:rgba(190,24,93,var(--tw-text-opacity))}}</style></head>
       <body>
         <main class='h-screen bg-purple-400 flex items-center justify-center'>
           <h1 class="text-white text-5xl font-bold text-center after:content-['xxx'] sm:text-gray-800 md:text-pink-700">

diff --git a/packages/intellisense/src/__snapshots__/enumerate.test.ts.snap b/packages/intellisense/src/__snapshots__/enumerate.test.ts.snap
@@ -24,31 +24,27 @@ exports[`enumerate 1`] = `
   "even:",
   "file:",
   "first-child:",
-  "first-line:",
   "first-letter:",
+  "first-line:",
   "first-of-type:",
   "first:",
   "focus-within:",
   "focus-visible:",
   "focus:",
   "fullscreen:",
   "group-active:",
-  "group-after:",
-  "group-before:",
   "group-checked:",
   "group-default:",
   "group-defined:",
   "group-disabled:",
   "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,27 +86,24 @@ 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:",
   "peer-disabled:",
   "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
@@ -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,31 +488,27 @@ exports[`suggestAt html 5`] = `
     "even:",
     "file:",
     "first-child:",
-    "first-line:",
     "first-letter:",
+    "first-line:",
     "first-of-type:",
     "first:",
     "focus-within:",
     "focus-visible:",
     "focus:",
     "fullscreen:",
     "group-active:",
-    "group-after:",
-    "group-before:",
     "group-checked:",
     "group-default:",
     "group-defined:",
     "group-disabled:",
     "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,27 +550,24 @@ 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:",
     "peer-disabled:",
     "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
@@ -118,22 +118,18 @@ exports[`suggest with single char input 1`] = `
   "focus:",
   "fullscreen:",
   "group-active:",
-  "group-after:",
-  "group-before:",
   "group-checked:",
   "group-default:",
   "group-defined:",
   "group-disabled:",
   "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
@@ -16,7 +16,7 @@ const $ = (suggestions: Promise<Suggestion[]>) =>
   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
@@ -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
@@ -26,23 +26,14 @@ const variants: Variant<TailwindTheme>[] = [
   ['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)'],