mirror of
https://github.com/zhigang1992/nativewind.git
synced 2026-06-14 01:45:05 +08:00
feat: support divide, space & gap
This commit is contained in:
Mark Lawlor
@@ -1,9 +1,10 @@
|
||||
import { expectError, tailwindRunner } from "./runner";
|
||||
import { tailwindRunner } from "./runner";
|
||||
|
||||
const scenarios = [0, 2, 4, 8];
|
||||
// const scenarios = [0, 2, 4, 8];
|
||||
|
||||
tailwindRunner("Border - Divide Width", [
|
||||
...expectError(scenarios.map((n) => `divide-x-${n}`)),
|
||||
...expectError(scenarios.map((n) => `divide-y-${n}`)),
|
||||
...expectError(["divide-x-reverse", "divide-y-reverse"]),
|
||||
["divide-x-2", { styles: {} }],
|
||||
// ...expectError(scenarios.map((n) => `divide-x-${n}`)),
|
||||
// ...expectError(scenarios.map((n) => `divide-y-${n}`)),
|
||||
// ...expectError(["divide-x-reverse", "divide-y-reverse"]),
|
||||
]);
|
||||
|
||||
255
package-lock.json
generated
255
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "tailwindcss-react-native",
|
||||
"version": "1.0.0-2",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "tailwindcss-react-native",
|
||||
"version": "1.0.0-2",
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/types": "7.17.10",
|
||||
@@ -17,7 +17,8 @@
|
||||
"postcss": "^8.4.12",
|
||||
"postcss-calc": "^8.2.4",
|
||||
"postcss-color-functional-notation": "^4.2.2",
|
||||
"postcss-css-variables": "^0.18.0"
|
||||
"postcss-css-variables": "^0.18.0",
|
||||
"react-is": "^18.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.17.10",
|
||||
@@ -33,6 +34,7 @@
|
||||
"@types/jest": "27.5.0",
|
||||
"@types/micromatch": "4.0.2",
|
||||
"@types/react": "18.0.9",
|
||||
"@types/react-is": "^17.0.3",
|
||||
"@types/react-native": "0.67.6",
|
||||
"@types/tailwindcss": "3.0.10",
|
||||
"@typescript-eslint/eslint-plugin": "5.23.0",
|
||||
@@ -2978,12 +2980,6 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@jest/core/node_modules/react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@jest/core/node_modules/rimraf": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
||||
@@ -5778,6 +5774,12 @@
|
||||
"node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/jest/node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/jsdom": {
|
||||
"version": "16.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-16.2.14.tgz",
|
||||
@@ -5857,6 +5859,15 @@
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-is": {
|
||||
"version": "17.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
|
||||
"integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-native": {
|
||||
"version": "0.67.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.67.6.tgz",
|
||||
@@ -9466,12 +9477,6 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/expect/node_modules/react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/expect/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -9855,20 +9860,6 @@
|
||||
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
@@ -11324,12 +11315,6 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-circus/node_modules/react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/jest-circus/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -11542,12 +11527,6 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-cli/node_modules/react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/jest-cli/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -11801,12 +11780,6 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-config/node_modules/react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/jest-config/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -11927,6 +11900,12 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-diff/node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/jest-diff/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -12110,12 +12089,6 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-each/node_modules/react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/jest-each/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -12524,12 +12497,6 @@
|
||||
"node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-leak-detector/node_modules/react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/jest-matcher-utils": {
|
||||
"version": "27.5.1",
|
||||
"resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz",
|
||||
@@ -12638,6 +12605,12 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-matcher-utils/node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/jest-matcher-utils/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -12781,12 +12754,6 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-message-util/node_modules/react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/jest-message-util/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -13199,12 +13166,6 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-resolve/node_modules/react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/jest-resolve/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -14096,12 +14057,6 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-snapshot/node_modules/react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/jest-snapshot/node_modules/semver": {
|
||||
"version": "7.3.7",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
|
||||
@@ -17369,6 +17324,12 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-format/node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/pretty-format/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -17584,10 +17545,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg=="
|
||||
},
|
||||
"node_modules/react-native": {
|
||||
"version": "0.68.2",
|
||||
@@ -17697,6 +17657,12 @@
|
||||
"react": "^16.0.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-shallow-renderer/node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/react-test-renderer": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.1.0.tgz",
|
||||
@@ -17711,12 +17677,6 @@
|
||||
"react": "^18.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-test-renderer/node_modules/react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/react-test-renderer/node_modules/react-shallow-renderer": {
|
||||
"version": "16.15.0",
|
||||
"resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
|
||||
@@ -22384,12 +22344,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"rimraf": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
||||
@@ -24571,6 +24525,12 @@
|
||||
"ansi-styles": "^5.0.0",
|
||||
"react-is": "^17.0.1"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -24653,6 +24613,15 @@
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"@types/react-is": {
|
||||
"version": "17.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
|
||||
"integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-native": {
|
||||
"version": "0.67.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.67.6.tgz",
|
||||
@@ -27375,12 +27344,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -27704,13 +27667,6 @@
|
||||
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
|
||||
"dev": true
|
||||
},
|
||||
"fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
@@ -28796,12 +28752,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -28962,12 +28912,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -29156,12 +29100,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -29250,6 +29188,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -29392,12 +29336,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -29715,12 +29653,6 @@
|
||||
"ansi-styles": "^5.0.0",
|
||||
"react-is": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -29801,6 +29733,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -29912,12 +29850,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -30213,12 +30145,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -30929,12 +30855,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"semver": {
|
||||
"version": "7.3.7",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
|
||||
@@ -33474,6 +33394,12 @@
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true
|
||||
},
|
||||
"react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -33633,10 +33559,9 @@
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg=="
|
||||
},
|
||||
"react-native": {
|
||||
"version": "0.68.2",
|
||||
@@ -33725,6 +33650,14 @@
|
||||
"requires": {
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.12.0 || ^17.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-test-renderer": {
|
||||
@@ -33738,12 +33671,6 @@
|
||||
"scheduler": "^0.22.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
|
||||
"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
|
||||
"dev": true
|
||||
},
|
||||
"react-shallow-renderer": {
|
||||
"version": "16.15.0",
|
||||
"resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
|
||||
|
||||
@@ -53,7 +53,8 @@
|
||||
"postcss": "^8.4.12",
|
||||
"postcss-calc": "^8.2.4",
|
||||
"postcss-color-functional-notation": "^4.2.2",
|
||||
"postcss-css-variables": "^0.18.0"
|
||||
"postcss-css-variables": "^0.18.0",
|
||||
"react-is": "^18.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.17.10",
|
||||
@@ -69,6 +70,7 @@
|
||||
"@types/jest": "27.5.0",
|
||||
"@types/micromatch": "4.0.2",
|
||||
"@types/react": "18.0.9",
|
||||
"@types/react-is": "^17.0.3",
|
||||
"@types/react-native": "0.67.6",
|
||||
"@types/tailwindcss": "3.0.10",
|
||||
"@typescript-eslint/eslint-plugin": "5.23.0",
|
||||
|
||||
23
src/plugin/LICENSE
Normal file
23
src/plugin/LICENSE
Normal file
@@ -0,0 +1,23 @@
|
||||
Sections of this code were originally developed by Tailwind Labs (https://github.com/tailwindlabs/tailwindcss)
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) Tailwind Labs, Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -1,50 +1,108 @@
|
||||
import { CustomPluginFunction } from "./types";
|
||||
import { flattenColorPalette } from "./utils";
|
||||
import withAlphaVariable from "tailwindcss/lib/util/withAlphaVariable";
|
||||
import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
|
||||
import toColorValue from "tailwindcss/lib/util/toColorValue";
|
||||
|
||||
export const divide: CustomPluginFunction = ({
|
||||
matchUtilities,
|
||||
theme,
|
||||
addUtilities,
|
||||
...other
|
||||
}) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const { corePlugins } = other as any;
|
||||
|
||||
export const divide: CustomPluginFunction = (
|
||||
{ matchUtilities, theme },
|
||||
notSupported
|
||||
) => {
|
||||
matchUtilities(
|
||||
{
|
||||
"divide-x": notSupported("divide-x"),
|
||||
"divide-y": notSupported("divide-y"),
|
||||
"divide-x": (value: string) => {
|
||||
value = value === "0" ? "0px" : value;
|
||||
|
||||
return {
|
||||
"&": {
|
||||
"@media --general-sibling-combinator": {
|
||||
// "@defaults border-width": {},
|
||||
"--tw-divide-x-reverse": "0",
|
||||
"border-right-width": `calc(${value} * var(--tw-divide-x-reverse))`,
|
||||
"border-left-width": `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
"divide-y": (value: string) => {
|
||||
value = value === "0" ? "0px" : value;
|
||||
|
||||
return {
|
||||
"&": {
|
||||
"@media --general-sibling-combinator": {
|
||||
// "@defaults border-width": {},
|
||||
"--tw-divide-y-reverse": "0",
|
||||
"border-top-width": `calc(${value} * var(--tw-divide-y-reverse))`,
|
||||
"border-bottom-width": `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
values: { ...theme("space"), reverse: 0 },
|
||||
supportsNegativeValues: true,
|
||||
}
|
||||
{ values: theme("divideWidth"), type: ["line-width", "length"] }
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
divide: notSupported("divide"),
|
||||
divide: (value: string) => {
|
||||
if (!corePlugins("divideOpacity")) {
|
||||
return {
|
||||
"&": {
|
||||
"@media --general-sibling-combinator": {
|
||||
"border-color": toColorValue(value),
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
"&": {
|
||||
"@media --general-sibling-combinator": withAlphaVariable({
|
||||
color: value,
|
||||
property: "border-color",
|
||||
variable: "--tw-divide-opacity",
|
||||
}),
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
values: flattenColorPalette(theme("divideColor")),
|
||||
values: (({ DEFAULT: _, ...colors }) => colors)(
|
||||
flattenColorPalette(theme("divideColor"))
|
||||
),
|
||||
type: "color",
|
||||
}
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
"divide-opacity": notSupported("divide-opacity"),
|
||||
},
|
||||
{ values: theme("divideOpacity") }
|
||||
);
|
||||
|
||||
matchUtilities(
|
||||
{
|
||||
divide: notSupported("divide-style"),
|
||||
},
|
||||
{
|
||||
values: {
|
||||
solid: "solid",
|
||||
dashed: "dashed",
|
||||
dotted: "dotted",
|
||||
double: "double",
|
||||
none: "none",
|
||||
addUtilities({
|
||||
".divide-solid": {
|
||||
"@media --general-sibling-combinator": {
|
||||
"border-style": "solid",
|
||||
},
|
||||
}
|
||||
);
|
||||
},
|
||||
".divide-dashed": {
|
||||
"@media --general-sibling-combinator": {
|
||||
"border-style": "dashed",
|
||||
},
|
||||
},
|
||||
".divide-dotted": {
|
||||
"@media --general-sibling-combinator": {
|
||||
"border-style": "dotted",
|
||||
},
|
||||
},
|
||||
".divide-double": {
|
||||
"@media --general-sibling-combinator": {
|
||||
"border-style": "double",
|
||||
},
|
||||
},
|
||||
".divide-none": {
|
||||
"@media --general-sibling-combinator": {
|
||||
"border-style": "none",
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
52
src/plugin/native/gap.ts
Normal file
52
src/plugin/native/gap.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { CustomPluginFunction } from "./types";
|
||||
|
||||
export const gap: CustomPluginFunction = ({ matchUtilities, theme }) => {
|
||||
matchUtilities(
|
||||
{
|
||||
gap: (value: string) => {
|
||||
value = value === "0" ? "0px" : value;
|
||||
value = value === "px" ? "1px" : value;
|
||||
|
||||
return {
|
||||
"&": {
|
||||
margin: `calc(${value} / -2)`,
|
||||
"@media --general-sibling-combinator": {
|
||||
margin: `calc(${value} / 2)`,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
"gap-x": (value: string) => {
|
||||
value = value === "0" ? "0px" : value;
|
||||
value = value === "px" ? "1px" : value;
|
||||
|
||||
return {
|
||||
"&": {
|
||||
"margin-left": `calc(${value} / -2)`,
|
||||
"margin-rigth": `calc(${value} / -2)`,
|
||||
"@media --general-sibling-combinator": {
|
||||
"margin-left": `calc(${value} / 2)`,
|
||||
"margin-right": `calc(${value} / 2)`,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
"gap-y": (value: string) => {
|
||||
value = value === "0" ? "0px" : value;
|
||||
value = value === "px" ? "1px" : value;
|
||||
|
||||
return {
|
||||
"&": {
|
||||
"margin-top": `calc(${value} / -2)`,
|
||||
"margin-bottom": `calc(${value} / -2)`,
|
||||
"@media --general-sibling-combinator": {
|
||||
"margin-top": `calc(${value} / 2)`,
|
||||
"margin-bottom": `calc(${value} / 2)`,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{ values: theme("gap") }
|
||||
);
|
||||
};
|
||||
@@ -197,6 +197,7 @@ export const nativePlugin = plugin.withOptions<NativePluginOptions | undefined>(
|
||||
skew: false,
|
||||
translate: false,
|
||||
boxShadow: false,
|
||||
gap: false,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -1,17 +1,52 @@
|
||||
import { CustomPluginFunction } from "./types";
|
||||
|
||||
export const space: CustomPluginFunction = (
|
||||
{ matchUtilities, theme },
|
||||
notSupported
|
||||
) => {
|
||||
export const space: CustomPluginFunction = ({
|
||||
matchUtilities,
|
||||
theme,
|
||||
addUtilities,
|
||||
}) => {
|
||||
matchUtilities(
|
||||
{
|
||||
"space-x": notSupported("space-x"),
|
||||
"space-y": notSupported("space-y"),
|
||||
"space-x": (value: string) => {
|
||||
value = value === "0" ? "0px" : value;
|
||||
|
||||
return {
|
||||
"&": {
|
||||
"@media --general-sibling-combinator": {
|
||||
"--tw-space-x-reverse": "0",
|
||||
"margin-right": `calc(${value} * var(--tw-space-x-reverse))`,
|
||||
"margin-left": `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
"space-y": (value: string) => {
|
||||
value = value === "0" ? "0px" : value;
|
||||
|
||||
return {
|
||||
"&": {
|
||||
"@media --general-sibling-combinator": {
|
||||
"--tw-space-y-reverse": "0",
|
||||
"margin-top": `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
|
||||
"margin-bottom": `calc(${value} * var(--tw-space-y-reverse))`,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
values: { ...theme("space"), reverse: 0 },
|
||||
supportsNegativeValues: true,
|
||||
}
|
||||
{ values: theme("space"), supportsNegativeValues: true }
|
||||
);
|
||||
|
||||
addUtilities({
|
||||
".space-y-reverse": {
|
||||
"@media --general-sibling-combinator": {
|
||||
"--tw-space-y-reverse": "1",
|
||||
},
|
||||
},
|
||||
".space-x-reverse": {
|
||||
"@media --general-sibling-combinator": {
|
||||
"--tw-space-x-reverse": "1",
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@@ -7,15 +7,3 @@ export function isPlainObject(value: unknown): value is Object {
|
||||
const prototype = Object.getPrototypeOf(value);
|
||||
return prototype === null || prototype === Object.prototype;
|
||||
}
|
||||
|
||||
export const flattenColorPalette = (colors: object): Record<string, unknown> =>
|
||||
Object.assign(
|
||||
{},
|
||||
...Object.entries(colors ?? {}).flatMap(([color, values]) =>
|
||||
typeof values == "object"
|
||||
? Object.entries(flattenColorPalette(values)).map(([number, hex]) => ({
|
||||
[color + (number === "DEFAULT" ? "" : `-${number}`)]: hex,
|
||||
}))
|
||||
: [{ [`${color}`]: values }]
|
||||
)
|
||||
);
|
||||
|
||||
@@ -66,20 +66,21 @@ export const plugin: PluginCreator<PostcssPluginOptions> = ({
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.parent?.[mediaStringSymbol]) {
|
||||
// The parent has a media query, so this needs to be added a media style
|
||||
for (const s of node.selectors) {
|
||||
for (const s of node.selectors) {
|
||||
if (node.parent?.[mediaStringSymbol]) {
|
||||
// The parent has a media query, so this needs to be added a media style
|
||||
const selector = normaliseSelector(s, { important });
|
||||
const mediaQuery = node.parent[mediaStringSymbol];
|
||||
|
||||
media[selector] ??= [];
|
||||
styles[`${selector}.${media[selector].length}`] = declarations;
|
||||
media[selector].push(node.parent[mediaStringSymbol]);
|
||||
}
|
||||
} else {
|
||||
// The parent is the root, so we are not in a media query
|
||||
for (const s of node.selectors) {
|
||||
const selector = normaliseSelector(s, { important });
|
||||
styles[selector] = { ...styles[selector], ...declarations };
|
||||
media[selector].push(mediaQuery);
|
||||
} else {
|
||||
// The parent is the root, so we are not in a media query
|
||||
for (const s of node.selectors) {
|
||||
const selector = normaliseSelector(s, { important });
|
||||
styles[selector] = { ...styles[selector], ...declarations };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,8 @@ export function normaliseSelector(
|
||||
selector: string,
|
||||
{ important }: Partial<TailwindConfig> = {}
|
||||
) {
|
||||
if (selector.startsWith("--")) return selector.slice(2);
|
||||
|
||||
const leadingDots = "^\\.";
|
||||
const nonWordCharactersExceptDash = new RegExp("[^a-zA-Z0-9-]+", "g");
|
||||
|
||||
|
||||
@@ -1,12 +1,27 @@
|
||||
import { createElement, FunctionComponent, ComponentClass } from "react";
|
||||
import {
|
||||
createElement,
|
||||
FunctionComponent,
|
||||
ComponentClass,
|
||||
PropsWithChildren,
|
||||
Children,
|
||||
cloneElement,
|
||||
} from "react";
|
||||
import { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
|
||||
import { useTailwind } from "./use-tailwind";
|
||||
import { ChildClassNameSymbol } from "./utils/child-styles";
|
||||
import { isFragment } from "react-is";
|
||||
|
||||
type StyledProps<P> = P & {
|
||||
className?: string;
|
||||
tw?: string;
|
||||
style?: StyleProp<ViewStyle | TextStyle | ImageStyle>;
|
||||
};
|
||||
const isStyled = Symbol("styled");
|
||||
|
||||
type StyledProps<P> = PropsWithChildren<
|
||||
P & {
|
||||
className?: string;
|
||||
inheritedClassName?: string;
|
||||
nthChild?: number;
|
||||
tw?: string;
|
||||
style?: StyleProp<ViewStyle | TextStyle | ImageStyle>;
|
||||
}
|
||||
>;
|
||||
|
||||
type Component<P> = string | FunctionComponent<P> | ComponentClass<P>;
|
||||
|
||||
@@ -16,16 +31,40 @@ export function styled<P>(
|
||||
function Styled({
|
||||
className,
|
||||
tw,
|
||||
inheritedClassName,
|
||||
nthChild,
|
||||
style: styleProperty,
|
||||
children: componentChildren,
|
||||
...props
|
||||
}: StyledProps<P>) {
|
||||
const tailwindStyleIds = useTailwind()(tw ?? className);
|
||||
const tailwindStyles = useTailwind({
|
||||
nthChild,
|
||||
[ChildClassNameSymbol]: inheritedClassName,
|
||||
})(tw ?? className);
|
||||
|
||||
const style = styleProperty
|
||||
? [tailwindStyleIds, styleProperty]
|
||||
: tailwindStyleIds;
|
||||
? [tailwindStyles, styleProperty]
|
||||
: tailwindStyles;
|
||||
|
||||
return createElement(Component, { ...props, style } as unknown as P);
|
||||
let children = isFragment(componentChildren)
|
||||
? // This probably needs to be recursive
|
||||
componentChildren.props.children
|
||||
: componentChildren;
|
||||
|
||||
if (tailwindStyles[ChildClassNameSymbol]) {
|
||||
children = Children.map(children, (child, index) => {
|
||||
return cloneElement(child, {
|
||||
nthChild: index,
|
||||
inheritedClassName: tailwindStyles[ChildClassNameSymbol],
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return createElement(Component, {
|
||||
...props,
|
||||
style,
|
||||
children,
|
||||
} as unknown as P);
|
||||
}
|
||||
|
||||
if (typeof Component !== "string") {
|
||||
|
||||
16
src/types/node-modules.d.ts
vendored
16
src/types/node-modules.d.ts
vendored
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
declare module "postcss-css-variables" {
|
||||
export default unknown;
|
||||
}
|
||||
@@ -15,3 +16,18 @@ declare module "css-mediaquery" {
|
||||
values: Partial<MediaValues> & { type: string }
|
||||
): boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tailwindcss internal functions
|
||||
*/
|
||||
declare module "tailwindcss/lib/util/withAlphaVariable" {
|
||||
export default function (options: unknown): any;
|
||||
}
|
||||
|
||||
declare module "tailwindcss/lib/util/flattenColorPalette" {
|
||||
export default function (options: unknown): any;
|
||||
}
|
||||
|
||||
declare module "tailwindcss/lib/util/toColorValue" {
|
||||
export default function (options: unknown): any;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useContext } from "react";
|
||||
import { useContext, useState } from "react";
|
||||
import {
|
||||
TextStyle,
|
||||
ViewStyle,
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
ImageStyle,
|
||||
Platform,
|
||||
} from "react-native";
|
||||
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { match } from "css-mediaquery";
|
||||
import { normaliseSelector } from "./shared/selector";
|
||||
import { TailwindContext } from "./context";
|
||||
@@ -16,6 +16,8 @@ import {
|
||||
UseTailwindOptions,
|
||||
} from "./use-tailwind";
|
||||
|
||||
import { ChildClassNameSymbol } from "./utils/child-styles";
|
||||
|
||||
export function useTailwind<P extends ViewStyle>(
|
||||
options?: UseTailwindOptions
|
||||
): UseTailwindCallback<P>;
|
||||
@@ -28,7 +30,7 @@ export function useTailwind<P extends ImageStyle>(
|
||||
export function useTailwind<P extends RWNCssStyle>(
|
||||
options?: UseTailwindOptions
|
||||
): UseTailwindCallback<P>;
|
||||
export function useTailwind<P>({ siblingClassName = "" } = {}) {
|
||||
export function useTailwind<P>(options: UseTailwindOptions = {}) {
|
||||
const {
|
||||
platform,
|
||||
styles,
|
||||
@@ -38,6 +40,8 @@ export function useTailwind<P>({ siblingClassName = "" } = {}) {
|
||||
orientation,
|
||||
colorScheme,
|
||||
} = useContext(TailwindContext);
|
||||
let [nthChild] = useState(options.nthChild ?? 0);
|
||||
const inheritedClassNames = options[ChildClassNameSymbol] ?? "";
|
||||
|
||||
if (!platform) {
|
||||
throw new Error(
|
||||
@@ -46,11 +50,27 @@ export function useTailwind<P>({ siblingClassName = "" } = {}) {
|
||||
}
|
||||
|
||||
return (className = "") => {
|
||||
let tailwindStyles = {} as P;
|
||||
let tailwindStyles = {} as P & {
|
||||
[ChildClassNameSymbol]?: string;
|
||||
};
|
||||
const transforms: ViewStyle["transform"] = [];
|
||||
let childStyles = "";
|
||||
nthChild++;
|
||||
|
||||
for (const name of `${siblingClassName} ${className}`.trim().split(" ")) {
|
||||
const selector = normaliseSelector(name);
|
||||
for (const name of `${inheritedClassNames} ${className}`
|
||||
.trim()
|
||||
.split(/\s+/)) {
|
||||
let selector = normaliseSelector(name);
|
||||
|
||||
if (name.startsWith("--")) {
|
||||
const [mediaQuery, ...selectorParts] = name.split(".");
|
||||
|
||||
if (mediaQuery === "--general-sibling-combinator" && nthChild === 1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
selector = selectorParts.join(".");
|
||||
}
|
||||
|
||||
if (styles[selector]) {
|
||||
const { transform, ...rest } = styles[selector];
|
||||
@@ -71,29 +91,34 @@ export function useTailwind<P>({ siblingClassName = "" } = {}) {
|
||||
}
|
||||
|
||||
for (let index = 0, length = rules.length; index < length; index++) {
|
||||
const isMatch = match(rules[index], {
|
||||
"aspect-ratio": width / height,
|
||||
"device-aspect-ratio": width / height,
|
||||
type: platform,
|
||||
width,
|
||||
height,
|
||||
"device-width": width,
|
||||
"device-height": width,
|
||||
orientation,
|
||||
"prefers-color-scheme": colorScheme,
|
||||
});
|
||||
const mediaQuery = rules[index];
|
||||
if (mediaQuery.startsWith("--")) {
|
||||
childStyles += ` ${mediaQuery}.${selector}.${index}`;
|
||||
} else {
|
||||
const isMatch = match(rules[index], {
|
||||
"aspect-ratio": width / height,
|
||||
"device-aspect-ratio": width / height,
|
||||
type: platform,
|
||||
width,
|
||||
height,
|
||||
"device-width": width,
|
||||
"device-height": width,
|
||||
orientation,
|
||||
"prefers-color-scheme": colorScheme,
|
||||
});
|
||||
|
||||
const { transform, ...rest } = styles[`${selector}.${index}`];
|
||||
const { transform, ...rest } = styles[`${selector}.${index}`];
|
||||
|
||||
if (isMatch) {
|
||||
tailwindStyles = {
|
||||
...tailwindStyles,
|
||||
...rest,
|
||||
};
|
||||
}
|
||||
if (isMatch) {
|
||||
tailwindStyles = {
|
||||
...tailwindStyles,
|
||||
...rest,
|
||||
};
|
||||
}
|
||||
|
||||
if (transform) {
|
||||
transforms.push(...transform);
|
||||
if (transform) {
|
||||
transforms.push(...transform);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -103,6 +128,8 @@ export function useTailwind<P>({ siblingClassName = "" } = {}) {
|
||||
(tailwindStyles as any).transform = transforms;
|
||||
}
|
||||
|
||||
tailwindStyles[ChildClassNameSymbol] = childStyles;
|
||||
|
||||
return Platform.OS === "web"
|
||||
? StyleSheet.flatten(tailwindStyles) // RNW <=0.17 still uses ReactNativePropRegistry
|
||||
: tailwindStyles;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { StyleProp } from "react-native";
|
||||
import { ChildClassNameSymbol } from "./utils/child-styles";
|
||||
|
||||
export { useTailwind } from "./use-tailwind.web";
|
||||
|
||||
@@ -7,8 +8,12 @@ export type RWNCssStyle = {
|
||||
tailwindClassName: string;
|
||||
};
|
||||
|
||||
export type UseTailwindCallback<P> = (className?: string) => StyleProp<P> & P;
|
||||
export type UseTailwindCallback<P> = (className?: string) => StyleProp<P> &
|
||||
P & {
|
||||
[ChildClassNameSymbol]?: string;
|
||||
};
|
||||
|
||||
export interface UseTailwindOptions {
|
||||
siblingClassName?: string;
|
||||
nthChild?: number;
|
||||
[ChildClassNameSymbol]?: string;
|
||||
}
|
||||
|
||||
1
src/utils/child-styles.ts
Normal file
1
src/utils/child-styles.ts
Normal file
@@ -0,0 +1 @@
|
||||
export const ChildClassNameSymbol = Symbol("child");
|
||||
Reference in New Issue
Block a user