Fix: Support arbitrary variants with >, *, + and ~ [publish]

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.2.2
+
+Fix: Support arbitrary variants with `>`, `*`, `+` and `~`
+
 ## 0.2.1
 
 esbuild plugin: Fix metafile output (remove map & update cssBundle prop)

bench/package.json

@@ -4,11 +4,11 @@
     "bench": "./gen.ts && cd fixtures && hyperfine --runs 5 'cd downwind && vite build' 'cd none && vite build' 'cd tailwindcss && vite build' 'cd unocss && vite build' 'cd windicss && vite build'"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.12",
     "tailwindcss": "^3.1.8",
-    "unocss": "^0.45.8",
-    "vite": "^3.0.9",
-    "vite-plugin-windicss": "^1.8.7",
+    "unocss": "^0.45.26",
+    "vite": "^3.1.6",
+    "vite-plugin-windicss": "^1.8.8",
     "windicss": "^3.5.6"
   }
 }

bench/results/2022-10-07.txt

@@ -0,0 +1,26 @@
+Benchmark 1: cd downwind && vite build
+  Time (mean ± σ):     436.5 ms ±   5.7 ms    [User: 468.7 ms, System: 67.7 ms]
+  Range (min … max):   428.7 ms … 444.4 ms    5 runs
+
+Benchmark 2: cd none && vite build
+  Time (mean ± σ):     319.5 ms ±  17.8 ms    [User: 307.1 ms, System: 45.6 ms]
+  Range (min … max):   308.6 ms … 350.8 ms    5 runs
+
+Benchmark 3: cd tailwindcss && vite build
+  Time (mean ± σ):      1.290 s ±  0.006 s    [User: 2.053 s, System: 0.142 s]
+  Range (min … max):    1.281 s …  1.297 s    5 runs
+
+Benchmark 4: cd unocss && vite build
+  Time (mean ± σ):     596.7 ms ±   8.1 ms    [User: 735.4 ms, System: 78.1 ms]
+  Range (min … max):   587.3 ms … 607.7 ms    5 runs
+
+Benchmark 5: cd windicss && vite build
+  Time (mean ± σ):      2.035 s ±  0.015 s    [User: 2.089 s, System: 0.091 s]
+  Range (min … max):    2.015 s …  2.054 s    5 runs
+
+Summary
+  'cd none && vite build' ran
+    1.37 ± 0.08 times faster than 'cd downwind && vite build'
+    1.87 ± 0.11 times faster than 'cd unocss && vite build'
+    4.04 ± 0.23 times faster than 'cd tailwindcss && vite build'
+    6.37 ± 0.36 times faster than 'cd windicss && vite build'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arnaud-barre/downwind",
   "description": "A PostCSS-less implementation of Tailwind based on Lightning CSS",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "license": "MIT",
   "scripts": {

src/index.ts

@@ -43,7 +43,7 @@ const arbitraryValueRE = /-\[.+]$/;
 const applyRE = /[{\s]@apply ([^;}\n]+)([;}\n])/g;
 const screenRE = /screen\(([a-z-]+)\)/g;
 const themeRE = /theme\("([^)]+)"\)/g;
-const validSelectorRE = /^[a-z0-9.:/_[\]!#%&()-]+$/;
+const validSelectorRE = /^[a-z0-9.:/_[\]!#%&>+~*()-]+$/;
 const arbitraryPropertyRE = /^\[[^[\]:]+:[^[\]:]+]$/;
 
 type Match = {
@@ -436,7 +436,7 @@ export const initDownwindWithConfig = ({
         path.endsWith(scannedExtension) || code.includes("@downwind-scan");
       if (!shouldScan) return false;
       const tokens = code
-        .split(/[\s'"`;>=]+/g)
+        .split(/[\s'"`;=]+/g)
         .filter((t) => validSelectorRE.test(t) && !blockList.has(t));
       let hasNew = false;
       for (const token of tokens) {

src/utils/print.ts

@@ -3,7 +3,7 @@ import type { Container, CSSEntries, RuleMeta } from "../types";
 import { Variant } from "../variants";
 
 export const escapeSelector = (selector: string) =>
-  selector.replace(/[.:/[\]!#%&()]/g, (c) => `\\${c}`);
+  selector.replace(/[.:/[\]!#%&>+~*()]/g, (c) => `\\${c}`);
 
 export const printBlock = (selector: string, lines: string[], indent = "") => {
   let output = `${indent}${selector} {\n`;

tests/generate.test.ts

@@ -80,7 +80,10 @@ const cases: [name: string, content: string, config?: UserConfig][] = [
   ],
   ["arbitrary-values-with-spaces", "grid grid-cols-[1fr_500px_2fr]"],
   ["arbitrary-properties", "[mask-type:luminance] hover:[mask-type:alpha]"],
-  ["arbitrary-variants", "[&:nth-child(3)]:underline"],
+  [
+    "arbitrary-variants",
+    "[html:has(&)]:bg-blue-500 [&:nth-child(3)]:underline [&>*]:p-4",
+  ],
   ["disable-rule", "p-4 m-4", { coreRules: { padding: false } }],
   [
     "disable-opacity",