diff --git a/src/babel/root-visitor.ts b/src/babel/root-visitor.ts index f790034..58851b4 100644 --- a/src/babel/root-visitor.ts +++ b/src/babel/root-visitor.ts @@ -80,7 +80,6 @@ export default function rootVisitor( blockList: new Set(), hasStyleSheetImport: false, tailwindConfig, - tailwindConfigPath, }; // Traverse the file diff --git a/src/babel/visitor.ts b/src/babel/visitor.ts index abe01f3..4a42a0e 100644 --- a/src/babel/visitor.ts +++ b/src/babel/visitor.ts @@ -16,14 +16,13 @@ import { Config } from "tailwindcss"; export interface VisitorState extends State, - Required { + Omit, "tailwindConfigPath"> { cwd: string; allowRelativeModules: AllowPathOptions; blockList: Set; hasStyledComponentImport: boolean; hasStyleSheetImport: boolean; tailwindConfig: Config; - tailwindConfigPath: string; canCompile: boolean; canTransform: boolean; didTransform: boolean; diff --git a/src/style-sheet-store/index.ts b/src/style-sheet-store/index.ts index 1f0c926..2428726 100644 --- a/src/style-sheet-store/index.ts +++ b/src/style-sheet-store/index.ts @@ -483,4 +483,5 @@ const flattenIfRNW = (style: T | number): T => { : style; }; -export const StoreContext = createContext(new StyleSheetStore()); +export const StyleSheetStoreSingleton = new StyleSheetStore(); +export const StoreContext = createContext(StyleSheetStoreSingleton); diff --git a/website/docs/guides/babel.mdx b/website/docs/guides/babel.mdx index ee6868d..8854234 100644 --- a/website/docs/guides/babel.mdx +++ b/website/docs/guides/babel.mdx @@ -1,6 +1,7 @@ import StartCoding from "../_start-coding.md"; import Dependencies from "../_dependencies.mdx"; import Tailwind from "../_tailwind.mdx"; +import BabelEditor from "../../src/babel-editor"; # Babel @@ -8,6 +9,8 @@ The default babel configuration will both compile/inject the Tailwind CSS styles This is the recommended configuration as it provides the fastest setup and best DX experience, with support for Tailwind intellisense within your IDE. + + ```tsx /* Example how your code will look */ import { Text } from "react-native"; diff --git a/website/docs/tailwind/layout/container.md b/website/docs/tailwind/layout/container.md new file mode 100644 index 0000000..743ba75 --- /dev/null +++ b/website/docs/tailwind/layout/container.md @@ -0,0 +1,23 @@ +# Container + +:::caution +NativeWind's default theme is not yet designed for native devices and still uses breakpoints that were mostly designed for web. +::: + +`container` is fully supported by NativeWind. Please see [Tailwind CSS documentation for usuage](https://tailwindcss.com/docs/container) + +```SnackPlayer name=Container +import { Text, View } from 'react-native'; +import { styled } from 'nativewind'; + +const StyledView = styled(View) +const StyledText = styled(Text) + +const App = () => { + return ( + + Try editing me! 🎉 + + ); +} +``` diff --git a/website/package-lock.json b/website/package-lock.json index 17397a6..14010ff 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -8,12 +8,18 @@ "name": "website", "version": "0.0.0", "dependencies": { + "@babel/standalone": "^7.18.5", + "@codemirror/lang-javascript": "^6.0.0", "@docusaurus/core": "2.0.0-beta.21", "@docusaurus/preset-classic": "2.0.0-beta.21", "@mdx-js/react": "1.6.22", + "@uiw/codemirror-theme-dracula": "^4.9.4", + "@uiw/codemirror-theme-eclipse": "^4.9.4", + "@uiw/react-codemirror": "^4.9.4", "clsx": "1.1.1", "dedent": "^0.7.0", - "nativewind": "latest", + "lodash.debounce": "^4.0.8", + "nativewind": "^2.0.0-next.24", "prism-react-renderer": "1.3.3", "react": "17.0.2", "react-dom": "17.0.2", @@ -21,6 +27,10 @@ "tailwindcss": "^3.1.4", "unist-builder": "^2.0.3", "unist-util-visit-parents": "^3.1.1" + }, + "devDependencies": { + "@types/babel__standalone": "^7.1.4", + "@types/lodash.debounce": "^4.0.7" } }, "node_modules/@algolia/autocomplete-core": { @@ -578,9 +588,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.18.3", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.3.tgz", - "integrity": "sha512-rL50YcEuHbbauAFAysNsJA4/f89fGTOBRNs9P81sniKnKAr4xULe5AecolcsKbi88xu0ByWYDj/S1AJ3FSFuSQ==", + "version": "7.18.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz", + "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==", "bin": { "parser": "bin/babel-parser.js" }, @@ -1819,6 +1829,14 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/standalone": { + "version": "7.18.5", + "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.18.5.tgz", + "integrity": "sha512-3RlzTl3JSvbY1bvaRmuHf3fM2BSy7IbX0zqpVFjsiGO7678KE/LytwvJN+f5MGrarnUFUz2DNcCdetumWdIAKA==", + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", @@ -1864,6 +1882,107 @@ "node": ">=6.9.0" } }, + "node_modules/@codemirror/autocomplete": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.0.2.tgz", + "integrity": "sha512-9PDjnllmXan/7Uax87KGORbxerDJ/cu10SB+n4Jz0zXMEvIh3+TGgZxhIvDOtaQ4jDBQEM7kHYW4vLdQB0DGZQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + }, + "peerDependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/commands": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.0.0.tgz", + "integrity": "sha512-nVJDPiCQXWXj5AZxqNVXyIM3nOYauF4Dko9NGPSwgVdK+lXWJQhI5LGhS/AvdG5b7u7/pTQBkrQmzkLWRBF62A==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-javascript": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.0.0.tgz", + "integrity": "sha512-IQLfR+pgydwLxP3AQYOhjGfLWlAZz5SEH+M1tnUXVvp2+KZhn3iDTQX/7HZgoJ3w0oySKOxPjdq6jmkTCW6/sg==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/javascript": "^1.0.0" + } + }, + "node_modules/@codemirror/language": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.1.0.tgz", + "integrity": "sha512-CeqY80nvUFrJcXcBW115aNi06D0PS8NSW6nuJRSwbrYFkE0SfJnPfyLGrcM90AV95lqg5+4xUi99BCmzNaPGJg==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "node_modules/@codemirror/lint": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz", + "integrity": "sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/search": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.0.0.tgz", + "integrity": "sha512-rL0rd3AhI0TAsaJPUaEwC63KHLO7KL0Z/dYozXj6E7L3wNHRyx7RfE0/j5HsIf912EE5n2PCb4Vg0rGYmDv4UQ==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/state": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.0.1.tgz", + "integrity": "sha512-6vYgaXc4KjSY0BUfSVDJooGcoswg/RJZpq/ZGjsUYmY0KN1lmB8u03nv+jiG1ncUV5qoggyxFT5AGD5Ak+5Zrw==" + }, + "node_modules/@codemirror/theme-one-dark": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.0.0.tgz", + "integrity": "sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/highlight": "^1.0.0" + } + }, + "node_modules/@codemirror/view": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.0.2.tgz", + "integrity": "sha512-mnVT/q1JvKPjpmjXJNeCi/xHyaJ3abGJsumIVpdQ1nE1MXAyHf7GHWt8QpWMUvDiqF0j+inkhVR2OviTdFFX7Q==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "style-mod": "^4.0.0", + "w3c-keyname": "^2.2.4" + } + }, "node_modules/@colors/colors": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz", @@ -2603,6 +2722,36 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz", "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==" }, + "node_modules/@lezer/common": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.0.tgz", + "integrity": "sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA==" + }, + "node_modules/@lezer/highlight": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.0.0.tgz", + "integrity": "sha512-nsCnNtim90UKsB5YxoX65v3GEIw3iCHw9RM2DtdgkiqAbKh9pCdvi8AWNwkYf10Lu6fxNhXPpkpHbW6mihhvJA==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@lezer/javascript": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.0.tgz", + "integrity": "sha512-RawBSrMD9yrVdrXWKn7hqo5BqgBaFelUx80i6p2/V0f+0THjncSSrRC6v3QWVv++RpqWT59L8ujKZjlExJq9xw==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/lr": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.0.0.tgz", + "integrity": "sha512-k6DEqBh4HxqO/cVGedb6Ern6LS7K6IOzfydJ5WaqCR26v6UR9sIFyb6PS+5rPUs/mXgnBR/QQCW7RkyjSCMoQA==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, "node_modules/@mdx-js/mdx": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.22.tgz", @@ -3147,6 +3296,15 @@ "node": ">=10.13.0" } }, + "node_modules/@types/babel__standalone": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/@types/babel__standalone/-/babel__standalone-7.1.4.tgz", + "integrity": "sha512-HijIDmcNl3Wmo0guqjYkQvMzyRCM6zMCkYcdG8f+2X7mPBNa9ikSeaQlWs2Yg18KN1klOJzyupX5BPOf+7ahaw==", + "dev": true, + "dependencies": { + "@babel/core": "^7.1.0" + } + }, "node_modules/@types/body-parser": { "version": "1.19.2", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz", @@ -3256,6 +3414,21 @@ "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==" }, + "node_modules/@types/lodash": { + "version": "4.14.182", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz", + "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==", + "dev": true + }, + "node_modules/@types/lodash.debounce": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz", + "integrity": "sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==", + "dev": true, + "dependencies": { + "@types/lodash": "*" + } + }, "node_modules/@types/mdast": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz", @@ -3394,6 +3567,47 @@ "@types/node": "*" } }, + "node_modules/@uiw/codemirror-theme-dracula": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-dracula/-/codemirror-theme-dracula-4.9.4.tgz", + "integrity": "sha512-NHhfOm9tbzD8zw/ev2kordyRmiO3A7B5MzMFkpxCP4vTZH/+TR/jctw+RfN+1DwJYXUo1DEultvRWJ99u9zTjg==", + "dependencies": { + "@uiw/codemirror-themes": "4.9.4" + } + }, + "node_modules/@uiw/codemirror-theme-eclipse": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-eclipse/-/codemirror-theme-eclipse-4.9.4.tgz", + "integrity": "sha512-CWHVlMz0b0HagygDuFarZLr1W2esTbo1/O0euU3Aar48xRDQolSgmFM37qRlgkBZdaM4okFPhHmv5afJ6oUNdA==", + "dependencies": { + "@uiw/codemirror-themes": "4.9.4" + } + }, + "node_modules/@uiw/codemirror-themes": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.9.4.tgz", + "integrity": "sha512-8aBVCenwvhIUjs6HNenqZhxIbrRdN/sBVPmikPi3lntK1HfGRqBHmU0XjdCjp6uGXwUl7b5J0mmNsKS7PaLPWg==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + } + }, + "node_modules/@uiw/react-codemirror": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.9.4.tgz", + "integrity": "sha512-IsC5xDevpIeLMzHQQwT2W40gFFIdKeT1T0DHjzzai+s5SIrMlGe3QSHWeC1wSO7FtfNxFpFlTYMGJm5JwUviMA==", + "dependencies": { + "@babel/runtime": ">=7.11.0", + "@codemirror/theme-one-dark": "^6.0.0", + "codemirror": "^6.0.0" + }, + "peerDependencies": { + "@babel/runtime": ">=7.11.0", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -4724,6 +4938,20 @@ "node": ">=6" } }, + "node_modules/codemirror": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.0.tgz", + "integrity": "sha512-c4XR9QtDn+NhKLM2FBsnRn9SFdRH7G6594DYC/fyKKIsTOcdLF0WNWRd+f6kNyd5j1vgYPucbIeq2XkywYCwhA==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/commands": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/search": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + } + }, "node_modules/collapse-white-space": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz", @@ -5090,6 +5318,11 @@ "node": ">=10" } }, + "node_modules/crelt": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz", + "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==" + }, "node_modules/cross-fetch": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", @@ -7942,7 +8175,7 @@ "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", - "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, "node_modules/lodash.defaults": { "version": "4.2.0", @@ -8386,9 +8619,9 @@ } }, "node_modules/nativewind": { - "version": "2.0.0-next.23", - "resolved": "https://registry.npmjs.org/nativewind/-/nativewind-2.0.0-next.23.tgz", - "integrity": "sha512-fJlNRrwGYcNHOVUMvKnj3A+2sa9tSDLleWDe219CnSADfwl+opc3heESv3ieISR3VwhMu8/eFSO04gvxyDPYZw==", + "version": "2.0.0-next.24", + "resolved": "https://registry.npmjs.org/nativewind/-/nativewind-2.0.0-next.24.tgz", + "integrity": "sha512-RT4p99OGvrFT8kTVz8qqU2WXLCQX1ZFxX33hfSOpj/eAPiSZRktD1w0qd9vfr5Z8ybHMnbMYuJ/AdFgA8lpFPQ==", "dependencies": { "@babel/types": "7.18.4", "css-mediaquery": "^0.1.2", @@ -11552,6 +11785,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-mod": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz", + "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==" + }, "node_modules/style-to-object": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz", @@ -12573,6 +12811,11 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/w3c-keyname": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz", + "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==" + }, "node_modules/wait-on": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-6.0.1.tgz", @@ -13788,9 +14031,9 @@ } }, "@babel/parser": { - "version": "7.18.3", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.3.tgz", - "integrity": "sha512-rL50YcEuHbbauAFAysNsJA4/f89fGTOBRNs9P81sniKnKAr4xULe5AecolcsKbi88xu0ByWYDj/S1AJ3FSFuSQ==" + "version": "7.18.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz", + "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==" }, "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { "version": "7.17.12", @@ -14589,6 +14832,11 @@ "regenerator-runtime": "^0.13.4" } }, + "@babel/standalone": { + "version": "7.18.5", + "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.18.5.tgz", + "integrity": "sha512-3RlzTl3JSvbY1bvaRmuHf3fM2BSy7IbX0zqpVFjsiGO7678KE/LytwvJN+f5MGrarnUFUz2DNcCdetumWdIAKA==" + }, "@babel/template": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", @@ -14625,6 +14873,101 @@ "to-fast-properties": "^2.0.0" } }, + "@codemirror/autocomplete": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.0.2.tgz", + "integrity": "sha512-9PDjnllmXan/7Uax87KGORbxerDJ/cu10SB+n4Jz0zXMEvIh3+TGgZxhIvDOtaQ4jDBQEM7kHYW4vLdQB0DGZQ==", + "requires": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "@codemirror/commands": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.0.0.tgz", + "integrity": "sha512-nVJDPiCQXWXj5AZxqNVXyIM3nOYauF4Dko9NGPSwgVdK+lXWJQhI5LGhS/AvdG5b7u7/pTQBkrQmzkLWRBF62A==", + "requires": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "@codemirror/lang-javascript": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.0.0.tgz", + "integrity": "sha512-IQLfR+pgydwLxP3AQYOhjGfLWlAZz5SEH+M1tnUXVvp2+KZhn3iDTQX/7HZgoJ3w0oySKOxPjdq6jmkTCW6/sg==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/javascript": "^1.0.0" + } + }, + "@codemirror/language": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.1.0.tgz", + "integrity": "sha512-CeqY80nvUFrJcXcBW115aNi06D0PS8NSW6nuJRSwbrYFkE0SfJnPfyLGrcM90AV95lqg5+4xUi99BCmzNaPGJg==", + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "@codemirror/lint": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz", + "integrity": "sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==", + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "@codemirror/search": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.0.0.tgz", + "integrity": "sha512-rL0rd3AhI0TAsaJPUaEwC63KHLO7KL0Z/dYozXj6E7L3wNHRyx7RfE0/j5HsIf912EE5n2PCb4Vg0rGYmDv4UQ==", + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "@codemirror/state": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.0.1.tgz", + "integrity": "sha512-6vYgaXc4KjSY0BUfSVDJooGcoswg/RJZpq/ZGjsUYmY0KN1lmB8u03nv+jiG1ncUV5qoggyxFT5AGD5Ak+5Zrw==" + }, + "@codemirror/theme-one-dark": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.0.0.tgz", + "integrity": "sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==", + "requires": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/highlight": "^1.0.0" + } + }, + "@codemirror/view": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.0.2.tgz", + "integrity": "sha512-mnVT/q1JvKPjpmjXJNeCi/xHyaJ3abGJsumIVpdQ1nE1MXAyHf7GHWt8QpWMUvDiqF0j+inkhVR2OviTdFFX7Q==", + "requires": { + "@codemirror/state": "^6.0.0", + "style-mod": "^4.0.0", + "w3c-keyname": "^2.2.4" + } + }, "@colors/colors": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz", @@ -15186,6 +15529,36 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz", "integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==" }, + "@lezer/common": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.0.tgz", + "integrity": "sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA==" + }, + "@lezer/highlight": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.0.0.tgz", + "integrity": "sha512-nsCnNtim90UKsB5YxoX65v3GEIw3iCHw9RM2DtdgkiqAbKh9pCdvi8AWNwkYf10Lu6fxNhXPpkpHbW6mihhvJA==", + "requires": { + "@lezer/common": "^1.0.0" + } + }, + "@lezer/javascript": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.0.tgz", + "integrity": "sha512-RawBSrMD9yrVdrXWKn7hqo5BqgBaFelUx80i6p2/V0f+0THjncSSrRC6v3QWVv++RpqWT59L8ujKZjlExJq9xw==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/lr": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.0.0.tgz", + "integrity": "sha512-k6DEqBh4HxqO/cVGedb6Ern6LS7K6IOzfydJ5WaqCR26v6UR9sIFyb6PS+5rPUs/mXgnBR/QQCW7RkyjSCMoQA==", + "requires": { + "@lezer/common": "^1.0.0" + } + }, "@mdx-js/mdx": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.22.tgz", @@ -15557,6 +15930,15 @@ "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==" }, + "@types/babel__standalone": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/@types/babel__standalone/-/babel__standalone-7.1.4.tgz", + "integrity": "sha512-HijIDmcNl3Wmo0guqjYkQvMzyRCM6zMCkYcdG8f+2X7mPBNa9ikSeaQlWs2Yg18KN1klOJzyupX5BPOf+7ahaw==", + "dev": true, + "requires": { + "@babel/core": "^7.1.0" + } + }, "@types/body-parser": { "version": "1.19.2", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz", @@ -15666,6 +16048,21 @@ "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==" }, + "@types/lodash": { + "version": "4.14.182", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz", + "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==", + "dev": true + }, + "@types/lodash.debounce": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz", + "integrity": "sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==", + "dev": true, + "requires": { + "@types/lodash": "*" + } + }, "@types/mdast": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz", @@ -15804,6 +16201,42 @@ "@types/node": "*" } }, + "@uiw/codemirror-theme-dracula": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-dracula/-/codemirror-theme-dracula-4.9.4.tgz", + "integrity": "sha512-NHhfOm9tbzD8zw/ev2kordyRmiO3A7B5MzMFkpxCP4vTZH/+TR/jctw+RfN+1DwJYXUo1DEultvRWJ99u9zTjg==", + "requires": { + "@uiw/codemirror-themes": "4.9.4" + } + }, + "@uiw/codemirror-theme-eclipse": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/@uiw/codemirror-theme-eclipse/-/codemirror-theme-eclipse-4.9.4.tgz", + "integrity": "sha512-CWHVlMz0b0HagygDuFarZLr1W2esTbo1/O0euU3Aar48xRDQolSgmFM37qRlgkBZdaM4okFPhHmv5afJ6oUNdA==", + "requires": { + "@uiw/codemirror-themes": "4.9.4" + } + }, + "@uiw/codemirror-themes": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.9.4.tgz", + "integrity": "sha512-8aBVCenwvhIUjs6HNenqZhxIbrRdN/sBVPmikPi3lntK1HfGRqBHmU0XjdCjp6uGXwUl7b5J0mmNsKS7PaLPWg==", + "requires": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + } + }, + "@uiw/react-codemirror": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.9.4.tgz", + "integrity": "sha512-IsC5xDevpIeLMzHQQwT2W40gFFIdKeT1T0DHjzzai+s5SIrMlGe3QSHWeC1wSO7FtfNxFpFlTYMGJm5JwUviMA==", + "requires": { + "@babel/runtime": ">=7.11.0", + "@codemirror/theme-one-dark": "^6.0.0", + "codemirror": "^6.0.0" + } + }, "@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -16808,6 +17241,20 @@ "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" }, + "codemirror": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.0.tgz", + "integrity": "sha512-c4XR9QtDn+NhKLM2FBsnRn9SFdRH7G6594DYC/fyKKIsTOcdLF0WNWRd+f6kNyd5j1vgYPucbIeq2XkywYCwhA==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/commands": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/search": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + } + }, "collapse-white-space": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz", @@ -17079,6 +17526,11 @@ "yaml": "^1.10.0" } }, + "crelt": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz", + "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==" + }, "cross-fetch": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", @@ -19128,7 +19580,7 @@ "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", - "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, "lodash.defaults": { "version": "4.2.0", @@ -19462,9 +19914,9 @@ "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" }, "nativewind": { - "version": "2.0.0-next.23", - "resolved": "https://registry.npmjs.org/nativewind/-/nativewind-2.0.0-next.23.tgz", - "integrity": "sha512-fJlNRrwGYcNHOVUMvKnj3A+2sa9tSDLleWDe219CnSADfwl+opc3heESv3ieISR3VwhMu8/eFSO04gvxyDPYZw==", + "version": "2.0.0-next.24", + "resolved": "https://registry.npmjs.org/nativewind/-/nativewind-2.0.0-next.24.tgz", + "integrity": "sha512-RT4p99OGvrFT8kTVz8qqU2WXLCQX1ZFxX33hfSOpj/eAPiSZRktD1w0qd9vfr5Z8ybHMnbMYuJ/AdFgA8lpFPQ==", "requires": { "@babel/types": "7.18.4", "css-mediaquery": "^0.1.2", @@ -21711,6 +22163,11 @@ "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==" }, + "style-mod": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz", + "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==" + }, "style-to-object": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz", @@ -22410,6 +22867,11 @@ "unist-util-stringify-position": "^2.0.0" } }, + "w3c-keyname": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz", + "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==" + }, "wait-on": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-6.0.1.tgz", diff --git a/website/package.json b/website/package.json index ecefb78..460dba1 100644 --- a/website/package.json +++ b/website/package.json @@ -14,12 +14,18 @@ "write-heading-ids": "docusaurus write-heading-ids" }, "dependencies": { + "@babel/standalone": "^7.18.5", + "@codemirror/lang-javascript": "^6.0.0", "@docusaurus/core": "2.0.0-beta.21", "@docusaurus/preset-classic": "2.0.0-beta.21", "@mdx-js/react": "1.6.22", + "@uiw/codemirror-theme-dracula": "^4.9.4", + "@uiw/codemirror-theme-eclipse": "^4.9.4", + "@uiw/react-codemirror": "^4.9.4", "clsx": "1.1.1", "dedent": "^0.7.0", - "nativewind": "latest", + "lodash.debounce": "^4.0.8", + "nativewind": "^2.0.0-next.24", "prism-react-renderer": "1.3.3", "react": "17.0.2", "react-dom": "17.0.2", @@ -39,5 +45,9 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@types/babel__standalone": "^7.1.4", + "@types/lodash.debounce": "^4.0.7" } } diff --git a/website/sidebars.js b/website/sidebars.js index 7acb32b..45ba090 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -120,6 +120,7 @@ const sidebars = { label: "Aspect ratio", href: "https://tailwindcss.com/docs/aspect-ratio", }, + "tailwind/layout/container", { type: "link", label: "Container", diff --git a/website/src/babel-editor/index.tsx b/website/src/babel-editor/index.tsx new file mode 100644 index 0000000..c106636 --- /dev/null +++ b/website/src/babel-editor/index.tsx @@ -0,0 +1,49 @@ +import React, { useMemo, useState } from "react"; + +import debounce from "lodash.debounce"; +import CodeMirror from "@uiw/react-codemirror"; +import { dracula } from "@uiw/codemirror-theme-dracula"; +import { eclipse } from "@uiw/codemirror-theme-eclipse"; +import { javascript } from "@codemirror/lang-javascript"; +import { useColorMode } from "@docusaurus/theme-common"; + +// import nativewind from "nativewind/babel"; +// import { transform } from "@babel/standalone"; + +const initialText = "console.log('hello world!');"; + +export default function BabelEditor() { + const { colorMode } = useColorMode(); + const [text, setText] = useState(initialText); + const update = useMemo( + () => + debounce((code: string) => { + // const output = transform(code, { + // plugins: [nativewind], + // }); + + setText(code); + }), + [setText] + ); + + return ( + <> + + + + + ); +}