use oxide
- Setup the codebase to be able to use the Rust parts based on an environment variable: `OXIDE=1`. - Setup some tests that run both the non-Rust and Rust version in the same test. - Sort the candidates in a consistent way, to guarantee the order for now (especially in tests). - Reflect sorting related changes in tests. - Ensure tests run in both the Rust and non-Rust version. (Some tests are explicitly skipped when using the Rust version since we haven't implemented those features yet. These include: custom prefix, transformers and extractors). - `jest` -`OXIDE=1 jest`
This commit is contained in:
Robin Malfait
Adam Wathan
parent
c2c544e9f7
commit
337775da30
38 changed files with 2560 additions and 1237 deletions
251
package-lock.json
generated
251
package-lock.json
generated
|
|
@ -31,7 +31,8 @@
|
|||
"postcss-selector-parser": "^6.0.11",
|
||||
"postcss-value-parser": "^4.2.0",
|
||||
"quick-lru": "^5.1.1",
|
||||
"resolve": "^1.22.1"
|
||||
"resolve": "^1.22.1",
|
||||
"tailwind-oxide": "file:oxide/crates/node"
|
||||
},
|
||||
"bin": {
|
||||
"tailwind": "lib/cli.js",
|
||||
|
|
@ -43,6 +44,7 @@
|
|||
"@swc/jest": "^0.2.23",
|
||||
"@swc/register": "^0.1.10",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"concurrently": "^7.5.0",
|
||||
"cssnano": "^5.1.14",
|
||||
"esbuild": "^0.15.15",
|
||||
"eslint": "^8.27.0",
|
||||
|
|
@ -1305,6 +1307,22 @@
|
|||
"@jridgewell/sourcemap-codec": "^1.4.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/cli": {
|
||||
"version": "2.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/cli/-/cli-2.12.0.tgz",
|
||||
"integrity": "sha512-DWx9jDpun9JqDBypiXKjcYMm7gEnh83bry7b6UkItpmVE3w3tNrj91fOEPKDbFQZ7EULfFt+aQBbqtUHq5oNzQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"napi": "scripts/index.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/Brooooooklyn"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
|
|
@ -2409,6 +2427,48 @@
|
|||
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/concurrently": {
|
||||
"version": "7.5.0",
|
||||
"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.5.0.tgz",
|
||||
"integrity": "sha512-5E3mwiS+i2JYBzr5BpXkFxOnleZTMsG+WnE/dCG4/P+oiVXrbmrBwJ2ozn4SxwB2EZDrKR568X+puVohxz3/Mg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.0",
|
||||
"date-fns": "^2.29.1",
|
||||
"lodash": "^4.17.21",
|
||||
"rxjs": "^7.0.0",
|
||||
"shell-quote": "^1.7.3",
|
||||
"spawn-command": "^0.0.2-1",
|
||||
"supports-color": "^8.1.0",
|
||||
"tree-kill": "^1.2.2",
|
||||
"yargs": "^17.3.1"
|
||||
},
|
||||
"bin": {
|
||||
"conc": "dist/bin/concurrently.js",
|
||||
"concurrently": "dist/bin/concurrently.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^12.20.0 || ^14.13.0 || >=16.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/concurrently/node_modules/supports-color": {
|
||||
"version": "8.1.1",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
|
||||
"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has-flag": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/supports-color?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/convert-source-map": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
|
||||
|
|
@ -2584,6 +2644,19 @@
|
|||
"node": ">=8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "2.29.3",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
|
||||
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.11"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/date-fns"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
|
||||
|
|
@ -5138,6 +5211,12 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/lodash.clonedeep": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
|
||||
|
|
@ -6382,6 +6461,15 @@
|
|||
"queue-microtask": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/rxjs": {
|
||||
"version": "7.5.7",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.7.tgz",
|
||||
"integrity": "sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
|
|
@ -6418,6 +6506,15 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/shell-quote": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.4.tgz",
|
||||
"integrity": "sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw==",
|
||||
"dev": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/signal-exit": {
|
||||
"version": "3.0.7",
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
|
||||
|
|
@ -6466,6 +6563,12 @@
|
|||
"source-map": "^0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/spawn-command": {
|
||||
"version": "0.0.2-1",
|
||||
"resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
|
||||
"integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/sprintf-js": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||
|
|
@ -6642,6 +6745,10 @@
|
|||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwind-oxide": {
|
||||
"resolved": "oxide/crates/node",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/terminal-link": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
|
||||
|
|
@ -6693,6 +6800,21 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/tree-kill": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
|
||||
"integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"tree-kill": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
|
||||
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/type-detect": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
|
||||
|
|
@ -6906,6 +7028,35 @@
|
|||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"oxide-setup.js": {
|
||||
"extraneous": true
|
||||
},
|
||||
"oxide/crates/node": {
|
||||
"name": "tailwind-oxide",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@napi-rs/cli": "^2.12.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"tailwind-oxide-android-arm-eabi": "0.0.0",
|
||||
"tailwind-oxide-android-arm64": "0.0.0",
|
||||
"tailwind-oxide-darwin-arm64": "0.0.0",
|
||||
"tailwind-oxide-darwin-x64": "0.0.0",
|
||||
"tailwind-oxide-freebsd-x64": "0.0.0",
|
||||
"tailwind-oxide-linux-arm-gnueabihf": "0.0.0",
|
||||
"tailwind-oxide-linux-arm64-gnu": "0.0.0",
|
||||
"tailwind-oxide-linux-arm64-musl": "0.0.0",
|
||||
"tailwind-oxide-linux-x64-gnu": "0.0.0",
|
||||
"tailwind-oxide-linux-x64-musl": "0.0.0",
|
||||
"tailwind-oxide-win32-arm64-msvc": "0.0.0",
|
||||
"tailwind-oxide-win32-ia32-msvc": "0.0.0",
|
||||
"tailwind-oxide-win32-x64-msvc": "0.0.0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -7893,6 +8044,12 @@
|
|||
"@jridgewell/sourcemap-codec": "^1.4.10"
|
||||
}
|
||||
},
|
||||
"@napi-rs/cli": {
|
||||
"version": "2.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/cli/-/cli-2.12.0.tgz",
|
||||
"integrity": "sha512-DWx9jDpun9JqDBypiXKjcYMm7gEnh83bry7b6UkItpmVE3w3tNrj91fOEPKDbFQZ7EULfFt+aQBbqtUHq5oNzQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
|
|
@ -8680,6 +8837,34 @@
|
|||
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
|
||||
"dev": true
|
||||
},
|
||||
"concurrently": {
|
||||
"version": "7.5.0",
|
||||
"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.5.0.tgz",
|
||||
"integrity": "sha512-5E3mwiS+i2JYBzr5BpXkFxOnleZTMsG+WnE/dCG4/P+oiVXrbmrBwJ2ozn4SxwB2EZDrKR568X+puVohxz3/Mg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"date-fns": "^2.29.1",
|
||||
"lodash": "^4.17.21",
|
||||
"rxjs": "^7.0.0",
|
||||
"shell-quote": "^1.7.3",
|
||||
"spawn-command": "^0.0.2-1",
|
||||
"supports-color": "^8.1.0",
|
||||
"tree-kill": "^1.2.2",
|
||||
"yargs": "^17.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"supports-color": {
|
||||
"version": "8.1.1",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
|
||||
"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"convert-source-map": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
|
||||
|
|
@ -8805,6 +8990,12 @@
|
|||
"css-tree": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"date-fns": {
|
||||
"version": "2.29.3",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
|
||||
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
|
||||
"dev": true
|
||||
},
|
||||
"debug": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
|
||||
|
|
@ -10689,6 +10880,12 @@
|
|||
"p-locate": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.clonedeep": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
|
||||
|
|
@ -11502,6 +11699,15 @@
|
|||
"queue-microtask": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"rxjs": {
|
||||
"version": "7.5.7",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.7.tgz",
|
||||
"integrity": "sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
|
|
@ -11529,6 +11735,12 @@
|
|||
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
|
||||
"dev": true
|
||||
},
|
||||
"shell-quote": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.4.tgz",
|
||||
"integrity": "sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw==",
|
||||
"dev": true
|
||||
},
|
||||
"signal-exit": {
|
||||
"version": "3.0.7",
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
|
||||
|
|
@ -11568,6 +11780,12 @@
|
|||
"source-map": "^0.6.0"
|
||||
}
|
||||
},
|
||||
"spawn-command": {
|
||||
"version": "0.0.2-1",
|
||||
"resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
|
||||
"integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==",
|
||||
"dev": true
|
||||
},
|
||||
"sprintf-js": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||
|
|
@ -11694,6 +11912,25 @@
|
|||
"stable": "^0.1.8"
|
||||
}
|
||||
},
|
||||
"tailwind-oxide": {
|
||||
"version": "file:oxide/crates/node",
|
||||
"requires": {
|
||||
"@napi-rs/cli": "^2.12.0",
|
||||
"tailwind-oxide-android-arm-eabi": "0.0.0",
|
||||
"tailwind-oxide-android-arm64": "0.0.0",
|
||||
"tailwind-oxide-darwin-arm64": "0.0.0",
|
||||
"tailwind-oxide-darwin-x64": "0.0.0",
|
||||
"tailwind-oxide-freebsd-x64": "0.0.0",
|
||||
"tailwind-oxide-linux-arm-gnueabihf": "0.0.0",
|
||||
"tailwind-oxide-linux-arm64-gnu": "0.0.0",
|
||||
"tailwind-oxide-linux-arm64-musl": "0.0.0",
|
||||
"tailwind-oxide-linux-x64-gnu": "0.0.0",
|
||||
"tailwind-oxide-linux-x64-musl": "0.0.0",
|
||||
"tailwind-oxide-win32-arm64-msvc": "0.0.0",
|
||||
"tailwind-oxide-win32-ia32-msvc": "0.0.0",
|
||||
"tailwind-oxide-win32-x64-msvc": "0.0.0"
|
||||
}
|
||||
},
|
||||
"terminal-link": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
|
||||
|
|
@ -11733,6 +11970,18 @@
|
|||
"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
|
||||
"dev": true
|
||||
},
|
||||
"tree-kill": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
|
||||
"integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
|
||||
"dev": true
|
||||
},
|
||||
"tslib": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
|
||||
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
|
||||
"dev": true
|
||||
},
|
||||
"type-detect": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
|
||||
|
|
|
|||
17
package.json
17
package.json
|
|
@ -13,11 +13,19 @@
|
|||
"tailwindcss": "lib/cli.js"
|
||||
},
|
||||
"scripts": {
|
||||
<<<<<<< HEAD
|
||||
"prebuild": "npm run generate && rimraf lib",
|
||||
"build": "swc src --out-dir lib --copy-files",
|
||||
"postbuild": "esbuild lib/cli-peer-dependencies.js --bundle --platform=node --outfile=peers/index.js",
|
||||
"rebuild-fixtures": "npm run build && node -r @swc/register scripts/rebuildFixtures.js",
|
||||
"prepublishOnly": "npm install --force && npm run build",
|
||||
=======
|
||||
"preswcify": "npm run generate && rimraf lib",
|
||||
"swcify": "swc src --out-dir lib --copy-files",
|
||||
"postswcify": "esbuild lib/cli-peer-dependencies.js --bundle --platform=node --outfile=peers/index.js",
|
||||
"rebuild-fixtures": "npm run swcify && node -r @swc/register scripts/rebuildFixtures.js",
|
||||
"prepublishOnly": "npm install --force && npm run oxide:install --force && npm run oxide:build",
|
||||
>>>>>>> 593bb486 (use oxide)
|
||||
"style": "eslint .",
|
||||
"pretest": "npm run generate",
|
||||
"test": "jest",
|
||||
|
|
@ -27,7 +35,10 @@
|
|||
"generate:types": "node -r @swc/register scripts/generate-types.js",
|
||||
"generate": "npm run generate:plugin-list && npm run generate:types",
|
||||
"release-channel": "node ./scripts/release-channel.js",
|
||||
"release-notes": "node ./scripts/release-notes.js"
|
||||
"release-notes": "node ./scripts/release-notes.js",
|
||||
"oxide:install": "npm install --prefix ./oxide",
|
||||
"oxide:dev": "concurrently -n tailwind,oxide-node -c green,yellow 'npm run swcify -- --watch' 'npm run --prefix ./oxide dev:node'",
|
||||
"oxide:build": "npm run --prefix ./oxide build:node && npm run swcify"
|
||||
},
|
||||
"files": [
|
||||
"src/*",
|
||||
|
|
@ -48,6 +59,7 @@
|
|||
"@swc/jest": "^0.2.23",
|
||||
"@swc/register": "^0.1.10",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"concurrently": "^7.5.0",
|
||||
"cssnano": "^5.1.14",
|
||||
"esbuild": "^0.15.15",
|
||||
"eslint": "^8.27.0",
|
||||
|
|
@ -85,7 +97,8 @@
|
|||
"postcss-selector-parser": "^6.0.11",
|
||||
"postcss-value-parser": "^4.2.0",
|
||||
"quick-lru": "^5.1.1",
|
||||
"resolve": "^1.22.1"
|
||||
"resolve": "^1.22.1",
|
||||
"tailwind-oxide": "file:oxide/crates/node"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
|
|
|||
|
|
@ -184,10 +184,17 @@ let state = {
|
|||
let files = fastGlob.sync(this.contentPatterns.all)
|
||||
|
||||
for (let file of files) {
|
||||
content.push({
|
||||
content: fs.readFileSync(path.resolve(file), 'utf8'),
|
||||
extension: path.extname(file).slice(1),
|
||||
})
|
||||
if (env.OXIDE) {
|
||||
content.push({
|
||||
file,
|
||||
extension: path.extname(file).slice(1),
|
||||
})
|
||||
} else {
|
||||
content.push({
|
||||
content: fs.readFileSync(path.resolve(file), 'utf8'),
|
||||
extension: path.extname(file).slice(1),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Resolve raw content in the tailwind config
|
||||
|
|
@ -234,11 +241,9 @@ let state = {
|
|||
env.DEBUG && console.timeEnd('Watch new files')
|
||||
}
|
||||
|
||||
env.DEBUG && console.time('Reading content files')
|
||||
for (let file of this.readContentPaths()) {
|
||||
this.context.changedContent.push(file)
|
||||
}
|
||||
env.DEBUG && console.timeEnd('Reading content files')
|
||||
|
||||
return this.context
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@
|
|||
|
||||
export const env = {
|
||||
DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== '0',
|
||||
OXIDE: process.env.OXIDE,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -172,9 +172,8 @@ export function resolvedChangedContent(context, candidateFiles, fileModifiedMap)
|
|||
.map(({ raw, extension = 'html' }) => ({ content: raw, extension }))
|
||||
|
||||
for (let changedFile of resolveChangedFiles(candidateFiles, fileModifiedMap)) {
|
||||
let content = fs.readFileSync(changedFile, 'utf8')
|
||||
let extension = path.extname(changedFile).slice(1)
|
||||
changedContent.push({ content, extension })
|
||||
changedContent.push({ file: changedFile, extension })
|
||||
}
|
||||
|
||||
return changedContent
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import fs from 'fs'
|
||||
import LRU from 'quick-lru'
|
||||
import * as sharedState from './sharedState'
|
||||
import { generateRules } from './generateRules'
|
||||
|
|
@ -5,6 +6,8 @@ import log from '../util/log'
|
|||
import cloneNodes from '../util/cloneNodes'
|
||||
import { defaultExtractor } from './defaultExtractor'
|
||||
|
||||
import oxide from 'tailwind-oxide'
|
||||
|
||||
let env = sharedState.env
|
||||
|
||||
const builtInExtractors = {
|
||||
|
|
@ -124,15 +127,32 @@ export default function expandTailwindAtRules(context) {
|
|||
// ---
|
||||
|
||||
// Find potential rules in changed files
|
||||
let candidates = new Set([sharedState.NOT_ON_DEMAND])
|
||||
let candidates = new Set([...(context.candidates ?? []), sharedState.NOT_ON_DEMAND])
|
||||
let seen = new Set()
|
||||
|
||||
env.DEBUG && console.time('Reading changed files')
|
||||
|
||||
for (let { content, extension } of context.changedContent) {
|
||||
let transformer = getTransformer(context.tailwindConfig, extension)
|
||||
let extractor = getExtractor(context, extension)
|
||||
getClassCandidates(transformer(content), extractor, candidates, seen)
|
||||
if (env.OXIDE) {
|
||||
// TODO: Pass through or implement `extractor`
|
||||
for (let candidate of oxide.parseCandidateStringsFromFiles(
|
||||
context.changedContent
|
||||
// Object.assign({}, builtInTransformers, context.tailwindConfig.content.transform)
|
||||
)) {
|
||||
candidates.add(candidate)
|
||||
}
|
||||
|
||||
// for (let { file, content, extension } of context.changedContent) {
|
||||
// let transformer = getTransformer(context.tailwindConfig, extension)
|
||||
// let extractor = getExtractor(context, extension)
|
||||
// getClassCandidatesOxide(file, transformer(content), extractor, candidates, seen)
|
||||
// }
|
||||
} else {
|
||||
for (let { file, content, extension } of context.changedContent) {
|
||||
let transformer = getTransformer(context.tailwindConfig, extension)
|
||||
let extractor = getExtractor(context, extension)
|
||||
content = file ? fs.readFileSync(file, 'utf8') : content
|
||||
getClassCandidates(transformer(content), extractor, candidates, seen)
|
||||
}
|
||||
}
|
||||
|
||||
env.DEBUG && console.timeEnd('Reading changed files')
|
||||
|
|
@ -143,7 +163,21 @@ export default function expandTailwindAtRules(context) {
|
|||
let classCacheCount = context.classCache.size
|
||||
|
||||
env.DEBUG && console.time('Generate rules')
|
||||
generateRules(candidates, context)
|
||||
// TODO: Sorting is _probably_ slow, but right now it can guarantee the same order. Eventually
|
||||
// we will be able to get rid of this.
|
||||
env.DEBUG && console.time('Sorting candidates')
|
||||
let sortedCandidates =
|
||||
typeof process !== 'undefined' && process.env.JEST_WORKER_ID
|
||||
? new Set(
|
||||
[...candidates].sort((a, z) => {
|
||||
if (a === z) return 0
|
||||
if (a < z) return -1
|
||||
return 1
|
||||
})
|
||||
)
|
||||
: candidates
|
||||
env.DEBUG && console.timeEnd('Sorting candidates')
|
||||
generateRules(sortedCandidates, context)
|
||||
env.DEBUG && console.timeEnd('Generate rules')
|
||||
|
||||
// We only ever add to the classCache, so if it didn't grow, there is nothing new.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
export const env = {
|
||||
NODE_ENV: process.env.NODE_ENV,
|
||||
DEBUG: resolveDebug(process.env.DEBUG),
|
||||
OXIDE: process.env.OXIDE,
|
||||
}
|
||||
export const contextMap = new Map()
|
||||
export const configContextMap = new Map()
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export default function (value) {
|
||||
export default function negateValue(value) {
|
||||
value = `${value}`
|
||||
|
||||
if (value === '0') {
|
||||
|
|
|
|||
|
|
@ -199,18 +199,18 @@ test('any types are set on correct plugins', () => {
|
|||
top: var(--any-value);
|
||||
bottom: var(--any-value);
|
||||
}
|
||||
.top-\[var\(--any-value\)\] {
|
||||
top: var(--any-value);
|
||||
}
|
||||
.right-\[var\(--any-value\)\] {
|
||||
right: var(--any-value);
|
||||
}
|
||||
.bottom-\[var\(--any-value\)\] {
|
||||
bottom: var(--any-value);
|
||||
}
|
||||
.left-\[var\(--any-value\)\] {
|
||||
left: var(--any-value);
|
||||
}
|
||||
.right-\[var\(--any-value\)\] {
|
||||
right: var(--any-value);
|
||||
}
|
||||
.top-\[var\(--any-value\)\] {
|
||||
top: var(--any-value);
|
||||
}
|
||||
.z-\[var\(--any-value\)\] {
|
||||
z-index: var(--any-value);
|
||||
}
|
||||
|
|
@ -246,18 +246,18 @@ test('any types are set on correct plugins', () => {
|
|||
margin-top: var(--any-value);
|
||||
margin-bottom: var(--any-value);
|
||||
}
|
||||
.mt-\[var\(--any-value\)\] {
|
||||
margin-top: var(--any-value);
|
||||
}
|
||||
.mr-\[var\(--any-value\)\] {
|
||||
margin-right: var(--any-value);
|
||||
}
|
||||
.mb-\[var\(--any-value\)\] {
|
||||
margin-bottom: var(--any-value);
|
||||
}
|
||||
.ml-\[var\(--any-value\)\] {
|
||||
margin-left: var(--any-value);
|
||||
}
|
||||
.mr-\[var\(--any-value\)\] {
|
||||
margin-right: var(--any-value);
|
||||
}
|
||||
.mt-\[var\(--any-value\)\] {
|
||||
margin-top: var(--any-value);
|
||||
}
|
||||
.aspect-\[var\(--any-value\)\] {
|
||||
aspect-ratio: var(--any-value);
|
||||
}
|
||||
|
|
@ -367,18 +367,18 @@ test('any types are set on correct plugins', () => {
|
|||
scroll-margin-top: var(--any-value);
|
||||
scroll-margin-bottom: var(--any-value);
|
||||
}
|
||||
.scroll-mt-\[var\(--any-value\)\] {
|
||||
scroll-margin-top: var(--any-value);
|
||||
}
|
||||
.scroll-mr-\[var\(--any-value\)\] {
|
||||
scroll-margin-right: var(--any-value);
|
||||
}
|
||||
.scroll-mb-\[var\(--any-value\)\] {
|
||||
scroll-margin-bottom: var(--any-value);
|
||||
}
|
||||
.scroll-ml-\[var\(--any-value\)\] {
|
||||
scroll-margin-left: var(--any-value);
|
||||
}
|
||||
.scroll-mr-\[var\(--any-value\)\] {
|
||||
scroll-margin-right: var(--any-value);
|
||||
}
|
||||
.scroll-mt-\[var\(--any-value\)\] {
|
||||
scroll-margin-top: var(--any-value);
|
||||
}
|
||||
.scroll-p-\[var\(--any-value\)\] {
|
||||
scroll-padding: var(--any-value);
|
||||
}
|
||||
|
|
@ -390,18 +390,18 @@ test('any types are set on correct plugins', () => {
|
|||
scroll-padding-top: var(--any-value);
|
||||
scroll-padding-bottom: var(--any-value);
|
||||
}
|
||||
.scroll-pt-\[var\(--any-value\)\] {
|
||||
scroll-padding-top: var(--any-value);
|
||||
}
|
||||
.scroll-pr-\[var\(--any-value\)\] {
|
||||
scroll-padding-right: var(--any-value);
|
||||
}
|
||||
.scroll-pb-\[var\(--any-value\)\] {
|
||||
scroll-padding-bottom: var(--any-value);
|
||||
}
|
||||
.scroll-pl-\[var\(--any-value\)\] {
|
||||
scroll-padding-left: var(--any-value);
|
||||
}
|
||||
.scroll-pr-\[var\(--any-value\)\] {
|
||||
scroll-padding-right: var(--any-value);
|
||||
}
|
||||
.scroll-pt-\[var\(--any-value\)\] {
|
||||
scroll-padding-top: var(--any-value);
|
||||
}
|
||||
.list-\[var\(--any-value\)\] {
|
||||
list-style-type: var(--any-value);
|
||||
}
|
||||
|
|
@ -453,14 +453,6 @@ test('any types are set on correct plugins', () => {
|
|||
.rounded-\[var\(--any-value\)\] {
|
||||
border-radius: var(--any-value);
|
||||
}
|
||||
.rounded-t-\[var\(--any-value\)\] {
|
||||
border-top-left-radius: var(--any-value);
|
||||
border-top-right-radius: var(--any-value);
|
||||
}
|
||||
.rounded-r-\[var\(--any-value\)\] {
|
||||
border-top-right-radius: var(--any-value);
|
||||
border-bottom-right-radius: var(--any-value);
|
||||
}
|
||||
.rounded-b-\[var\(--any-value\)\] {
|
||||
border-bottom-right-radius: var(--any-value);
|
||||
border-bottom-left-radius: var(--any-value);
|
||||
|
|
@ -469,18 +461,26 @@ test('any types are set on correct plugins', () => {
|
|||
border-top-left-radius: var(--any-value);
|
||||
border-bottom-left-radius: var(--any-value);
|
||||
}
|
||||
.rounded-r-\[var\(--any-value\)\] {
|
||||
border-top-right-radius: var(--any-value);
|
||||
border-bottom-right-radius: var(--any-value);
|
||||
}
|
||||
.rounded-t-\[var\(--any-value\)\] {
|
||||
border-top-left-radius: var(--any-value);
|
||||
border-top-right-radius: var(--any-value);
|
||||
}
|
||||
.rounded-bl-\[var\(--any-value\)\] {
|
||||
border-bottom-left-radius: var(--any-value);
|
||||
}
|
||||
.rounded-br-\[var\(--any-value\)\] {
|
||||
border-bottom-right-radius: var(--any-value);
|
||||
}
|
||||
.rounded-tl-\[var\(--any-value\)\] {
|
||||
border-top-left-radius: var(--any-value);
|
||||
}
|
||||
.rounded-tr-\[var\(--any-value\)\] {
|
||||
border-top-right-radius: var(--any-value);
|
||||
}
|
||||
.rounded-br-\[var\(--any-value\)\] {
|
||||
border-bottom-right-radius: var(--any-value);
|
||||
}
|
||||
.rounded-bl-\[var\(--any-value\)\] {
|
||||
border-bottom-left-radius: var(--any-value);
|
||||
}
|
||||
.border-\[var\(--any-value\)\] {
|
||||
border-color: var(--any-value);
|
||||
}
|
||||
|
|
@ -492,18 +492,18 @@ test('any types are set on correct plugins', () => {
|
|||
border-top-color: var(--any-value);
|
||||
border-bottom-color: var(--any-value);
|
||||
}
|
||||
.border-t-\[var\(--any-value\)\] {
|
||||
border-top-color: var(--any-value);
|
||||
}
|
||||
.border-r-\[var\(--any-value\)\] {
|
||||
border-right-color: var(--any-value);
|
||||
}
|
||||
.border-b-\[var\(--any-value\)\] {
|
||||
border-bottom-color: var(--any-value);
|
||||
}
|
||||
.border-l-\[var\(--any-value\)\] {
|
||||
border-left-color: var(--any-value);
|
||||
}
|
||||
.border-r-\[var\(--any-value\)\] {
|
||||
border-right-color: var(--any-value);
|
||||
}
|
||||
.border-t-\[var\(--any-value\)\] {
|
||||
border-top-color: var(--any-value);
|
||||
}
|
||||
.border-opacity-\[var\(--any-value\)\] {
|
||||
--tw-border-opacity: var(--any-value);
|
||||
}
|
||||
|
|
@ -545,18 +545,18 @@ test('any types are set on correct plugins', () => {
|
|||
padding-top: var(--any-value);
|
||||
padding-bottom: var(--any-value);
|
||||
}
|
||||
.pt-\[var\(--any-value\)\] {
|
||||
padding-top: var(--any-value);
|
||||
}
|
||||
.pr-\[var\(--any-value\)\] {
|
||||
padding-right: var(--any-value);
|
||||
}
|
||||
.pb-\[var\(--any-value\)\] {
|
||||
padding-bottom: var(--any-value);
|
||||
}
|
||||
.pl-\[var\(--any-value\)\] {
|
||||
padding-left: var(--any-value);
|
||||
}
|
||||
.pr-\[var\(--any-value\)\] {
|
||||
padding-right: var(--any-value);
|
||||
}
|
||||
.pt-\[var\(--any-value\)\] {
|
||||
padding-top: var(--any-value);
|
||||
}
|
||||
.indent-\[var\(--any-value\)\] {
|
||||
text-indent: var(--any-value);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,13 +47,13 @@ test('different arbitrary properties are picked up separately', () => {
|
|||
expect(result.css).toMatchFormattedCss(css`
|
||||
${defaults}
|
||||
|
||||
.\[foo\:bar\] {
|
||||
foo: bar;
|
||||
}
|
||||
|
||||
.\[bar\:baz\] {
|
||||
bar: baz;
|
||||
}
|
||||
|
||||
.\[foo\:bar\] {
|
||||
foo: bar;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -378,12 +378,12 @@ test('using multiple arbitrary props having fractional spacing values', () => {
|
|||
return expect(result.css).toMatchFormattedCss(css`
|
||||
${defaults}
|
||||
|
||||
.\[height\:_calc\(100vh_-_theme\(spacing\[2\.5\]\)\)\] {
|
||||
height: calc(100vh - 0.625rem);
|
||||
}
|
||||
.\[box-shadow\:_0_calc\(theme\(spacing\[0\.5\]\)_\*_-1\)_theme\(colors\.red\.400\)_inset\] {
|
||||
box-shadow: 0 calc(0.125rem * -1) #f87171 inset;
|
||||
}
|
||||
.\[height\:_calc\(100vh_-_theme\(spacing\[2\.5\]\)\)\] {
|
||||
height: calc(100vh - 0.625rem);
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -430,12 +430,12 @@ it('should be possible to read theme values in arbitrary properties (with quotes
|
|||
return expect(result.css).toMatchFormattedCss(css`
|
||||
${defaults}
|
||||
|
||||
.\[color\:var\(--a\)\] {
|
||||
color: var(--a);
|
||||
}
|
||||
.\[--a\:theme\(\'colors\.blue\.500\'\)\] {
|
||||
--a: #3b82f6;
|
||||
}
|
||||
.\[color\:var\(--a\)\] {
|
||||
color: var(--a);
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -26,18 +26,6 @@
|
|||
top: var(--value);
|
||||
bottom: var(--value);
|
||||
}
|
||||
.top-\[11px\] {
|
||||
top: 11px;
|
||||
}
|
||||
.top-\[var\(--value\)\] {
|
||||
top: var(--value);
|
||||
}
|
||||
.right-\[11px\] {
|
||||
right: 11px;
|
||||
}
|
||||
.right-\[var\(--value\)\] {
|
||||
right: var(--value);
|
||||
}
|
||||
.bottom-\[11px\] {
|
||||
bottom: 11px;
|
||||
}
|
||||
|
|
@ -50,6 +38,18 @@
|
|||
.left-\[var\(--value\)\] {
|
||||
left: var(--value);
|
||||
}
|
||||
.right-\[11px\] {
|
||||
right: 11px;
|
||||
}
|
||||
.right-\[var\(--value\)\] {
|
||||
right: var(--value);
|
||||
}
|
||||
.top-\[11px\] {
|
||||
top: 11px;
|
||||
}
|
||||
.top-\[var\(--value\)\] {
|
||||
top: var(--value);
|
||||
}
|
||||
.z-\[123\] {
|
||||
z-index: 123;
|
||||
}
|
||||
|
|
@ -91,18 +91,18 @@
|
|||
margin-top: 7px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.mt-\[7px\] {
|
||||
margin-top: 7px;
|
||||
}
|
||||
.mr-\[7px\] {
|
||||
margin-right: 7px;
|
||||
}
|
||||
.mb-\[7px\] {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.ml-\[7px\] {
|
||||
margin-left: 7px;
|
||||
}
|
||||
.mr-\[7px\] {
|
||||
margin-right: 7px;
|
||||
}
|
||||
.mt-\[7px\] {
|
||||
margin-top: 7px;
|
||||
}
|
||||
.mt-\[clamp\(30px\2c 100px\)\] {
|
||||
margin-top: clamp(30px, 100px);
|
||||
}
|
||||
|
|
@ -139,15 +139,39 @@
|
|||
.min-h-\[var\(--height\)\] {
|
||||
min-height: var(--height);
|
||||
}
|
||||
.w-\[\'\)\(\)\'\] {
|
||||
width: ')()';
|
||||
}
|
||||
.w-\[\'\]\[\]\'\] {
|
||||
width: '][]';
|
||||
}
|
||||
.w-\[\'\}\{\}\'\] {
|
||||
width: '}{}';
|
||||
}
|
||||
.w-\[\(\(\)\)\] {
|
||||
width: (());
|
||||
}
|
||||
.w-\[\(\)\] {
|
||||
width: ();
|
||||
}
|
||||
.w-\[0\] {
|
||||
width: 0;
|
||||
}
|
||||
.w-\[3\.23rem\] {
|
||||
width: 3.23rem;
|
||||
}
|
||||
.w-\[\[\[\]\]\] {
|
||||
width: [[]];
|
||||
}
|
||||
.w-\[\[\]\] {
|
||||
width: [];
|
||||
}
|
||||
.w-\[calc\(100\%\+1rem\)\] {
|
||||
width: calc(100% + 1rem);
|
||||
}
|
||||
.w-\[calc\(100\%\/3-1rem\*2\)\] {
|
||||
width: calc(100% / 3 - 1rem * 2);
|
||||
}
|
||||
.w-\[calc\(var\(--10-10px\2c calc\(-20px-\(-30px--40px\)\)\)-50px\)\] {
|
||||
width: calc(var(--10-10px, calc(-20px - (-30px - -40px))) - 50px);
|
||||
}
|
||||
|
|
@ -157,39 +181,15 @@
|
|||
.w-\[var\(--width\2c calc\(100\%\+1rem\)\)\] {
|
||||
width: var(--width, calc(100% + 1rem));
|
||||
}
|
||||
.w-\[calc\(100\%\/3-1rem\*2\)\] {
|
||||
width: calc(100% / 3 - 1rem * 2);
|
||||
}
|
||||
.w-\[\{\}\] {
|
||||
width: {
|
||||
}
|
||||
}
|
||||
.w-\[\{\{\}\}\] {
|
||||
width: {
|
||||
{
|
||||
}
|
||||
}
|
||||
}
|
||||
.w-\[\[\]\] {
|
||||
width: [];
|
||||
}
|
||||
.w-\[\[\[\]\]\] {
|
||||
width: [[]];
|
||||
}
|
||||
.w-\[\(\)\] {
|
||||
width: ();
|
||||
}
|
||||
.w-\[\(\(\)\)\] {
|
||||
width: (());
|
||||
}
|
||||
.w-\[\'\]\[\]\'\] {
|
||||
width: '][]';
|
||||
}
|
||||
.w-\[\'\)\(\)\'\] {
|
||||
width: ')()';
|
||||
}
|
||||
.w-\[\'\}\{\}\'\] {
|
||||
width: '}{}';
|
||||
.w-\[\{\}\] {
|
||||
width: {
|
||||
}
|
||||
}
|
||||
.min-w-\[3\.23rem\] {
|
||||
min-width: 3.23rem;
|
||||
|
|
@ -254,8 +254,8 @@
|
|||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.rotate-\[23deg\] {
|
||||
--tw-rotate: 23deg;
|
||||
.rotate-\[1\.5turn\] {
|
||||
--tw-rotate: 1.5turn;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
|
|
@ -266,14 +266,14 @@
|
|||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.rotate-\[401grad\] {
|
||||
--tw-rotate: 401grad;
|
||||
.rotate-\[23deg\] {
|
||||
--tw-rotate: 23deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.rotate-\[1\.5turn\] {
|
||||
--tw-rotate: 1.5turn;
|
||||
.rotate-\[401grad\] {
|
||||
--tw-rotate: 401grad;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
|
|
@ -349,12 +349,12 @@
|
|||
.cursor-\[pointer\] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.cursor-\[url\(hand\.cur\)_2_2\2c pointer\] {
|
||||
cursor: url(hand.cur) 2 2, pointer;
|
||||
}
|
||||
.cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\2c pointer\] {
|
||||
cursor: url('./path_to_hand.cur') 2 2, pointer;
|
||||
}
|
||||
.cursor-\[url\(hand\.cur\)_2_2\2c pointer\] {
|
||||
cursor: url(hand.cur) 2 2, pointer;
|
||||
}
|
||||
.cursor-\[var\(--value\)\] {
|
||||
cursor: var(--value);
|
||||
}
|
||||
|
|
@ -369,18 +369,18 @@
|
|||
scroll-margin-top: 7px;
|
||||
scroll-margin-bottom: 7px;
|
||||
}
|
||||
.scroll-mt-\[7px\] {
|
||||
scroll-margin-top: 7px;
|
||||
}
|
||||
.scroll-mr-\[7px\] {
|
||||
scroll-margin-right: 7px;
|
||||
}
|
||||
.scroll-mb-\[7px\] {
|
||||
scroll-margin-bottom: 7px;
|
||||
}
|
||||
.scroll-ml-\[7px\] {
|
||||
scroll-margin-left: 7px;
|
||||
}
|
||||
.scroll-mr-\[7px\] {
|
||||
scroll-margin-right: 7px;
|
||||
}
|
||||
.scroll-mt-\[7px\] {
|
||||
scroll-margin-top: 7px;
|
||||
}
|
||||
.scroll-mt-\[var\(--scroll-margin\)\] {
|
||||
scroll-margin-top: var(--scroll-margin);
|
||||
}
|
||||
|
|
@ -395,18 +395,18 @@
|
|||
scroll-padding-top: 7px;
|
||||
scroll-padding-bottom: 7px;
|
||||
}
|
||||
.scroll-pt-\[7px\] {
|
||||
scroll-padding-top: 7px;
|
||||
}
|
||||
.scroll-pr-\[7px\] {
|
||||
scroll-padding-right: 7px;
|
||||
}
|
||||
.scroll-pb-\[7px\] {
|
||||
scroll-padding-bottom: 7px;
|
||||
}
|
||||
.scroll-pl-\[7px\] {
|
||||
scroll-padding-left: 7px;
|
||||
}
|
||||
.scroll-pr-\[7px\] {
|
||||
scroll-padding-right: 7px;
|
||||
}
|
||||
.scroll-pt-\[7px\] {
|
||||
scroll-padding-top: 7px;
|
||||
}
|
||||
.scroll-pt-\[var\(--scroll-padding\)\] {
|
||||
scroll-padding-top: var(--scroll-padding);
|
||||
}
|
||||
|
|
@ -511,14 +511,6 @@
|
|||
.rounded-\[11px\] {
|
||||
border-radius: 11px;
|
||||
}
|
||||
.rounded-t-\[var\(--radius\)\] {
|
||||
border-top-left-radius: var(--radius);
|
||||
border-top-right-radius: var(--radius);
|
||||
}
|
||||
.rounded-r-\[var\(--radius\)\] {
|
||||
border-top-right-radius: var(--radius);
|
||||
border-bottom-right-radius: var(--radius);
|
||||
}
|
||||
.rounded-b-\[var\(--radius\)\] {
|
||||
border-bottom-right-radius: var(--radius);
|
||||
border-bottom-left-radius: var(--radius);
|
||||
|
|
@ -527,36 +519,32 @@
|
|||
border-top-left-radius: var(--radius);
|
||||
border-bottom-left-radius: var(--radius);
|
||||
}
|
||||
.rounded-tr-\[var\(--radius\)\] {
|
||||
.rounded-r-\[var\(--radius\)\] {
|
||||
border-top-right-radius: var(--radius);
|
||||
}
|
||||
.rounded-br-\[var\(--radius\)\] {
|
||||
border-bottom-right-radius: var(--radius);
|
||||
}
|
||||
.rounded-t-\[var\(--radius\)\] {
|
||||
border-top-left-radius: var(--radius);
|
||||
border-top-right-radius: var(--radius);
|
||||
}
|
||||
.rounded-bl-\[var\(--radius\)\] {
|
||||
border-bottom-left-radius: var(--radius);
|
||||
}
|
||||
.rounded-br-\[var\(--radius\)\] {
|
||||
border-bottom-right-radius: var(--radius);
|
||||
}
|
||||
.rounded-tl-\[var\(--radius\)\] {
|
||||
border-top-left-radius: var(--radius);
|
||||
}
|
||||
.rounded-tr-\[var\(--radius\)\] {
|
||||
border-top-right-radius: var(--radius);
|
||||
}
|
||||
.border-\[2\.5px\] {
|
||||
border-width: 2.5px;
|
||||
}
|
||||
.border-\[length\:var\(--value\)\] {
|
||||
border-width: var(--value);
|
||||
}
|
||||
.border-t-\[2\.5px\] {
|
||||
border-top-width: 2.5px;
|
||||
}
|
||||
.border-t-\[length\:var\(--value\)\] {
|
||||
border-top-width: var(--value);
|
||||
}
|
||||
.border-r-\[2\.5px\] {
|
||||
border-right-width: 2.5px;
|
||||
}
|
||||
.border-r-\[length\:var\(--value\)\] {
|
||||
border-right-width: var(--value);
|
||||
}
|
||||
.border-b-\[2\.5px\] {
|
||||
border-bottom-width: 2.5px;
|
||||
}
|
||||
|
|
@ -569,29 +557,27 @@
|
|||
.border-l-\[length\:var\(--value\)\] {
|
||||
border-left-width: var(--value);
|
||||
}
|
||||
.border-r-\[2\.5px\] {
|
||||
border-right-width: 2.5px;
|
||||
}
|
||||
.border-r-\[length\:var\(--value\)\] {
|
||||
border-right-width: var(--value);
|
||||
}
|
||||
.border-t-\[2\.5px\] {
|
||||
border-top-width: 2.5px;
|
||||
}
|
||||
.border-t-\[length\:var\(--value\)\] {
|
||||
border-top-width: var(--value);
|
||||
}
|
||||
.border-\[\#f00\] {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(255 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
.border-\[red_black\] {
|
||||
border-color: red black;
|
||||
}
|
||||
.border-\[color\:var\(--value\)\] {
|
||||
border-color: var(--value);
|
||||
}
|
||||
.border-t-\[\#f00\] {
|
||||
--tw-border-opacity: 1;
|
||||
border-top-color: rgb(255 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
.border-t-\[color\:var\(--value\)\] {
|
||||
border-top-color: var(--value);
|
||||
}
|
||||
.border-r-\[\#f00\] {
|
||||
--tw-border-opacity: 1;
|
||||
border-right-color: rgb(255 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
.border-r-\[color\:var\(--value\)\] {
|
||||
border-right-color: var(--value);
|
||||
.border-\[red_black\] {
|
||||
border-color: red black;
|
||||
}
|
||||
.border-b-\[\#f00\] {
|
||||
--tw-border-opacity: 1;
|
||||
|
|
@ -607,30 +593,61 @@
|
|||
.border-l-\[color\:var\(--value\)\] {
|
||||
border-left-color: var(--value);
|
||||
}
|
||||
.border-r-\[\#f00\] {
|
||||
--tw-border-opacity: 1;
|
||||
border-right-color: rgb(255 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
.border-r-\[color\:var\(--value\)\] {
|
||||
border-right-color: var(--value);
|
||||
}
|
||||
.border-t-\[\#f00\] {
|
||||
--tw-border-opacity: 1;
|
||||
border-top-color: rgb(255 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
.border-t-\[color\:var\(--value\)\] {
|
||||
border-top-color: var(--value);
|
||||
}
|
||||
.border-opacity-\[0\.8\] {
|
||||
--tw-border-opacity: 0.8;
|
||||
}
|
||||
.border-opacity-\[var\(--value\)\] {
|
||||
--tw-border-opacity: var(--value);
|
||||
}
|
||||
.bg-\[\#0000ffcc\] {
|
||||
background-color: #0000ffcc;
|
||||
}
|
||||
.bg-\[\#0f0\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 255 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-\[\#0f0_var\(--value\)\] {
|
||||
background-color: #0f0 var(--value);
|
||||
}
|
||||
.bg-\[\#ff0000\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 0 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-\[\#0000ffcc\] {
|
||||
background-color: #0000ffcc;
|
||||
.bg-\[color\:var\(--value1\)_var\(--value2\)\] {
|
||||
background-color: var(--value1) var(--value2);
|
||||
}
|
||||
.bg-\[hsl\(0\2c 100\%\2c 50\%\)\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(0 100% 50% / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-\[hsl\(0rad\2c 100\%\2c 50\%\)\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(0rad 100% 50% / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-\[hsla\(0\2c 100\%\2c 50\%\2c 0\.3\)\] {
|
||||
background-color: hsla(0, 100%, 50%, 0.3);
|
||||
}
|
||||
.bg-\[hsla\(0turn\2c 100\%\2c 50\%\2c 0\.3\)\] {
|
||||
background-color: hsla(0turn, 100%, 50%, 0.3);
|
||||
}
|
||||
.bg-\[rgb\(123\2c 123\2c 123\)\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(123 123 123 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-\[rgba\(123\2c 123\2c 123\2c 0\.5\)\] {
|
||||
background-color: rgba(123, 123, 123, 0.5);
|
||||
}
|
||||
.bg-\[rgb\(123\2c _456\2c _123\)_black\] {
|
||||
background-color: rgb(123, 456, 123) black;
|
||||
}
|
||||
|
|
@ -638,49 +655,26 @@
|
|||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(123 456 789 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-\[hsl\(0\2c 100\%\2c 50\%\)\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(0 100% 50% / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-\[hsla\(0\2c 100\%\2c 50\%\2c 0\.3\)\] {
|
||||
background-color: hsla(0, 100%, 50%, 0.3);
|
||||
}
|
||||
.bg-\[hsl\(0rad\2c 100\%\2c 50\%\)\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(0rad 100% 50% / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-\[hsla\(0turn\2c 100\%\2c 50\%\2c 0\.3\)\] {
|
||||
background-color: hsla(0turn, 100%, 50%, 0.3);
|
||||
}
|
||||
.bg-\[\#0f0_var\(--value\)\] {
|
||||
background-color: #0f0 var(--value);
|
||||
}
|
||||
.bg-\[var\(--value1\)_var\(--value2\)\] {
|
||||
background-color: var(--value1) var(--value2);
|
||||
}
|
||||
.bg-\[color\:var\(--value1\)_var\(--value2\)\] {
|
||||
background-color: var(--value1) var(--value2);
|
||||
.bg-\[rgba\(123\2c 123\2c 123\2c 0\.5\)\] {
|
||||
background-color: rgba(123, 123, 123, 0.5);
|
||||
}
|
||||
.bg-\[var\(--value\)\2c var\(--value\)\] {
|
||||
background-color: var(--value), var(--value);
|
||||
}
|
||||
.bg-\[var\(--value1\)_var\(--value2\)\] {
|
||||
background-color: var(--value1) var(--value2);
|
||||
}
|
||||
.bg-opacity-\[0\.11\] {
|
||||
--tw-bg-opacity: 0.11;
|
||||
}
|
||||
.bg-opacity-\[var\(--value\)\] {
|
||||
--tw-bg-opacity: var(--value);
|
||||
}
|
||||
.bg-\[linear-gradient\(to_left\2c rgb\(var\(--green\)\)\2c blue\)\] {
|
||||
background-image: linear-gradient(to left, rgb(var(--green)), blue);
|
||||
.bg-\[image\(\)\2c var\(--value\)\] {
|
||||
background-image: image(), var(--value);
|
||||
}
|
||||
.bg-\[url\(\'\/path-to-image\.png\'\)\] {
|
||||
background-image: url('/path-to-image.png');
|
||||
}
|
||||
.bg-\[url\:var\(--url\)\] {
|
||||
background-image: var(--url);
|
||||
}
|
||||
.bg-\[linear-gradient\(\#eee\2c \#fff\)\] {
|
||||
background-image: linear-gradient(#eee, #fff);
|
||||
.bg-\[image\:var\(--value\)\2c var\(--value\)\] {
|
||||
background-image: var(--value), var(--value);
|
||||
}
|
||||
.bg-\[linear-gradient\(\#eee\2c
|
||||
\#fff\)\2c
|
||||
|
|
@ -691,11 +685,17 @@
|
|||
blue\)\] {
|
||||
background-image: linear-gradient(#eee, #fff), conic-gradient(red, orange, yellow, green, blue);
|
||||
}
|
||||
.bg-\[image\(\)\2c var\(--value\)\] {
|
||||
background-image: image(), var(--value);
|
||||
.bg-\[linear-gradient\(\#eee\2c \#fff\)\] {
|
||||
background-image: linear-gradient(#eee, #fff);
|
||||
}
|
||||
.bg-\[image\:var\(--value\)\2c var\(--value\)\] {
|
||||
background-image: var(--value), var(--value);
|
||||
.bg-\[linear-gradient\(to_left\2c rgb\(var\(--green\)\)\2c blue\)\] {
|
||||
background-image: linear-gradient(to left, rgb(var(--green)), blue);
|
||||
}
|
||||
.bg-\[url\(\'\/path-to-image\.png\'\)\] {
|
||||
background-image: url('/path-to-image.png');
|
||||
}
|
||||
.bg-\[url\:var\(--url\)\] {
|
||||
background-image: var(--url);
|
||||
}
|
||||
.from-\[\#da5b66\] {
|
||||
--tw-gradient-from: #da5b66;
|
||||
|
|
@ -739,12 +739,12 @@
|
|||
.fill-\[\#da5b66\] {
|
||||
fill: #da5b66;
|
||||
}
|
||||
.fill-\[var\(--value\)\] {
|
||||
fill: var(--value);
|
||||
}
|
||||
.fill-\[url\(\#icon-gradient\)\] {
|
||||
fill: url(#icon-gradient);
|
||||
}
|
||||
.fill-\[var\(--value\)\] {
|
||||
fill: var(--value);
|
||||
}
|
||||
.stroke-\[\#da5b66\] {
|
||||
stroke: #da5b66;
|
||||
}
|
||||
|
|
@ -780,18 +780,18 @@
|
|||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.pt-\[7px\] {
|
||||
padding-top: 7px;
|
||||
}
|
||||
.pr-\[7px\] {
|
||||
padding-right: 7px;
|
||||
}
|
||||
.pb-\[7px\] {
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.pl-\[7px\] {
|
||||
padding-left: 7px;
|
||||
}
|
||||
.pr-\[7px\] {
|
||||
padding-right: 7px;
|
||||
}
|
||||
.pt-\[7px\] {
|
||||
padding-top: 7px;
|
||||
}
|
||||
.pt-\[clamp\(30px\2c 100px\)\] {
|
||||
padding-top: clamp(30px, 100px);
|
||||
}
|
||||
|
|
@ -804,30 +804,30 @@
|
|||
.align-\[10em\] {
|
||||
vertical-align: 10em;
|
||||
}
|
||||
.font-\[Georgia\2c serif\] {
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
.font-\[\'Gill_Sans\'\] {
|
||||
font-family: 'Gill Sans';
|
||||
}
|
||||
.font-\[sans-serif\2c serif\] {
|
||||
font-family: sans-serif, serif;
|
||||
}
|
||||
.font-\[family-name\:var\(--value\)\] {
|
||||
font-family: var(--value);
|
||||
}
|
||||
.font-\[serif\2c var\(--value\)\] {
|
||||
font-family: serif, var(--value);
|
||||
}
|
||||
.font-\[\'Some_Font\'\2c sans-serif\] {
|
||||
font-family: 'Some Font', sans-serif;
|
||||
}
|
||||
.font-\[\'Some_Font\'\2c \'Some_Other_Font\'\] {
|
||||
font-family: 'Some Font', 'Some Other Font';
|
||||
}
|
||||
.font-\[\'Some_Font\'\2c sans-serif\] {
|
||||
font-family: 'Some Font', sans-serif;
|
||||
}
|
||||
.font-\[\'Some_Font\'\2c var\(--other-font\)\] {
|
||||
font-family: 'Some Font', var(--other-font);
|
||||
}
|
||||
.font-\[Georgia\2c serif\] {
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
.font-\[family-name\:var\(--value\)\] {
|
||||
font-family: var(--value);
|
||||
}
|
||||
.font-\[sans-serif\2c serif\] {
|
||||
font-family: sans-serif, serif;
|
||||
}
|
||||
.font-\[serif\2c var\(--value\)\] {
|
||||
font-family: serif, var(--value);
|
||||
}
|
||||
.text-\[0\] {
|
||||
font-size: 0;
|
||||
}
|
||||
|
|
@ -859,6 +859,9 @@
|
|||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-\[color\:var\(--color\)\] {
|
||||
color: var(--color);
|
||||
}
|
||||
.text-\[rgb\(123\2c 123\2c 123\)\] {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(123 123 123 / var(--tw-text-opacity));
|
||||
|
|
@ -871,9 +874,6 @@
|
|||
--tw-text-opacity: 1;
|
||||
color: rgb(123 123 123 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-\[color\:var\(--color\)\] {
|
||||
color: var(--color);
|
||||
}
|
||||
.text-opacity-\[0\.8\] {
|
||||
--tw-text-opacity: 0.8;
|
||||
}
|
||||
|
|
@ -883,6 +883,9 @@
|
|||
.decoration-\[black\] {
|
||||
text-decoration-color: black;
|
||||
}
|
||||
.decoration-\[color\:var\(--color\)\] {
|
||||
text-decoration-color: var(--color);
|
||||
}
|
||||
.decoration-\[rgb\(123\2c 123\2c 123\)\] {
|
||||
text-decoration-color: rgb(123, 123, 123);
|
||||
}
|
||||
|
|
@ -892,9 +895,6 @@
|
|||
.decoration-\[rgb\(123_123_123\)\] {
|
||||
text-decoration-color: rgb(123 123 123);
|
||||
}
|
||||
.decoration-\[color\:var\(--color\)\] {
|
||||
text-decoration-color: var(--color);
|
||||
}
|
||||
.decoration-\[length\:10px\] {
|
||||
text-decoration-thickness: 10px;
|
||||
}
|
||||
|
|
@ -1110,6 +1110,10 @@
|
|||
.will-change-\[var\(--will-change\)\] {
|
||||
will-change: var(--will-change);
|
||||
}
|
||||
.content-\[\'\>\'\] {
|
||||
--tw-content: '>';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
.content-\[\'hello\'\] {
|
||||
--tw-content: 'hello';
|
||||
content: var(--tw-content);
|
||||
|
|
@ -1118,10 +1122,6 @@
|
|||
--tw-content: attr(content-before);
|
||||
content: var(--tw-content);
|
||||
}
|
||||
.content-\[\'\>\'\] {
|
||||
--tw-content: '>';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
|
||||
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
|
||||
|
|
|
|||
|
|
@ -81,39 +81,32 @@ it('should support arbitrary values for various background utilities', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
return expect(result.css).toMatchFormattedCss(css`
|
||||
.bg-red-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-\[\#ff0000\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 0 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-\[rgb\(var\(--bg-color\)\)\] {
|
||||
background-color: rgb(var(--bg-color));
|
||||
}
|
||||
|
||||
.bg-\[hsl\(var\(--bg-color\)\)\] {
|
||||
background-color: hsl(var(--bg-color));
|
||||
}
|
||||
|
||||
.bg-\[color\:var\(--bg-color\)\] {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.bg-gradient-to-r {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
.bg-\[hsl\(var\(--bg-color\)\)\] {
|
||||
background-color: hsl(var(--bg-color));
|
||||
}
|
||||
.bg-\[rgb\(var\(--bg-color\)\)\] {
|
||||
background-color: rgb(var(--bg-color));
|
||||
}
|
||||
.bg-red-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-\[url\(\'\/image-1-0\.png\'\)\] {
|
||||
background-image: url('/image-1-0.png');
|
||||
}
|
||||
|
||||
.bg-\[url\:var\(--image-url\)\] {
|
||||
background-image: var(--image-url);
|
||||
}
|
||||
.bg-gradient-to-r {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -228,8 +221,8 @@ it('should convert _ to spaces', () => {
|
|||
var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.content-\\[_hello_world_\\] {
|
||||
--tw-content: hello world;
|
||||
.content-\\[\\'__hello__world__\\'\\] {
|
||||
--tw-content: ' hello world ';
|
||||
content: var(--tw-content);
|
||||
}
|
||||
|
||||
|
|
@ -238,8 +231,8 @@ it('should convert _ to spaces', () => {
|
|||
content: var(--tw-content);
|
||||
}
|
||||
|
||||
.content-\\[\\'__hello__world__\\'\\] {
|
||||
--tw-content: ' hello world ';
|
||||
.content-\\[_hello_world_\\] {
|
||||
--tw-content: hello world;
|
||||
content: var(--tw-content);
|
||||
}
|
||||
`)
|
||||
|
|
@ -497,12 +490,12 @@ it('should correctly validate combination of percentage and length', () => {
|
|||
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
.bg-\[50px_10\%\] {
|
||||
background-position: 50px 10%;
|
||||
}
|
||||
.bg-\[50\%_10\%\] {
|
||||
background-position: 50% 10%;
|
||||
}
|
||||
.bg-\[50px_10\%\] {
|
||||
background-position: 50px 10%;
|
||||
}
|
||||
.bg-\[50px_10px\] {
|
||||
background-position: 50px 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -517,11 +517,11 @@ test('allows attribute variants with quotes', () => {
|
|||
expect(result.css).toMatchFormattedCss(css`
|
||||
${defaults}
|
||||
|
||||
.\[\&\[data-test\=\'2\'\]\]\:underline[data-test="2"] {
|
||||
.\[\&\[data-test\=\"2\"\]\]\:underline[data-test='2'] {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.\[\&\[data-test\=\"2\"\]\]\:underline[data-test='2'] {
|
||||
.\[\&\[data-test\=\'2\'\]\]\:underline[data-test='2'] {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
`)
|
||||
|
|
@ -554,12 +554,12 @@ test('classes in arbitrary variants should not be prefixed', () => {
|
|||
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
.foo .\[\.foo_\&\]\:tw-text-red-400 {
|
||||
.\[\&_\.foo\]\:tw-text-red-400 .foo {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 113 113 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.\[\&_\.foo\]\:tw-text-red-400 .foo {
|
||||
.foo .\[\.foo_\&\]\:tw-text-red-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 113 113 / var(--tw-text-opacity));
|
||||
}
|
||||
|
|
@ -593,25 +593,22 @@ test('classes in the same arbitrary variant should not be prefixed', () => {
|
|||
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
.foo .\[\.foo_\&\]\:tw-bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.foo .\[\.foo_\&\]\:tw-text-red-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 113 113 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.\[\&_\.foo\]\:tw-bg-white .foo {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.\[\&_\.foo\]\:tw-text-red-400 .foo {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 113 113 / var(--tw-text-opacity));
|
||||
}
|
||||
.foo .\[\.foo_\&\]\:tw-bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
.foo .\[\.foo_\&\]\:tw-text-red-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 113 113 / var(--tw-text-opacity));
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -651,19 +648,16 @@ it('should support aria variants', () => {
|
|||
.aria-checked\:underline[aria-checked='true'] {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.aria-\[sort\=ascending\]\:underline[aria-sort='ascending'] {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.aria-\[labelledby\=a_b\]\:underline[aria-labelledby='a b'] {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group[aria-checked='true'] .group-aria-checked\:underline {
|
||||
.aria-\[sort\=ascending\]\:underline[aria-sort='ascending'] {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group\/foo[aria-checked='true'] .group-aria-checked\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group[aria-sort='ascending'] .group-aria-\[sort\=ascending\]\:underline {
|
||||
.group[aria-checked='true'] .group-aria-checked\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group[aria-labelledby='a b'] .group-aria-\[labelledby\=a_b\]\:underline {
|
||||
|
|
@ -672,13 +666,13 @@ it('should support aria variants', () => {
|
|||
.group\/foo[aria-sort='ascending'] .group-aria-\[sort\=ascending\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer[aria-checked='true'] ~ .peer-aria-checked\:underline {
|
||||
.group[aria-sort='ascending'] .group-aria-\[sort\=ascending\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer\/foo[aria-checked='true'] ~ .peer-aria-checked\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer[aria-sort='ascending'] ~ .peer-aria-\[sort\=ascending\]\:underline {
|
||||
.peer[aria-checked='true'] ~ .peer-aria-checked\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer[aria-labelledby='a b'] ~ .peer-aria-\[labelledby\=a_b\]\:underline {
|
||||
|
|
@ -687,6 +681,9 @@ it('should support aria variants', () => {
|
|||
.peer\/foo[aria-sort='ascending'] ~ .peer-aria-\[sort\=ascending\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer[aria-sort='ascending'] ~ .peer-aria-\[sort\=ascending\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -731,19 +728,16 @@ it('should support data variants', () => {
|
|||
.data-checked\:underline[data-ui~='checked'] {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.data-\[position\=top\]\:underline[data-position='top'] {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.data-\[foo\=bar_baz\]\:underline[data-foo='bar baz'] {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group[data-ui~='checked'] .group-data-checked\:underline {
|
||||
.data-\[position\=top\]\:underline[data-position='top'] {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group\/foo[data-ui~='checked'] .group-data-checked\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group[data-position='top'] .group-data-\[position\=top\]\:underline {
|
||||
.group[data-ui~='checked'] .group-data-checked\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group[data-foo='bar baz'] .group-data-\[foo\=bar_baz\]\:underline {
|
||||
|
|
@ -752,13 +746,13 @@ it('should support data variants', () => {
|
|||
.group\/foo[data-position='top'] .group-data-\[position\=top\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer[data-ui~='checked'] ~ .peer-data-checked\:underline {
|
||||
.group[data-position='top'] .group-data-\[position\=top\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer\/foo[data-ui~='checked'] ~ .peer-data-checked\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer[data-position='top'] ~ .peer-data-\[position\=top\]\:underline {
|
||||
.peer[data-ui~='checked'] ~ .peer-data-checked\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer[data-foo='bar baz'] ~ .peer-data-\[foo\=bar_baz\]\:underline {
|
||||
|
|
@ -767,6 +761,9 @@ it('should support data variants', () => {
|
|||
.peer\/foo[data-position='top'] ~ .peer-data-\[position\=top\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer[data-position='top'] ~ .peer-data-\[position\=top\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -816,48 +813,41 @@ it('should support supports', () => {
|
|||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
.supports-\[display\:grid\]\:grid {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (transform-origin: 5% 5%) {
|
||||
.supports-\[transform-origin\:5\%_5\%\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@supports selector(A > B) {
|
||||
.supports-\[selector\(A\>B\)\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@supports not (foo: bar) {
|
||||
.supports-\[not\(foo\:bar\)\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (foo: bar) or (bar: baz) {
|
||||
.supports-\[\(foo\:bar\)or\(bar\:baz\)\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (foo: bar) and (bar: baz) {
|
||||
.supports-\[\(foo\:bar\)and\(bar\:baz\)\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (foo: bar) or (bar: baz) {
|
||||
.supports-\[\(foo\:bar\)or\(bar\:baz\)\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
@supports (container-type: var(--tw)) {
|
||||
.supports-\[container-type\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
@supports not (foo: bar) {
|
||||
.supports-\[not\(foo\:bar\)\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
@supports selector(A > B) {
|
||||
.supports-\[selector\(A\>B\)\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
@supports (transform-origin: 5% 5%) {
|
||||
.supports-\[transform-origin\:5\%_5\%\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -917,46 +907,46 @@ it('should be possible to use modifiers and arbitrary groups', () => {
|
|||
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
.group:hover .group-hover\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group\/foo:hover .group-hover\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group:focus .group-\[\&\:focus\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group:hover .group-\[\:hover\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group[data-open] .group-\[\&\[data-open\]\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group[data-open] .group-\[\[data-open\]\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.in-foo .group .group-\[\.in-foo_\&\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group.in-foo .group-\[\.in-foo\]\:underline {
|
||||
.group:hover .group-hover\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group\/foo:focus .group-\[\&\:focus\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group\/foo:hover .group-\[\:hover\]\/foo\:underline {
|
||||
.group:focus .group-\[\&\:focus\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group\/foo[data-open] .group-\[\&\[data-open\]\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group\/foo[data-open] .group-\[\[data-open\]\]\/foo\:underline {
|
||||
.group[data-open] .group-\[\&\[data-open\]\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group\/foo.in-foo .group-\[\.in-foo\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group.in-foo .group-\[\.in-foo\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.in-foo .group\/foo .group-\[\.in-foo_\&\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group\/foo.in-foo .group-\[\.in-foo\]\/foo\:underline {
|
||||
.in-foo .group .group-\[\.in-foo_\&\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group\/foo:hover .group-\[\:hover\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group:hover .group-\[\:hover\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group\/foo[data-open] .group-\[\[data-open\]\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.group[data-open] .group-\[\[data-open\]\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
`)
|
||||
|
|
@ -1018,48 +1008,48 @@ it('should be possible to use modifiers and arbitrary peers', () => {
|
|||
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
.peer:hover ~ .peer-hover\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer\/foo:hover ~ .peer-hover\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer:focus ~ .peer-\[\&\:focus\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer:hover ~ .peer-\[\:hover\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer[data-open] ~ .peer-\[\&\[data-open\]\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer[data-open] ~ .peer-\[\[data-open\]\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.in-foo .peer ~ .peer-\[\.in-foo_\&\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer.in-foo ~ .peer-\[\.in-foo\]\:underline {
|
||||
.peer:hover ~ .peer-hover\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer\/foo:focus ~ .peer-\[\&\:focus\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer\/foo:hover ~ .peer-\[\:hover\]\/foo\:underline {
|
||||
.peer:focus ~ .peer-\[\&\:focus\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer\/foo[data-open] ~ .peer-\[\&\[data-open\]\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer\/foo[data-open] ~ .peer-\[\[data-open\]\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.in-foo .peer\/foo ~ .peer-\[\.in-foo_\&\]\/foo\:underline {
|
||||
.peer[data-open] ~ .peer-\[\&\[data-open\]\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer\/foo.in-foo ~ .peer-\[\.in-foo\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer.in-foo ~ .peer-\[\.in-foo\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.in-foo .peer\/foo ~ .peer-\[\.in-foo_\&\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.in-foo .peer ~ .peer-\[\.in-foo_\&\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer\/foo:hover ~ .peer-\[\:hover\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer:hover ~ .peer-\[\:hover\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer\/foo[data-open] ~ .peer-\[\[data-open\]\]\/foo\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.peer[data-open] ~ .peer-\[\[data-open\]\]\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -149,19 +149,13 @@
|
|||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.inset-y-4 {
|
||||
top: 1rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
.inset-x-2 {
|
||||
left: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
.top-6 {
|
||||
top: 1.5rem;
|
||||
}
|
||||
.right-8 {
|
||||
right: 2rem;
|
||||
.inset-y-4 {
|
||||
top: 1rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
.bottom-12 {
|
||||
bottom: 3rem;
|
||||
|
|
@ -169,6 +163,12 @@
|
|||
.left-16 {
|
||||
left: 4rem;
|
||||
}
|
||||
.right-8 {
|
||||
right: 2rem;
|
||||
}
|
||||
.top-6 {
|
||||
top: 1.5rem;
|
||||
}
|
||||
.isolate {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
|
@ -178,12 +178,12 @@
|
|||
.z-30 {
|
||||
z-index: 30;
|
||||
}
|
||||
.order-last {
|
||||
order: 9999;
|
||||
}
|
||||
.order-2 {
|
||||
order: 2;
|
||||
}
|
||||
.order-last {
|
||||
order: 9999;
|
||||
}
|
||||
.col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
|
@ -211,19 +211,13 @@
|
|||
.m-4 {
|
||||
margin: 1rem;
|
||||
}
|
||||
.my-2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.mr-1 {
|
||||
margin-right: 0.25rem;
|
||||
.my-2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: 0.75rem;
|
||||
|
|
@ -231,6 +225,12 @@
|
|||
.ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.mr-1 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.box-border {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -291,12 +291,12 @@
|
|||
.grow-0 {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.basis-auto {
|
||||
flex-basis: auto;
|
||||
}
|
||||
.basis-7 {
|
||||
flex-basis: 1.75rem;
|
||||
}
|
||||
.basis-auto {
|
||||
flex-basis: auto;
|
||||
}
|
||||
.table-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
|
@ -319,8 +319,8 @@
|
|||
.origin-top-right {
|
||||
transform-origin: top right;
|
||||
}
|
||||
.translate-x-5 {
|
||||
--tw-translate-x: 1.25rem;
|
||||
.-translate-x-3 {
|
||||
--tw-translate-x: -0.75rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
|
|
@ -331,14 +331,14 @@
|
|||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.translate-y-6 {
|
||||
--tw-translate-y: 1.5rem;
|
||||
.translate-x-5 {
|
||||
--tw-translate-x: 1.25rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.-translate-x-3 {
|
||||
--tw-translate-x: -0.75rem;
|
||||
.translate-y-6 {
|
||||
--tw-translate-y: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
|
|
@ -349,14 +349,14 @@
|
|||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.skew-y-12 {
|
||||
--tw-skew-y: 12deg;
|
||||
.skew-x-12 {
|
||||
--tw-skew-x: 12deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.skew-x-12 {
|
||||
--tw-skew-x: 12deg;
|
||||
.skew-y-12 {
|
||||
--tw-skew-y: 12deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
|
|
@ -532,26 +532,26 @@
|
|||
.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 1;
|
||||
}
|
||||
.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-x-reverse: 0;
|
||||
border-right-width: calc(2px * var(--tw-divide-x-reverse));
|
||||
border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
|
||||
}
|
||||
.divide-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
|
||||
}
|
||||
.divide-x-0 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-x-reverse: 0;
|
||||
border-right-width: calc(0px * var(--tw-divide-x-reverse));
|
||||
border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
|
||||
}
|
||||
.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-x-reverse: 0;
|
||||
border-right-width: calc(2px * var(--tw-divide-x-reverse));
|
||||
border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
|
||||
}
|
||||
.divide-y-0 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
|
||||
}
|
||||
.divide-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
|
||||
}
|
||||
.divide-dotted > :not([hidden]) ~ :not([hidden]) {
|
||||
border-style: dotted;
|
||||
}
|
||||
|
|
@ -608,12 +608,12 @@
|
|||
border-top-width: 4px;
|
||||
border-bottom-width: 4px;
|
||||
}
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
.border-b-4 {
|
||||
border-bottom-width: 4px;
|
||||
}
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
.border-solid {
|
||||
border-style: solid;
|
||||
}
|
||||
|
|
@ -634,14 +634,6 @@
|
|||
border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
.border-t-black {
|
||||
--tw-border-opacity: 1;
|
||||
border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
.border-r-black {
|
||||
--tw-border-opacity: 1;
|
||||
border-right-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
.border-b-black {
|
||||
--tw-border-opacity: 1;
|
||||
border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
|
|
@ -650,6 +642,14 @@
|
|||
--tw-border-opacity: 1;
|
||||
border-left-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
.border-r-black {
|
||||
--tw-border-opacity: 1;
|
||||
border-right-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
.border-t-black {
|
||||
--tw-border-opacity: 1;
|
||||
border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
.border-opacity-10 {
|
||||
--tw-border-opacity: 0.1;
|
||||
}
|
||||
|
|
@ -729,19 +729,13 @@
|
|||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
.pt-1 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.pb-3 {
|
||||
padding-bottom: 0.75rem;
|
||||
|
|
@ -749,15 +743,21 @@
|
|||
.pl-4 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
.pt-1 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.indent-6 {
|
||||
text-indent: 1.5rem;
|
||||
}
|
||||
.-indent-12 {
|
||||
text-indent: -3rem;
|
||||
}
|
||||
.indent-6 {
|
||||
text-indent: 1.5rem;
|
||||
}
|
||||
.align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -794,12 +794,12 @@
|
|||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
}
|
||||
.leading-relaxed {
|
||||
line-height: 1.625;
|
||||
}
|
||||
.leading-5 {
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.leading-relaxed {
|
||||
line-height: 1.625;
|
||||
}
|
||||
.tracking-tight {
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
|
@ -869,12 +869,6 @@
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
|
||||
|
|
@ -882,18 +876,24 @@
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-black {
|
||||
--tw-shadow-color: #000;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.shadow-red-500\/25 {
|
||||
--tw-shadow-color: rgb(239 68 68 / 0.25);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.shadow-blue-100\/10 {
|
||||
--tw-shadow-color: rgb(219 234 254 / 0.1);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.shadow-red-500\/25 {
|
||||
--tw-shadow-color: rgb(239 68 68 / 0.25);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
.outline-none {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
|
|
@ -907,12 +907,12 @@
|
|||
.outline-4 {
|
||||
outline-width: 4px;
|
||||
}
|
||||
.outline-offset-2 {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.-outline-offset-2 {
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.outline-offset-2 {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.outline-black {
|
||||
outline-color: #000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -205,33 +205,27 @@ test('opacity modifier in combination with partial custom properties', async ()
|
|||
|
||||
return run(input, config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
.bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--foo) 50% 50% / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(123 var(--foo) 50% / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-\[hsl\(123\2c 50\%\2c var\(--foo\)\)\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(123 50% var(--foo) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\]\/50 {
|
||||
background-color: hsl(var(--foo) 50% 50% / 0.5);
|
||||
}
|
||||
|
||||
.bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\]\/50 {
|
||||
background-color: hsl(123 var(--foo) 50% / 0.5);
|
||||
}
|
||||
|
||||
.bg-\[hsl\(123\2c 50\%\2c var\(--foo\)\)\]\/50 {
|
||||
background-color: hsl(123 50% var(--foo) / 0.5);
|
||||
}
|
||||
|
||||
.bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(123 var(--foo) 50% / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\]\/50 {
|
||||
background-color: hsl(123 var(--foo) 50% / 0.5);
|
||||
}
|
||||
.bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--foo) 50% 50% / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\]\/50 {
|
||||
background-color: hsl(var(--foo) 50% 50% / 0.5);
|
||||
}
|
||||
.bg-\[hsl\(var\(--foo\)\2c var\(--bar\)\2c var\(--baz\)\)\]\/50 {
|
||||
background-color: hsl(var(--foo) var(--bar) var(--baz) / 0.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
|
||||
import { run } from './util/run'
|
||||
import { run, css } from './util/run'
|
||||
import { env } from '../src/lib/sharedState'
|
||||
|
||||
function customExtractor(content) {
|
||||
let matches = content.match(/class="([^"]+)"/)
|
||||
|
|
@ -11,7 +12,9 @@ function customExtractor(content) {
|
|||
let expectedPath = path.resolve(__dirname, './custom-extractors.test.css')
|
||||
let expected = fs.readFileSync(expectedPath, 'utf8')
|
||||
|
||||
describe('modern', () => {
|
||||
let group = env.OXIDE ? describe.skip : describe
|
||||
|
||||
group('modern', () => {
|
||||
test('extract.DEFAULT', () => {
|
||||
let config = {
|
||||
content: {
|
||||
|
|
@ -54,9 +57,34 @@ describe('modern', () => {
|
|||
expect(result.css).toMatchFormattedCss(expected)
|
||||
})
|
||||
})
|
||||
|
||||
test('raw content with extension', () => {
|
||||
let config = {
|
||||
content: {
|
||||
files: [
|
||||
{
|
||||
raw: fs.readFileSync(path.resolve(__dirname, './raw-content.test.html'), 'utf8'),
|
||||
extension: 'html',
|
||||
},
|
||||
],
|
||||
extract: {
|
||||
html: () => ['invisible'],
|
||||
},
|
||||
},
|
||||
corePlugins: { preflight: false },
|
||||
}
|
||||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('legacy', () => {
|
||||
group('legacy', () => {
|
||||
test('defaultExtractor', () => {
|
||||
let config = {
|
||||
content: {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import path from 'path'
|
||||
import { run, html, css } from './util/run'
|
||||
import { env } from '../src/lib/sharedState'
|
||||
|
||||
let t = env.OXIDE ? test.skip : test
|
||||
|
||||
function customTransformer(content) {
|
||||
return content.replace(/uppercase/g, 'lowercase')
|
||||
}
|
||||
|
||||
test('transform function', () => {
|
||||
t('transform function', () => {
|
||||
let config = {
|
||||
content: {
|
||||
files: [{ raw: html`<div class="uppercase"></div>` }],
|
||||
|
|
@ -22,7 +25,7 @@ test('transform function', () => {
|
|||
})
|
||||
})
|
||||
|
||||
test('transform.DEFAULT', () => {
|
||||
t('transform.DEFAULT', () => {
|
||||
let config = {
|
||||
content: {
|
||||
files: [{ raw: html`<div class="uppercase"></div>` }],
|
||||
|
|
@ -41,7 +44,7 @@ test('transform.DEFAULT', () => {
|
|||
})
|
||||
})
|
||||
|
||||
test('transform.{extension}', () => {
|
||||
t('transform.{extension}', () => {
|
||||
let config = {
|
||||
content: {
|
||||
files: [
|
||||
|
|
|
|||
|
|
@ -200,15 +200,15 @@ test('the default config can be overridden using the presets key', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
.min-h-0 {
|
||||
min-height: 0px;
|
||||
}
|
||||
.min-h-primary {
|
||||
min-height: 48px;
|
||||
}
|
||||
.min-h-secondary {
|
||||
min-height: 24px;
|
||||
}
|
||||
.min-h-0 {
|
||||
min-height: 0px;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -230,15 +230,15 @@ test('presets can be functions', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
.min-h-0 {
|
||||
min-height: 0px;
|
||||
}
|
||||
.min-h-primary {
|
||||
min-height: 48px;
|
||||
}
|
||||
.min-h-secondary {
|
||||
min-height: 24px;
|
||||
}
|
||||
.min-h-0 {
|
||||
min-height: 0px;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -312,15 +312,15 @@ test('presets can have their own presets', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
.bg-black {
|
||||
background-color: black;
|
||||
}
|
||||
.bg-red {
|
||||
background-color: #ee0000;
|
||||
}
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
.bg-black {
|
||||
background-color: black;
|
||||
}
|
||||
.bg-white {
|
||||
background-color: white;
|
||||
}
|
||||
|
|
@ -369,15 +369,15 @@ test('function presets can be mixed with object presets', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
.bg-black {
|
||||
background-color: black;
|
||||
}
|
||||
.bg-red {
|
||||
background-color: #ee0000;
|
||||
}
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
.bg-black {
|
||||
background-color: black;
|
||||
}
|
||||
.bg-white {
|
||||
background-color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -322,18 +322,18 @@ div {
|
|||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
.shadow-sm {
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-sm {
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.magic-none {
|
||||
magic: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
|
||||
import { env } from '../src/lib/sharedState'
|
||||
import { run, css } from './util/run'
|
||||
|
||||
test('it works', () => {
|
||||
afterEach(() => {
|
||||
env.OXIDE = false
|
||||
})
|
||||
|
||||
test.each([[true], [false]])('it works (using Rust: %p)', (useOxide) => {
|
||||
env.OXIDE = useOxide
|
||||
|
||||
let config = {
|
||||
darkMode: 'class',
|
||||
content: [path.resolve(__dirname, './kitchen-sink.test.html')],
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@ test('match utilities with modifiers', async () => {
|
|||
.test {
|
||||
color: default_null;
|
||||
}
|
||||
.test\/foo {
|
||||
color: default_foo;
|
||||
.test-1\/\[foo\] {
|
||||
color: one_[foo];
|
||||
}
|
||||
.test-1\/foo {
|
||||
color: onefoo_null;
|
||||
|
|
@ -57,8 +57,8 @@ test('match utilities with modifiers', async () => {
|
|||
.test\/\[foo\] {
|
||||
color: default_[foo];
|
||||
}
|
||||
.test-1\/\[foo\] {
|
||||
color: one_[foo];
|
||||
.test\/foo {
|
||||
color: default_foo;
|
||||
}
|
||||
.test-\[8\]\/\[9\] {
|
||||
color: eightnine_null;
|
||||
|
|
@ -108,8 +108,8 @@ test('match utilities with modifiers in the config', async () => {
|
|||
.test {
|
||||
color: default_null;
|
||||
}
|
||||
.test\/foo {
|
||||
color: default_mewtwo;
|
||||
.test-1\/\[bar\] {
|
||||
color: one_bar;
|
||||
}
|
||||
.test-1\/foo {
|
||||
color: one_mewtwo;
|
||||
|
|
@ -117,8 +117,8 @@ test('match utilities with modifiers in the config', async () => {
|
|||
.test\/\[bar\] {
|
||||
color: default_bar;
|
||||
}
|
||||
.test-1\/\[bar\] {
|
||||
color: one_bar;
|
||||
.test\/foo {
|
||||
color: default_mewtwo;
|
||||
}
|
||||
`)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -436,8 +436,8 @@ it('warns when using min variants with mixed units (with no screens config)', as
|
|||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (min-width: 700rem) {
|
||||
.min-\[700rem\]\:font-bold {
|
||||
@media (min-width: 700px) {
|
||||
.min-\[700px\]\:font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
|
@ -612,8 +612,8 @@ it('warns when using max variants with mixed units (with no screens config)', as
|
|||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (max-width: 700rem) {
|
||||
.max-\[700rem\]\:font-bold {
|
||||
@media (max-width: 700px) {
|
||||
.max-\[700px\]\:font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@ test('using a negative prefix with a negative scale value', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
return expect(result.css).toMatchCss(css`
|
||||
.mt-2 {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.-mt-2 {
|
||||
margin-top: -4px;
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: 8px;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -54,12 +54,12 @@ test('using a negative prefix without a negative scale value', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
return expect(result.css).toMatchCss(css`
|
||||
.mt-5 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.-mt-5 {
|
||||
margin-top: -20px;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -114,12 +114,12 @@ test('a value that includes a variable', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
return expect(result.css).toMatchCss(css`
|
||||
.mt-5 {
|
||||
margin-top: var(--sizing-5);
|
||||
}
|
||||
.-mt-5 {
|
||||
margin-top: calc(var(--sizing-5) * -1);
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: var(--sizing-5);
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -136,12 +136,12 @@ test('a value that includes a calc', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
return expect(result.css).toMatchCss(css`
|
||||
.mt-5 {
|
||||
margin-top: calc(52px * -3);
|
||||
}
|
||||
.-mt-5 {
|
||||
margin-top: calc(calc(52px * -3) * -1);
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: calc(52px * -3);
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -160,23 +160,23 @@ test('a value that includes min/max/clamp functions', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
return expect(result.css).toMatchCss(css`
|
||||
.mt-min {
|
||||
margin-top: min(100vmin, 3rem);
|
||||
}
|
||||
.-mt-min {
|
||||
margin-top: calc(min(100vmin, 3rem) * -1);
|
||||
}
|
||||
.mt-max {
|
||||
margin-top: max(100vmax, 3rem);
|
||||
.-mt-clamp {
|
||||
margin-top: calc(clamp(1rem, 100vh, 3rem) * -1);
|
||||
}
|
||||
.-mt-max {
|
||||
margin-top: calc(max(100vmax, 3rem) * -1);
|
||||
}
|
||||
.-mt-min {
|
||||
margin-top: calc(min(100vmin, 3rem) * -1);
|
||||
}
|
||||
.mt-clamp {
|
||||
margin-top: clamp(1rem, 100vh, 3rem);
|
||||
}
|
||||
.-mt-clamp {
|
||||
margin-top: calc(clamp(1rem, 100vh, 3rem) * -1);
|
||||
.mt-max {
|
||||
margin-top: max(100vmax, 3rem);
|
||||
}
|
||||
.mt-min {
|
||||
margin-top: min(100vmin, 3rem);
|
||||
}
|
||||
`)
|
||||
})
|
||||
|
|
@ -213,10 +213,10 @@ test('a zero value', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
return expect(result.css).toMatchCss(css`
|
||||
.mt-0 {
|
||||
.-mt-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.-mt-0 {
|
||||
.mt-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
`)
|
||||
|
|
@ -303,12 +303,12 @@ test('using a negative prefix with a negative default scale value', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
return expect(result.css).toMatchCss(css`
|
||||
.mt {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.-mt {
|
||||
margin-top: -4px;
|
||||
}
|
||||
.mt {
|
||||
margin-top: 8px;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import { normalizeConfig } from '../src/util/normalizeConfig'
|
||||
import { run, css } from './util/run'
|
||||
import resolveConfig from '../src/public/resolve-config'
|
||||
import { env } from '../src/lib/sharedState'
|
||||
|
||||
let t = env.OXIDE ? test.skip : test
|
||||
|
||||
it.each`
|
||||
config
|
||||
|
|
@ -32,12 +35,18 @@ it.each`
|
|||
})
|
||||
})
|
||||
|
||||
it.each`
|
||||
t.each`
|
||||
config
|
||||
${{ content: [{ raw: 'text-center' }], purge: { extract: () => ['font-bold'] } }}
|
||||
${{ content: [{ raw: 'text-center' }], purge: { extract: { DEFAULT: () => ['font-bold'] } } }}
|
||||
${{ content: [{ raw: 'text-center' }], purge: { options: { defaultExtractor: () => ['font-bold'] } } }}
|
||||
${{ content: [{ raw: 'text-center' }], purge: { options: { extractors: [{ extractor: () => ['font-bold'], extensions: ['html'] }] } } }}
|
||||
${{
|
||||
content: [{ raw: 'text-center' }],
|
||||
purge: { options: { defaultExtractor: () => ['font-bold'] } },
|
||||
}}
|
||||
${{
|
||||
content: [{ raw: 'text-center' }],
|
||||
purge: { options: { extractors: [{ extractor: () => ['font-bold'], extensions: ['html'] }] } },
|
||||
}}
|
||||
${{ content: [{ raw: 'text-center' }], purge: { extract: { html: () => ['font-bold'] } } }}
|
||||
`('should normalize extractors $config', ({ config }) => {
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
|
|
@ -49,7 +58,7 @@ it.each`
|
|||
})
|
||||
})
|
||||
|
||||
it('should still be possible to use the "old" v2 config', () => {
|
||||
t('should still be possible to use the "old" v2 config', () => {
|
||||
let config = {
|
||||
purge: {
|
||||
content: [
|
||||
|
|
|
|||
|
|
@ -802,26 +802,26 @@ it('works with opacity values defined as a placeholder or a function in when col
|
|||
.bg-foo10 {
|
||||
background-color: rgb(255 100 0 / 100%);
|
||||
}
|
||||
.bg-foo11 {
|
||||
background-color: rgb(255 100 0 / 50%);
|
||||
}
|
||||
.bg-foo20 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 100 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-foo21 {
|
||||
background-color: rgb(255 100 0 / 50%);
|
||||
}
|
||||
.bg-foo30 {
|
||||
background-color: rgb(255 100 0 / 100%);
|
||||
}
|
||||
.bg-foo31 {
|
||||
background-color: rgb(255 100 0 / 50%);
|
||||
}
|
||||
.bg-foo40 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 100 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-foo11 {
|
||||
background-color: rgb(255 100 0 / 50%);
|
||||
}
|
||||
.bg-foo21 {
|
||||
background-color: rgb(255 100 0 / 50%);
|
||||
}
|
||||
.bg-foo31 {
|
||||
background-color: rgb(255 100 0 / 50%);
|
||||
}
|
||||
.bg-foo41 {
|
||||
background-color: rgb(255 100 0 / 50%);
|
||||
}
|
||||
|
|
|
|||
104
tests/oxide-svelte.test.css
Normal file
104
tests/oxide-svelte.test.css
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
.bg-red-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:hover\:bg-blue-500:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
|
||||
}
|
||||
}
|
||||
579
tests/oxide.test.css
Normal file
579
tests/oxide.test.css
Normal file
|
|
@ -0,0 +1,579 @@
|
|||
.theme-test {
|
||||
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';
|
||||
color: #3b82f6;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.screen-test {
|
||||
color: purple;
|
||||
}
|
||||
}
|
||||
.apply-1 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.apply-2 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.apply-test {
|
||||
margin-top: 1.5rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(236 72 153 / var(--tw-bg-opacity));
|
||||
}
|
||||
.apply-test:hover {
|
||||
font-weight: 700;
|
||||
}
|
||||
.apply-test:hover:focus {
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.apply-test {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
||||
}
|
||||
.apply-test:nth-child(even):focus {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
|
||||
}
|
||||
}
|
||||
.apply-components {
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.apply-components {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.apply-components {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.apply-components {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.apply-components {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
.apply-components {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
.apply-components {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.drop-empty-rules:hover {
|
||||
font-weight: 700;
|
||||
}
|
||||
.group:hover .apply-group {
|
||||
font-weight: 700;
|
||||
}
|
||||
.dark .apply-dark-mode {
|
||||
font-weight: 700;
|
||||
}
|
||||
.apply-with-existing:hover {
|
||||
font-weight: 400;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.apply-with-existing:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
||||
}
|
||||
}
|
||||
.multiple,
|
||||
.selectors {
|
||||
font-weight: 700;
|
||||
}
|
||||
.group:hover .multiple,
|
||||
.group:hover .selectors {
|
||||
font-weight: 400;
|
||||
}
|
||||
.list > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(1rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
.nested {
|
||||
.example {
|
||||
font-weight: 700;
|
||||
}
|
||||
.example:hover {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.apply-order-a {
|
||||
margin: 1.25rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.apply-order-b {
|
||||
margin: 1.25rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.dark .group:hover .apply-dark-group-example-a {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.group:active .crazy-example:focus {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
h1:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
div {
|
||||
background: #654321;
|
||||
}
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.container {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
.container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
.test-apply-font-variant {
|
||||
--tw-ordinal: ordinal;
|
||||
--tw-numeric-spacing: tabular-nums;
|
||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
}
|
||||
.custom-component {
|
||||
background: #123456;
|
||||
}
|
||||
*,
|
||||
::before,
|
||||
::after,
|
||||
::backdrop {
|
||||
padding: 5px;
|
||||
}
|
||||
.foo .bg-black {
|
||||
appearance: none;
|
||||
}
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.scale-50 {
|
||||
--tw-scale-x: 0.5;
|
||||
--tw-scale-y: 0.5;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.transform {
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
|
||||
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
|
||||
}
|
||||
.bg-black {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-green-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
.bg-gradient-to-r {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
.bg-hero--home-1 {
|
||||
background-image: url('/images/homepage-1.jpg');
|
||||
}
|
||||
.from-foo {
|
||||
--tw-gradient-from: #bada55;
|
||||
--tw-gradient-to: rgb(186 218 85 / 0);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-sm {
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.magic-none {
|
||||
magic: none;
|
||||
}
|
||||
.magic-tons {
|
||||
magic: tons;
|
||||
}
|
||||
.custom-util {
|
||||
background: #abcdef;
|
||||
}
|
||||
*,
|
||||
::before,
|
||||
::after,
|
||||
::backdrop {
|
||||
margin: 10px;
|
||||
}
|
||||
.first\:pt-0:first-child {
|
||||
padding-top: 0px;
|
||||
}
|
||||
.hover\:container:hover {
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.hover\:container:hover {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.hover\:container:hover {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.hover\:container:hover {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.hover\:container:hover {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
.hover\:container:hover {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
.hover\:scale-75:hover {
|
||||
--tw-scale-x: 0.75;
|
||||
--tw-scale-y: 0.75;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.hover\:font-bold:hover {
|
||||
font-weight: 700;
|
||||
}
|
||||
.hover\:shadow-lg:hover {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
|
||||
0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.hover\:custom-util:hover {
|
||||
background: #abcdef;
|
||||
}
|
||||
.focus\:font-normal:focus {
|
||||
font-weight: 400;
|
||||
}
|
||||
.focus\:ring-2:focus {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
|
||||
var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
|
||||
var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
.focus\:ring-blue-500:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
|
||||
}
|
||||
.focus\:hover\:font-light:hover:focus {
|
||||
font-weight: 300;
|
||||
}
|
||||
.disabled\:font-bold:disabled {
|
||||
font-weight: 700;
|
||||
}
|
||||
.group:hover .group-hover\:opacity-100 {
|
||||
opacity: 1;
|
||||
}
|
||||
.group:hover .group-hover\:custom-util {
|
||||
background: #abcdef;
|
||||
}
|
||||
.group:active .group-active\:opacity-10 {
|
||||
opacity: 0.1;
|
||||
}
|
||||
.foo\:custom-util {
|
||||
background: #abcdef !important;
|
||||
}
|
||||
.foo\:hover\:custom-util:hover {
|
||||
background: #abcdef !important;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.motion-safe\:transition {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
|
||||
opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.motion-safe\:custom-util {
|
||||
background: #abcdef;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.motion-reduce\:transition {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
|
||||
opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
}
|
||||
.dark .dark\:custom-util {
|
||||
background: #abcdef;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.sm\:container {
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.sm\:container {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.sm\:container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.sm\:container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.sm\:container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
.sm\:container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
.sm\:text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.sm\:tabular-nums {
|
||||
--tw-numeric-spacing: tabular-nums;
|
||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
}
|
||||
.sm\:custom-util {
|
||||
background: #abcdef;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.group:active .sm\:motion-safe\:group-active\:focus\:opacity-10:focus {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.md\:container {
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.md\:container {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.md\:container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.md\:container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.md\:container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
.md\:container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
.md\:text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.md\:opacity-50 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.md\:shadow-sm {
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.md\:hover\:border-r-blue-500\/30:hover {
|
||||
border-right-color: rgb(59 130 246 / 0.3);
|
||||
}
|
||||
.md\:hover\:opacity-20:hover {
|
||||
opacity: 0.2;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.md\:motion-safe\:hover\:transition:hover {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill,
|
||||
stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active {
|
||||
background: #abcdef !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.md\:sm\:text-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) and (max-width: 1535px) {
|
||||
.range\:text-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@media (min-width: 640px) and (max-width: 767px), (max-width: 868px) {
|
||||
.multi\:text-left {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
77
tests/oxide.test.html
Normal file
77
tests/oxide.test.html
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Title</title>
|
||||
<link rel="stylesheet" href="./tailwind.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="range:text-right multi:text-left"></div>
|
||||
<div
|
||||
class="container hover:container sm:container md:container text-center sm:text-center md:text-center"
|
||||
></div>
|
||||
<div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
|
||||
<div class="test-apply-font-variant"></div>
|
||||
<div class="mt-6"></div>
|
||||
<div class="bg-black"></div>
|
||||
<div class="md:hover:border-r-blue-500/30"></div>
|
||||
<div class="custom-util"></div>
|
||||
<div class="hover:custom-util"></div>
|
||||
<div class="group-hover:custom-util"></div>
|
||||
<div class="foo:custom-util"></div>
|
||||
<div class="foo:hover:custom-util"></div>
|
||||
<div class="sm:custom-util"></div>
|
||||
<div class="dark:custom-util"></div>
|
||||
<div class="motion-safe:custom-util"></div>
|
||||
<div class="md:dark:motion-safe:foo:active:custom-util"></div>
|
||||
<div class="aspect-w-1 aspect-h-2"></div>
|
||||
<div class="aspect-w-3 aspect-h-4"></div>
|
||||
<div class="magic-none magic-tons"></div>
|
||||
<div class="focus:font-normal"></div>
|
||||
<div class="font-medium"></div>
|
||||
<div class="bg-gradient-to-r from-foo"></div>
|
||||
<div class="custom-component custom-util"></div>
|
||||
<div class="bg-opacity-50"></div>
|
||||
<div class="focus:ring-2 focus:ring-blue-500"></div>
|
||||
<div class="hover:font-bold"></div>
|
||||
<div class="disabled:font-bold"></div>
|
||||
<div class="focus:hover:font-light"></div>
|
||||
<div class="first:pt-0"></div>
|
||||
<div class="container"></div>
|
||||
<div class="bg-hero--home-1"></div>
|
||||
<div class="group-hover:opacity-100"></div>
|
||||
<div class="group-active:opacity-10"></div>
|
||||
<div class="sm:motion-safe:group-active:focus:opacity-10"></div>
|
||||
<div class="motion-safe:transition"></div>
|
||||
<div class="motion-reduce:transition"></div>
|
||||
<div class="md:motion-safe:hover:transition"></div>
|
||||
<div class="md:sm:text-center shadow-sm md:shadow-sm"></div>
|
||||
<div class="md:sm:text-center shadow-sm md:shadow-sm"></div>
|
||||
<div class="bg-green-500 md:opacity-50 md:hover:opacity-20 sm:tabular-nums"></div>
|
||||
<div class="text-center shadow-md hover:shadow-lg transform scale-50 hover:scale-75"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
defineComponent({
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
things: Array /* PropType<string[]> */,
|
||||
},
|
||||
setup: () => {
|
||||
const count = ref(0)
|
||||
// Weird regex-looking stuff that once caused a stack overflow in candidatePermutations
|
||||
const pattern = ' ]-[] '
|
||||
return {
|
||||
count,
|
||||
stuff: [] /* string[] | undefined */,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
202
tests/oxide.test.js
Normal file
202
tests/oxide.test.js
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
|
||||
import { env } from '../src/lib/sharedState'
|
||||
import { run, css } from './util/run'
|
||||
|
||||
afterEach(() => {
|
||||
env.OXIDE = false
|
||||
})
|
||||
|
||||
test.each([[true], [false]])('it works (using Rust: %p)', (useOxide) => {
|
||||
env.OXIDE = useOxide
|
||||
|
||||
let config = {
|
||||
darkMode: 'class',
|
||||
content: [path.resolve(__dirname, './oxide.test.html')],
|
||||
corePlugins: { preflight: false },
|
||||
theme: {
|
||||
extend: {
|
||||
screens: {
|
||||
range: { min: '1280px', max: '1535px' },
|
||||
multi: [{ min: '640px', max: '767px' }, { max: '868px' }],
|
||||
},
|
||||
gradientColorStops: {
|
||||
foo: '#bada55',
|
||||
},
|
||||
backgroundImage: {
|
||||
'hero--home-1': "url('/images/homepage-1.jpg')",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
function ({ addVariant }) {
|
||||
addVariant(
|
||||
'foo',
|
||||
({ container }) => {
|
||||
container.walkRules((rule) => {
|
||||
rule.selector = `.foo\\:${rule.selector.slice(1)}`
|
||||
rule.walkDecls((decl) => {
|
||||
decl.important = true
|
||||
})
|
||||
})
|
||||
},
|
||||
{ before: 'sm' }
|
||||
)
|
||||
},
|
||||
function ({ addUtilities, addBase, theme }) {
|
||||
addBase({
|
||||
h1: {
|
||||
fontSize: theme('fontSize.2xl'),
|
||||
fontWeight: theme('fontWeight.bold'),
|
||||
'&:first-child': {
|
||||
marginTop: '0px',
|
||||
},
|
||||
},
|
||||
})
|
||||
addUtilities(
|
||||
{
|
||||
'.magic-none': {
|
||||
magic: 'none',
|
||||
},
|
||||
'.magic-tons': {
|
||||
magic: 'tons',
|
||||
},
|
||||
},
|
||||
['responsive', 'hover']
|
||||
)
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
let input = css`
|
||||
@layer utilities {
|
||||
.custom-util {
|
||||
background: #abcdef;
|
||||
}
|
||||
*,
|
||||
::before,
|
||||
::after,
|
||||
::backdrop {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
@layer components {
|
||||
.test-apply-font-variant {
|
||||
@apply ordinal tabular-nums;
|
||||
}
|
||||
.custom-component {
|
||||
background: #123456;
|
||||
}
|
||||
*,
|
||||
::before,
|
||||
::after,
|
||||
::backdrop {
|
||||
padding: 5px;
|
||||
}
|
||||
.foo .bg-black {
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
div {
|
||||
background: #654321;
|
||||
}
|
||||
}
|
||||
.theme-test {
|
||||
font-family: theme('fontFamily.sans');
|
||||
color: theme('colors.blue.500');
|
||||
}
|
||||
@screen lg {
|
||||
.screen-test {
|
||||
color: purple;
|
||||
}
|
||||
}
|
||||
.apply-1 {
|
||||
@apply mt-6;
|
||||
}
|
||||
.apply-2 {
|
||||
@apply mt-6;
|
||||
}
|
||||
.apply-test {
|
||||
@apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200;
|
||||
}
|
||||
.apply-components {
|
||||
@apply container mx-auto;
|
||||
}
|
||||
.drop-empty-rules {
|
||||
@apply hover:font-bold;
|
||||
}
|
||||
.apply-group {
|
||||
@apply group-hover:font-bold;
|
||||
}
|
||||
.apply-dark-mode {
|
||||
@apply dark:font-bold;
|
||||
}
|
||||
.apply-with-existing:hover {
|
||||
@apply font-normal sm:bg-green-500;
|
||||
}
|
||||
.multiple,
|
||||
.selectors {
|
||||
@apply font-bold group-hover:font-normal;
|
||||
}
|
||||
.list {
|
||||
@apply space-x-4;
|
||||
}
|
||||
.nested {
|
||||
.example {
|
||||
@apply font-bold hover:font-normal;
|
||||
}
|
||||
}
|
||||
.apply-order-a {
|
||||
@apply m-5 mt-6;
|
||||
}
|
||||
.apply-order-b {
|
||||
@apply m-5 mt-6;
|
||||
}
|
||||
.apply-dark-group-example-a {
|
||||
@apply dark:group-hover:bg-green-500;
|
||||
}
|
||||
.crazy-example {
|
||||
@apply sm:motion-safe:group-active:focus:opacity-10;
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(input, config).then((result) => {
|
||||
let expectedPath = path.resolve(__dirname, './oxide.test.css')
|
||||
let expected = fs.readFileSync(expectedPath, 'utf8')
|
||||
|
||||
expect(result.css).toMatchFormattedCss(expected)
|
||||
})
|
||||
})
|
||||
|
||||
xit.each([[true], [false]])(
|
||||
'should use the transformer for svelte files (using Rust: %p)',
|
||||
(useOxide) => {
|
||||
env.OXIDE = useOxide
|
||||
|
||||
let config = {
|
||||
darkMode: 'class',
|
||||
content: [path.resolve(__dirname, './oxide.test.svelte')],
|
||||
corePlugins: { preflight: false },
|
||||
theme: {},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
let input = css`
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
return run(input, config).then((result) => {
|
||||
let expectedPath = path.resolve(__dirname, './oxide-svelte.test.css')
|
||||
let expected = fs.readFileSync(expectedPath, 'utf8')
|
||||
|
||||
expect(result.css).toMatchFormattedCss(expected)
|
||||
})
|
||||
}
|
||||
)
|
||||
11
tests/oxide.test.svelte
Normal file
11
tests/oxide.test.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script>
|
||||
let current = 'foo'
|
||||
</script>
|
||||
|
||||
<button class:lg:hover:bg-blue-500={current === 'foo'}>Click me</button>
|
||||
|
||||
<button
|
||||
class:bg-red-500={current === 'foo'}
|
||||
>
|
||||
Click me
|
||||
</button>
|
||||
|
|
@ -14,6 +14,10 @@ test('font-size utilities can include a default line-height', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchCss(css`
|
||||
.text-lg {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.text-md {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
|
@ -21,10 +25,6 @@ test('font-size utilities can include a default line-height', () => {
|
|||
.text-sm {
|
||||
font-size: 12px;
|
||||
}
|
||||
.text-lg {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -43,6 +43,10 @@ test('font-size utilities can include a default letter-spacing', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchCss(css`
|
||||
.text-lg {
|
||||
font-size: 20px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.text-md {
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.01em;
|
||||
|
|
@ -50,10 +54,6 @@ test('font-size utilities can include a default letter-spacing', () => {
|
|||
.text-sm {
|
||||
font-size: 12px;
|
||||
}
|
||||
.text-lg {
|
||||
font-size: 20px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -72,6 +72,11 @@ test('font-size utilities can include a default line-height and letter-spacing',
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchCss(css`
|
||||
.text-lg {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.text-md {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
|
@ -80,11 +85,6 @@ test('font-size utilities can include a default line-height and letter-spacing',
|
|||
.text-sm {
|
||||
font-size: 12px;
|
||||
}
|
||||
.text-lg {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
@ -103,6 +103,11 @@ test('font-size utilities can include a font-weight', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchCss(css`
|
||||
.text-lg {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.text-md {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
|
|
@ -111,11 +116,6 @@ test('font-size utilities can include a font-weight', () => {
|
|||
.text-sm {
|
||||
font-size: 12px;
|
||||
}
|
||||
.text-lg {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
1007
tests/prefix.test.js
1007
tests/prefix.test.js
File diff suppressed because it is too large
Load diff
|
|
@ -55,19 +55,13 @@
|
|||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.inset-y-4 {
|
||||
top: 1rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
.inset-x-2 {
|
||||
left: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
.top-6 {
|
||||
top: 1.5rem;
|
||||
}
|
||||
.right-8 {
|
||||
right: 2rem;
|
||||
.inset-y-4 {
|
||||
top: 1rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
.bottom-12 {
|
||||
bottom: 3rem;
|
||||
|
|
@ -75,6 +69,12 @@
|
|||
.left-16 {
|
||||
left: 4rem;
|
||||
}
|
||||
.right-8 {
|
||||
right: 2rem;
|
||||
}
|
||||
.top-6 {
|
||||
top: 1.5rem;
|
||||
}
|
||||
.isolate {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
|
@ -84,12 +84,12 @@
|
|||
.z-30 {
|
||||
z-index: 30;
|
||||
}
|
||||
.order-last {
|
||||
order: 9999;
|
||||
}
|
||||
.order-2 {
|
||||
order: 2;
|
||||
}
|
||||
.order-last {
|
||||
order: 9999;
|
||||
}
|
||||
.col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
|
@ -117,19 +117,13 @@
|
|||
.m-4 {
|
||||
margin: 1rem;
|
||||
}
|
||||
.my-2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.mr-1 {
|
||||
margin-right: 0.25rem;
|
||||
.my-2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: 0.75rem;
|
||||
|
|
@ -137,6 +131,12 @@
|
|||
.ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.mr-1 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.box-border {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -188,46 +188,64 @@
|
|||
.origin-top-right {
|
||||
transform-origin: top right;
|
||||
}
|
||||
.translate-x-5 {
|
||||
--tw-translate-x: 1.25rem;
|
||||
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
.-translate-x-3 {
|
||||
--tw-translate-x: -0.75rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.-translate-x-4 {
|
||||
--tw-translate-x: -1rem;
|
||||
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.translate-x-5 {
|
||||
--tw-translate-x: 1.25rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.translate-y-6 {
|
||||
--tw-translate-y: 1.5rem;
|
||||
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.-translate-x-3 {
|
||||
--tw-translate-x: -0.75rem;
|
||||
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.rotate-3 {
|
||||
--tw-rotate: 3deg;
|
||||
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.skew-y-12 {
|
||||
--tw-skew-y: 12deg;
|
||||
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.skew-x-12 {
|
||||
--tw-skew-x: 12deg;
|
||||
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.skew-y-12 {
|
||||
--tw-skew-y: 12deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.scale-95 {
|
||||
--tw-scale-x: 0.95;
|
||||
--tw-scale-y: 0.95;
|
||||
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.transform {
|
||||
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.transform-gpu {
|
||||
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
|
||||
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
|
||||
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate))
|
||||
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
|
||||
scaleY(var(--tw-scale-y));
|
||||
}
|
||||
.animate-none {
|
||||
animation: none;
|
||||
|
|
@ -322,26 +340,26 @@
|
|||
.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 1;
|
||||
}
|
||||
.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-x-reverse: 0;
|
||||
border-right-width: calc(2px * var(--tw-divide-x-reverse));
|
||||
border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
|
||||
}
|
||||
.divide-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
|
||||
}
|
||||
.divide-x-0 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-x-reverse: 0;
|
||||
border-right-width: calc(0px * var(--tw-divide-x-reverse));
|
||||
border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
|
||||
}
|
||||
.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-x-reverse: 0;
|
||||
border-right-width: calc(2px * var(--tw-divide-x-reverse));
|
||||
border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
|
||||
}
|
||||
.divide-y-0 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
|
||||
}
|
||||
.divide-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
|
||||
}
|
||||
.divide-dotted > :not([hidden]) ~ :not([hidden]) {
|
||||
border-style: dotted;
|
||||
}
|
||||
|
|
@ -473,19 +491,13 @@
|
|||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
.pt-1 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.pb-3 {
|
||||
padding-bottom: 0.75rem;
|
||||
|
|
@ -493,6 +505,12 @@
|
|||
.pl-4 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
.pt-1 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -519,22 +537,25 @@
|
|||
}
|
||||
.ordinal {
|
||||
--tw-ordinal: ordinal;
|
||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
}
|
||||
.tabular-nums {
|
||||
--tw-numeric-spacing: tabular-nums;
|
||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
}
|
||||
.diagonal-fractions {
|
||||
--tw-numeric-fraction: diagonal-fractions;
|
||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
}
|
||||
.leading-relaxed {
|
||||
line-height: 1.625;
|
||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
|
||||
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
}
|
||||
.leading-5 {
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.leading-relaxed {
|
||||
line-height: 1.625;
|
||||
}
|
||||
.tracking-tight {
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
|
@ -580,12 +601,6 @@
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
|
||||
|
|
@ -593,6 +608,12 @@
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.ring {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
|
||||
var(--tw-ring-offset-color);
|
||||
|
|
@ -622,85 +643,115 @@
|
|||
}
|
||||
.blur-md {
|
||||
--tw-blur: blur(12px);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.brightness-150 {
|
||||
--tw-brightness: brightness(1.5);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.contrast-50 {
|
||||
--tw-contrast: contrast(0.5);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.drop-shadow-md {
|
||||
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
|
||||
drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.grayscale {
|
||||
--tw-grayscale: grayscale(100%);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.hue-rotate-60 {
|
||||
--tw-hue-rotate: hue-rotate(60deg);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.invert {
|
||||
--tw-invert: invert(100%);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.saturate-200 {
|
||||
--tw-saturate: saturate(2);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.sepia {
|
||||
--tw-sepia: sepia(100%);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.filter {
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
|
||||
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.filter-none {
|
||||
filter: none;
|
||||
}
|
||||
.backdrop-blur-lg {
|
||||
--tw-backdrop-blur: blur(16px);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
.backdrop-brightness-50 {
|
||||
--tw-backdrop-brightness: brightness(0.5);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
.backdrop-contrast-0 {
|
||||
--tw-backdrop-contrast: contrast(0);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
.backdrop-grayscale {
|
||||
--tw-backdrop-grayscale: grayscale(100%);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
.backdrop-hue-rotate-90 {
|
||||
--tw-backdrop-hue-rotate: hue-rotate(90deg);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
.backdrop-invert {
|
||||
--tw-backdrop-invert: invert(100%);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
.backdrop-opacity-75 {
|
||||
--tw-backdrop-opacity: opacity(0.75);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
.backdrop-saturate-150 {
|
||||
--tw-backdrop-saturate: saturate(1.5);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
.backdrop-sepia {
|
||||
--tw-backdrop-sepia: sepia(100%);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
.backdrop-filter {
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||||
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
.backdrop-filter-none {
|
||||
backdrop-filter: none;
|
||||
|
|
|
|||
|
|
@ -21,28 +21,3 @@ it('raw content', () => {
|
|||
expect(result.css).toMatchFormattedCss(expected)
|
||||
})
|
||||
})
|
||||
|
||||
test('raw content with extension', () => {
|
||||
let config = {
|
||||
content: {
|
||||
files: [
|
||||
{
|
||||
raw: fs.readFileSync(path.resolve(__dirname, './raw-content.test.html'), 'utf8'),
|
||||
extension: 'html',
|
||||
},
|
||||
],
|
||||
extract: {
|
||||
html: () => ['invisible'],
|
||||
},
|
||||
},
|
||||
corePlugins: { preflight: false },
|
||||
}
|
||||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchFormattedCss(css`
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -273,16 +273,16 @@ it('should safelist negatives based on a pattern regex', () => {
|
|||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-red-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-red-400\/40 {
|
||||
background-color: rgb(248 113 113 / 0.4);
|
||||
}
|
||||
.bg-red-400\/50 {
|
||||
background-color: rgb(248 113 113 / 0.5);
|
||||
}
|
||||
.bg-red-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-red-500\/40 {
|
||||
background-color: rgb(239 68 68 / 0.4);
|
||||
}
|
||||
|
|
@ -305,16 +305,16 @@ it('should safelist negatives based on a pattern regex', () => {
|
|||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
|
||||
}
|
||||
.hover\:bg-red-500:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
||||
}
|
||||
.hover\:bg-red-400\/40:hover {
|
||||
background-color: rgb(248 113 113 / 0.4);
|
||||
}
|
||||
.hover\:bg-red-400\/50:hover {
|
||||
background-color: rgb(248 113 113 / 0.5);
|
||||
}
|
||||
.hover\:bg-red-500:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
||||
}
|
||||
.hover\:bg-red-500\/40:hover {
|
||||
background-color: rgb(239 68 68 / 0.4);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,14 +23,14 @@ test('it detects classes in lit-html templates', () => {
|
|||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
|
||||
}
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
import path from 'path'
|
||||
|
||||
import { run } from './util/run'
|
||||
import { env } from '../src/lib/sharedState'
|
||||
|
||||
let css = String.raw
|
||||
|
||||
test('it detects svelte based on the file extension', () => {
|
||||
let t = env.OXIDE ? test.skip : test
|
||||
|
||||
t('it detects svelte based on the file extension', () => {
|
||||
let config = {
|
||||
content: [path.resolve(__dirname, './syntax-svelte.test.svelte')],
|
||||
corePlugins: { preflight: false },
|
||||
|
|
@ -33,7 +36,7 @@ test('it detects svelte based on the file extension', () => {
|
|||
})
|
||||
})
|
||||
|
||||
test('using raw with svelte extension', () => {
|
||||
t('using raw with svelte extension', () => {
|
||||
let config = {
|
||||
content: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -39,12 +39,11 @@ test('order matters and produces different behaviour', () => {
|
|||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
return expect(result.css).toMatchFormattedCss(css`
|
||||
.hover\:file\:bg-pink-600::file-selector-button:hover {
|
||||
.file\:hover\:bg-pink-600:hover::file-selector-button {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(219 39 119 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.file\:hover\:bg-pink-600:hover::file-selector-button {
|
||||
.hover\:file\:bg-pink-600::file-selector-button:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(219 39 119 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
|
@ -290,21 +289,9 @@ it('should properly handle keyframes with multiple variants', async () => {
|
|||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.hover\:animate-spin:hover {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
100% {
|
||||
|
|
@ -316,21 +303,17 @@ it('should properly handle keyframes with multiple variants', async () => {
|
|||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.hover\:animate-bounce:hover {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.focus\:animate-spin:focus {
|
||||
.hover\:animate-spin:hover {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
100% {
|
||||
|
|
@ -342,10 +325,17 @@ it('should properly handle keyframes with multiple variants', async () => {
|
|||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.focus\:animate-bounce:focus {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.focus\:animate-spin:focus {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
`)
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue