From 77c415645b1b9d2c41f326b156c742a02fa0423d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arnaud=20Barr=C3=A9?= Date: Fri, 7 Oct 2022 12:19:48 +0200 Subject: [PATCH] Fix: Support arbitrary variants with `>`, `*`, `+` and `~` [publish] --- CHANGELOG.md | 4 ++++ bench/package.json | 8 ++++---- bench/results/2022-10-07.txt | 26 ++++++++++++++++++++++++++ package.json | 2 +- src/index.ts | 4 ++-- src/utils/print.ts | 2 +- tests/generate.test.ts | 5 ++++- tests/snapshots/generate.css | 9 ++++++++- 8 files changed, 50 insertions(+), 10 deletions(-) create mode 100644 bench/results/2022-10-07.txt diff --git a/CHANGELOG.md b/CHANGELOG.md index ecb4745..308d326 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/bench/package.json b/bench/package.json index 6255867..54ae8b1 100644 --- a/bench/package.json +++ b/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" } } diff --git a/bench/results/2022-10-07.txt b/bench/results/2022-10-07.txt new file mode 100644 index 0000000..1a2dacb --- /dev/null +++ b/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' diff --git a/package.json b/package.json index f5cd489..662700e 100644 --- a/package.json +++ b/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": { diff --git a/src/index.ts b/src/index.ts index 7ddf910..d9b9a65 100644 --- a/src/index.ts +++ b/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) { diff --git a/src/utils/print.ts b/src/utils/print.ts index 8538a56..c5c1cc5 100644 --- a/src/utils/print.ts +++ b/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`; diff --git a/tests/generate.test.ts b/tests/generate.test.ts index 3cb9a2f..9d793cf 100644 --- a/tests/generate.test.ts +++ b/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", diff --git a/tests/snapshots/generate.css b/tests/snapshots/generate.css index 842acc4..614216b 100644 --- a/tests/snapshots/generate.css +++ b/tests/snapshots/generate.css @@ -326,7 +326,14 @@ mask-type:alpha } -/* arbitrary-variants: [&:nth-child(3)]:underline */ +/* arbitrary-variants: [html:has(&)]:bg-blue-500 [&:nth-child(3)]:underline [&>*]:p-4 */ +.html:has(\[html\:has\(\&\)\]\:bg-blue-500) { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} +.\[\&\>\*\]\:p-4>* { + padding: 1rem; +} .\[\&\:nth-child\(3\)\]\:underline:nth-child(3) { text-decoration-line: underline; }