diff --git a/babel-plugin-macros.config.cjs b/babel-plugin-macros.config.cjs
new file mode 100644
index 0000000..6df67fd
--- /dev/null
+++ b/babel-plugin-macros.config.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+ twin: {
+ preset: 'emotion',
+ },
+};
diff --git a/package.json b/package.json
index c3cefaa..4a7ea86 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
"tauri": "tauri"
},
"dependencies": {
+ "@emotion/react": "^11.10.5",
+ "@emotion/styled": "^11.10.5",
"@tauri-apps/api": "^1.1.0",
"clsx": "^1.2.1",
"react": "^18.2.0",
@@ -17,12 +19,16 @@
"react-dom": "^18.2.0"
},
"devDependencies": {
+ "@babel/plugin-transform-react-jsx": "^7.19.0",
+ "@emotion/babel-plugin-jsx-pragmatic": "^0.2.0",
+ "@emotion/serialize": "^1.1.1",
"@tauri-apps/cli": "^1.1.0",
"@types/node": "^18.7.10",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.0.0",
"autoprefixer": "^10.4.13",
+ "babel-plugin-macros": "^3.1.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
@@ -31,6 +37,7 @@
"postcss": "^8.4.19",
"prettier": "^2.7.1",
"tailwindcss": "^3.2.4",
+ "twin.macro": "^3.1.0",
"typescript": "^4.6.4",
"vite": "^3.0.2"
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d657ef8..0f6cee2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,6 +1,11 @@
lockfileVersion: 5.4
specifiers:
+ '@babel/plugin-transform-react-jsx': ^7.19.0
+ '@emotion/babel-plugin-jsx-pragmatic': ^0.2.0
+ '@emotion/react': ^11.10.5
+ '@emotion/serialize': ^1.1.1
+ '@emotion/styled': ^11.10.5
'@tauri-apps/api': ^1.1.0
'@tauri-apps/cli': ^1.1.0
'@types/node': ^18.7.10
@@ -8,6 +13,7 @@ specifiers:
'@types/react-dom': ^18.0.6
'@vitejs/plugin-react': ^2.0.0
autoprefixer: ^10.4.13
+ babel-plugin-macros: ^3.1.0
clsx: ^1.2.1
eslint-config-prettier: ^8.5.0
eslint-plugin-import: ^2.26.0
@@ -20,10 +26,13 @@ specifiers:
react-async-hook: ^4.0.0
react-dom: ^18.2.0
tailwindcss: ^3.2.4
+ twin.macro: ^3.1.0
typescript: ^4.6.4
vite: ^3.0.2
dependencies:
+ '@emotion/react': 11.10.5_kzbn2opkn2327fwg5yzwzya5o4
+ '@emotion/styled': 11.10.5_qvatmowesywn4ye42qoh247szu
'@tauri-apps/api': 1.2.0
clsx: 1.2.1
react: 18.2.0
@@ -31,12 +40,16 @@ dependencies:
react-dom: 18.2.0_react@18.2.0
devDependencies:
+ '@babel/plugin-transform-react-jsx': 7.19.0
+ '@emotion/babel-plugin-jsx-pragmatic': 0.2.0
+ '@emotion/serialize': 1.1.1
'@tauri-apps/cli': 1.2.2
'@types/node': 18.11.16
'@types/react': 18.0.26
'@types/react-dom': 18.0.9
'@vitejs/plugin-react': 2.2.0_vite@3.2.5
autoprefixer: 10.4.13_postcss@8.4.20
+ babel-plugin-macros: 3.1.0
eslint-config-prettier: 8.5.0
eslint-plugin-import: 2.26.0
eslint-plugin-jsx-a11y: 6.6.1
@@ -45,6 +58,7 @@ devDependencies:
postcss: 8.4.20
prettier: 2.8.1
tailwindcss: 3.2.4_postcss@8.4.20
+ twin.macro: 3.1.0_tailwindcss@3.2.4
typescript: 4.9.4
vite: 3.2.5_@types+node@18.11.16
@@ -63,7 +77,6 @@ packages:
engines: {node: '>=6.9.0'}
dependencies:
'@babel/highlight': 7.18.6
- dev: true
/@babel/compat-data/7.20.5:
resolution: {integrity: sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g==}
@@ -147,7 +160,6 @@ packages:
engines: {node: '>=6.9.0'}
dependencies:
'@babel/types': 7.20.5
- dev: true
/@babel/helper-module-transforms/7.20.2:
resolution: {integrity: sha512-zvBKyJXRbmK07XhMuujYoJ48B5yvvmM6+wcpv6Ivj4Yg6qO7NOZOSnvZN9CRl1zz1Z4cKf8YejmCMh8clOoOeA==}
@@ -168,7 +180,6 @@ packages:
/@babel/helper-plugin-utils/7.20.2:
resolution: {integrity: sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==}
engines: {node: '>=6.9.0'}
- dev: true
/@babel/helper-simple-access/7.20.2:
resolution: {integrity: sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==}
@@ -187,12 +198,10 @@ packages:
/@babel/helper-string-parser/7.19.4:
resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
engines: {node: '>=6.9.0'}
- dev: true
/@babel/helper-validator-identifier/7.19.1:
resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
engines: {node: '>=6.9.0'}
- dev: true
/@babel/helper-validator-option/7.18.6:
resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
@@ -217,7 +226,6 @@ packages:
'@babel/helper-validator-identifier': 7.19.1
chalk: 2.4.2
js-tokens: 4.0.0
- dev: true
/@babel/parser/7.20.5:
resolution: {integrity: sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==}
@@ -227,6 +235,14 @@ packages:
'@babel/types': 7.20.5
dev: true
+ /@babel/plugin-syntax-jsx/7.18.6:
+ resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
+ engines: {node: '>=6.9.0'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/helper-plugin-utils': 7.20.2
+
/@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.20.5:
resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
engines: {node: '>=6.9.0'}
@@ -267,6 +283,19 @@ packages:
'@babel/helper-plugin-utils': 7.20.2
dev: true
+ /@babel/plugin-transform-react-jsx/7.19.0:
+ resolution: {integrity: sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==}
+ engines: {node: '>=6.9.0'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/helper-annotate-as-pure': 7.18.6
+ '@babel/helper-module-imports': 7.18.6
+ '@babel/helper-plugin-utils': 7.20.2
+ '@babel/plugin-syntax-jsx': 7.18.6
+ '@babel/types': 7.20.5
+ dev: true
+
/@babel/plugin-transform-react-jsx/7.19.0_@babel+core@7.20.5:
resolution: {integrity: sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==}
engines: {node: '>=6.9.0'}
@@ -294,7 +323,6 @@ packages:
engines: {node: '>=6.9.0'}
dependencies:
regenerator-runtime: 0.13.11
- dev: true
/@babel/template/7.18.10:
resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==}
@@ -330,8 +358,135 @@ packages:
'@babel/helper-string-parser': 7.19.4
'@babel/helper-validator-identifier': 7.19.1
to-fast-properties: 2.0.0
+
+ /@emotion/babel-plugin-jsx-pragmatic/0.2.0:
+ resolution: {integrity: sha512-VPfKAtb/bVyu5y+HzCPj9bb2nHnj9yX5mMAU7N0pIDcrFZo8aqDyHXLYF8BD7tY4pNL09N87dygVLKIkQvshJw==}
+ peerDependencies:
+ '@babel/core': ^7.0.0
+ dependencies:
+ '@babel/plugin-syntax-jsx': 7.18.6
dev: true
+ /@emotion/babel-plugin/11.10.5:
+ resolution: {integrity: sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==}
+ peerDependencies:
+ '@babel/core': ^7.0.0
+ dependencies:
+ '@babel/helper-module-imports': 7.18.6
+ '@babel/plugin-syntax-jsx': 7.18.6
+ '@babel/runtime': 7.20.6
+ '@emotion/hash': 0.9.0
+ '@emotion/memoize': 0.8.0
+ '@emotion/serialize': 1.1.1
+ babel-plugin-macros: 3.1.0
+ convert-source-map: 1.9.0
+ escape-string-regexp: 4.0.0
+ find-root: 1.1.0
+ source-map: 0.5.7
+ stylis: 4.1.3
+ dev: false
+
+ /@emotion/cache/11.10.5:
+ resolution: {integrity: sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==}
+ dependencies:
+ '@emotion/memoize': 0.8.0
+ '@emotion/sheet': 1.2.1
+ '@emotion/utils': 1.2.0
+ '@emotion/weak-memoize': 0.3.0
+ stylis: 4.1.3
+ dev: false
+
+ /@emotion/hash/0.9.0:
+ resolution: {integrity: sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==}
+
+ /@emotion/is-prop-valid/1.2.0:
+ resolution: {integrity: sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==}
+ dependencies:
+ '@emotion/memoize': 0.8.0
+ dev: false
+
+ /@emotion/memoize/0.8.0:
+ resolution: {integrity: sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==}
+
+ /@emotion/react/11.10.5_kzbn2opkn2327fwg5yzwzya5o4:
+ resolution: {integrity: sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==}
+ peerDependencies:
+ '@babel/core': ^7.0.0
+ '@types/react': '*'
+ react: '>=16.8.0'
+ peerDependenciesMeta:
+ '@babel/core':
+ optional: true
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.20.6
+ '@emotion/babel-plugin': 11.10.5
+ '@emotion/cache': 11.10.5
+ '@emotion/serialize': 1.1.1
+ '@emotion/use-insertion-effect-with-fallbacks': 1.0.0_react@18.2.0
+ '@emotion/utils': 1.2.0
+ '@emotion/weak-memoize': 0.3.0
+ '@types/react': 18.0.26
+ hoist-non-react-statics: 3.3.2
+ react: 18.2.0
+ dev: false
+
+ /@emotion/serialize/1.1.1:
+ resolution: {integrity: sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==}
+ dependencies:
+ '@emotion/hash': 0.9.0
+ '@emotion/memoize': 0.8.0
+ '@emotion/unitless': 0.8.0
+ '@emotion/utils': 1.2.0
+ csstype: 3.1.1
+
+ /@emotion/sheet/1.2.1:
+ resolution: {integrity: sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==}
+ dev: false
+
+ /@emotion/styled/11.10.5_qvatmowesywn4ye42qoh247szu:
+ resolution: {integrity: sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==}
+ peerDependencies:
+ '@babel/core': ^7.0.0
+ '@emotion/react': ^11.0.0-rc.0
+ '@types/react': '*'
+ react: '>=16.8.0'
+ peerDependenciesMeta:
+ '@babel/core':
+ optional: true
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.20.6
+ '@emotion/babel-plugin': 11.10.5
+ '@emotion/is-prop-valid': 1.2.0
+ '@emotion/react': 11.10.5_kzbn2opkn2327fwg5yzwzya5o4
+ '@emotion/serialize': 1.1.1
+ '@emotion/use-insertion-effect-with-fallbacks': 1.0.0_react@18.2.0
+ '@emotion/utils': 1.2.0
+ '@types/react': 18.0.26
+ react: 18.2.0
+ dev: false
+
+ /@emotion/unitless/0.8.0:
+ resolution: {integrity: sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==}
+
+ /@emotion/use-insertion-effect-with-fallbacks/1.0.0_react@18.2.0:
+ resolution: {integrity: sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==}
+ peerDependencies:
+ react: '>=16.8.0'
+ dependencies:
+ react: 18.2.0
+ dev: false
+
+ /@emotion/utils/1.2.0:
+ resolution: {integrity: sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==}
+
+ /@emotion/weak-memoize/0.3.0:
+ resolution: {integrity: sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==}
+ dev: false
+
/@esbuild/android-arm/0.15.18:
resolution: {integrity: sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==}
engines: {node: '>=12'}
@@ -519,9 +674,11 @@ packages:
resolution: {integrity: sha512-6T7P5bDkRhqRxrQtwj7vru+bWTpelgtcETAZEUSdq0YISKz8WKdoBukQLYQQ6DFHvU9JRsbFq0JH5C51X2ZdnA==}
dev: true
+ /@types/parse-json/4.0.0:
+ resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
+
/@types/prop-types/15.7.5:
resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
- dev: true
/@types/react-dom/18.0.9:
resolution: {integrity: sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==}
@@ -535,11 +692,9 @@ packages:
'@types/prop-types': 15.7.5
'@types/scheduler': 0.16.2
csstype: 3.1.1
- dev: true
/@types/scheduler/0.16.2:
resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
- dev: true
/@vitejs/plugin-react/2.2.0_vite@3.2.5:
resolution: {integrity: sha512-FFpefhvExd1toVRlokZgxgy2JtnBOdp4ZDsq7ldCWaqGSGn9UhWMAVm/1lxPL14JfNS5yGz+s9yFrQY6shoStA==}
@@ -583,6 +738,12 @@ packages:
engines: {node: '>=4'}
dependencies:
color-convert: 1.9.3
+
+ /ansi-styles/4.3.0:
+ resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+ engines: {node: '>=8'}
+ dependencies:
+ color-convert: 2.0.1
dev: true
/anymatch/3.1.3:
@@ -655,6 +816,14 @@ packages:
resolution: {integrity: sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==}
dev: true
+ /babel-plugin-macros/3.1.0:
+ resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+ engines: {node: '>=10', npm: '>=6'}
+ dependencies:
+ '@babel/runtime': 7.20.6
+ cosmiconfig: 7.1.0
+ resolve: 1.22.1
+
/balanced-match/1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
dev: true
@@ -696,6 +865,10 @@ packages:
get-intrinsic: 1.1.3
dev: true
+ /callsites/3.1.0:
+ resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+ engines: {node: '>=6'}
+
/camelcase-css/2.0.1:
resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
engines: {node: '>= 6'}
@@ -712,6 +885,13 @@ packages:
ansi-styles: 3.2.1
escape-string-regexp: 1.0.5
supports-color: 5.5.0
+
+ /chalk/4.1.2:
+ resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+ engines: {node: '>=10'}
+ dependencies:
+ ansi-styles: 4.3.0
+ supports-color: 7.2.0
dev: true
/chokidar/3.5.3:
@@ -738,11 +918,16 @@ packages:
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
dependencies:
color-name: 1.1.3
+
+ /color-convert/2.0.1:
+ resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+ engines: {node: '>=7.0.0'}
+ dependencies:
+ color-name: 1.1.4
dev: true
/color-name/1.1.3:
resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
- dev: true
/color-name/1.1.4:
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
@@ -754,13 +939,22 @@ packages:
/convert-source-map/1.9.0:
resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
- dev: true
/core-js-pure/3.26.1:
resolution: {integrity: sha512-VVXcDpp/xJ21KdULRq/lXdLzQAtX7+37LzpyfFM973il0tWSsDEoyzG38G14AjTpK9VTfiNM9jnFauq/CpaWGQ==}
requiresBuild: true
dev: true
+ /cosmiconfig/7.1.0:
+ resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+ engines: {node: '>=10'}
+ dependencies:
+ '@types/parse-json': 4.0.0
+ import-fresh: 3.3.0
+ parse-json: 5.2.0
+ path-type: 4.0.0
+ yaml: 1.10.2
+
/cssesc/3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'}
@@ -769,7 +963,6 @@ packages:
/csstype/3.1.1:
resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
- dev: true
/damerau-levenshtein/1.0.8:
resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
@@ -854,6 +1047,11 @@ packages:
resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
dev: true
+ /error-ex/1.3.2:
+ resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+ dependencies:
+ is-arrayish: 0.2.1
+
/es-abstract/1.20.5:
resolution: {integrity: sha512-7h8MM2EQhsCA7pU/Nv78qOXFpD8Rhqd12gYiSJVkrH9+e8VuA8JlPJK/hQjjlLv6pJvx/z1iRFKzYb0XT/RuAQ==}
engines: {node: '>= 0.4'}
@@ -1118,7 +1316,11 @@ packages:
/escape-string-regexp/1.0.5:
resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
engines: {node: '>=0.8.0'}
- dev: true
+
+ /escape-string-regexp/4.0.0:
+ resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+ engines: {node: '>=10'}
+ dev: false
/eslint-config-prettier/8.5.0:
resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==}
@@ -1268,6 +1470,10 @@ packages:
to-regex-range: 5.0.1
dev: true
+ /find-root/1.1.0:
+ resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+ dev: false
+
/fraction.js/4.2.0:
resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
dev: true
@@ -1282,7 +1488,6 @@ packages:
/function-bind/1.1.1:
resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
- dev: true
/function.prototype.name/1.1.5:
resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
@@ -1351,6 +1556,10 @@ packages:
/has-flag/3.0.0:
resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
engines: {node: '>=4'}
+
+ /has-flag/4.0.0:
+ resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+ engines: {node: '>=8'}
dev: true
/has-property-descriptors/1.0.0:
@@ -1376,7 +1585,19 @@ packages:
engines: {node: '>= 0.4.0'}
dependencies:
function-bind: 1.1.1
- dev: true
+
+ /hoist-non-react-statics/3.3.2:
+ resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+ dependencies:
+ react-is: 16.13.1
+ dev: false
+
+ /import-fresh/3.3.0:
+ resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+ engines: {node: '>=6'}
+ dependencies:
+ parent-module: 1.0.1
+ resolve-from: 4.0.0
/internal-slot/1.0.4:
resolution: {integrity: sha512-tA8URYccNzMo94s5MQZgH8NB/XTa6HsOo0MLfXTKKEnHVVdegzaQoFZ7Jp44bdvLvY2waT5dc+j5ICEswhi7UQ==}
@@ -1387,6 +1608,9 @@ packages:
side-channel: 1.0.4
dev: true
+ /is-arrayish/0.2.1:
+ resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
/is-bigint/1.0.4:
resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
dependencies:
@@ -1417,7 +1641,6 @@ packages:
resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
dependencies:
has: 1.0.3
- dev: true
/is-date-object/1.0.5:
resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -1498,6 +1721,9 @@ packages:
hasBin: true
dev: true
+ /json-parse-even-better-errors/2.3.1:
+ resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
/json5/1.0.1:
resolution: {integrity: sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==}
hasBin: true
@@ -1534,6 +1760,17 @@ packages:
engines: {node: '>=10'}
dev: true
+ /lines-and-columns/1.2.4:
+ resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+ /lodash.get/4.4.2:
+ resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+ dev: true
+
+ /lodash.merge/4.6.2:
+ resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+ dev: true
+
/loose-envify/1.4.0:
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
hasBin: true
@@ -1636,9 +1873,27 @@ packages:
es-abstract: 1.20.5
dev: true
+ /parent-module/1.0.1:
+ resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+ engines: {node: '>=6'}
+ dependencies:
+ callsites: 3.1.0
+
+ /parse-json/5.2.0:
+ resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+ engines: {node: '>=8'}
+ dependencies:
+ '@babel/code-frame': 7.18.6
+ error-ex: 1.3.2
+ json-parse-even-better-errors: 2.3.1
+ lines-and-columns: 1.2.4
+
/path-parse/1.0.7:
resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
- dev: true
+
+ /path-type/4.0.0:
+ resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+ engines: {node: '>=8'}
/picocolors/1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@@ -1765,6 +2020,10 @@ packages:
scheduler: 0.23.0
dev: false
+ /react-is/16.13.1:
+ resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+ dev: false
+
/react-refresh/0.14.0:
resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
engines: {node: '>=0.10.0'}
@@ -1792,7 +2051,6 @@ packages:
/regenerator-runtime/0.13.11:
resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
- dev: true
/regexp.prototype.flags/1.4.3:
resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
@@ -1803,6 +2061,10 @@ packages:
functions-have-names: 1.2.3
dev: true
+ /resolve-from/4.0.0:
+ resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+ engines: {node: '>=4'}
+
/resolve/1.22.1:
resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
hasBin: true
@@ -1810,7 +2072,6 @@ packages:
is-core-module: 2.11.0
path-parse: 1.0.7
supports-preserve-symlinks-flag: 1.0.0
- dev: true
/reusify/1.0.4:
resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
@@ -1863,6 +2124,11 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
+ /source-map/0.5.7:
+ resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+ engines: {node: '>=0.10.0'}
+ dev: false
+
/sourcemap-codec/1.4.8:
resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
deprecated: Please use @jridgewell/sourcemap-codec instead
@@ -1889,17 +2155,26 @@ packages:
engines: {node: '>=4'}
dev: true
+ /stylis/4.1.3:
+ resolution: {integrity: sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==}
+ dev: false
+
/supports-color/5.5.0:
resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
engines: {node: '>=4'}
dependencies:
has-flag: 3.0.0
+
+ /supports-color/7.2.0:
+ resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+ engines: {node: '>=8'}
+ dependencies:
+ has-flag: 4.0.0
dev: true
/supports-preserve-symlinks-flag/1.0.0:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
- dev: true
/tailwindcss/3.2.4_postcss@8.4.20:
resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
@@ -1938,7 +2213,6 @@ packages:
/to-fast-properties/2.0.0:
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
engines: {node: '>=4'}
- dev: true
/to-regex-range/5.0.1:
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
@@ -1956,6 +2230,21 @@ packages:
strip-bom: 3.0.0
dev: true
+ /twin.macro/3.1.0_tailwindcss@3.2.4:
+ resolution: {integrity: sha512-7DSR/xdvSaAqhTM4JptBgI+1IzXQR5v+2hp0CDMmHMjlm44IBEewU8MeqPlXmFgQI06zpLyJMaKRbJu96drAJw==}
+ engines: {node: '>=16.14.0'}
+ peerDependencies:
+ tailwindcss: ^3.2.4
+ dependencies:
+ '@babel/template': 7.18.10
+ babel-plugin-macros: 3.1.0
+ chalk: 4.1.2
+ lodash.get: 4.4.2
+ lodash.merge: 4.6.2
+ postcss-selector-parser: 6.0.11
+ tailwindcss: 3.2.4_postcss@8.4.20
+ dev: true
+
/typescript/4.9.4:
resolution: {integrity: sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==}
engines: {node: '>=4.2.0'}
@@ -2038,4 +2327,3 @@ packages:
/yaml/1.10.2:
resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
engines: {node: '>= 6'}
- dev: true
diff --git a/postcss.config.cjs b/postcss.config.cjs
deleted file mode 100644
index 33ad091..0000000
--- a/postcss.config.cjs
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
- plugins: {
- tailwindcss: {},
- autoprefixer: {},
- },
-}
diff --git a/src/styles/global-styles.tsx b/src/styles/global-styles.tsx
new file mode 100644
index 0000000..1479d4b
--- /dev/null
+++ b/src/styles/global-styles.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Global, css } from '@emotion/react';
+import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro';
+
+const customStyles = css({
+ body: {
+ WebkitTapHighlightColor: theme`colors.purple.500`,
+ ...tw`antialiased dark:bg-dark-800 bg-dark-100`,
+ },
+});
+
+const GlobalStyles = () => (
+ <>
+
+
+ >
+);
+
+export default GlobalStyles;
diff --git a/tsconfig.json b/tsconfig.json
index 3d0a51a..0a0400a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,8 +14,12 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "jsxImportSource": "@emotion/react"
},
- "include": ["src"],
+ "include": [
+ "src",
+ "types"
+ ],
"references": [{ "path": "./tsconfig.node.json" }]
}
diff --git a/types/twin.d.ts b/types/twin.d.ts
new file mode 100644
index 0000000..b0426a1
--- /dev/null
+++ b/types/twin.d.ts
@@ -0,0 +1,18 @@
+import 'twin.macro';
+import { css as cssImport } from '@emotion/react';
+import styledImport from '@emotion/styled';
+import { CSSInterpolation } from '@emotion/serialize';
+
+declare module 'twin.macro' {
+ // The styled and css imports
+ const styled: typeof styledImport;
+ const css: typeof cssImport;
+}
+
+declare module 'react' {
+ // The tw and css prop
+ interface DOMAttributes {
+ tw?: string;
+ css?: CSSInterpolation;
+ }
+}
diff --git a/vite.config.ts b/vite.config.ts
index db75d21..d016957 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,7 +3,29 @@ import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
+ optimizeDeps: {
+ esbuildOptions: {
+ target: 'es2020',
+ },
+ },
+ plugins: [
+ react({
+ babel: {
+ plugins: [
+ 'babel-plugin-macros',
+ [
+ '@emotion/babel-plugin-jsx-pragmatic',
+ {
+ export: 'jsx',
+ import: '__cssprop',
+ module: '@emotion/react',
+ },
+ ],
+ ['@babel/plugin-transform-react-jsx', { pragma: '__cssprop' }, 'twin.macro'],
+ ],
+ },
+ }),
+ ],
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
// prevent vite from obscuring rust errors
@@ -15,12 +37,12 @@ export default defineConfig({
},
// to make use of `TAURI_DEBUG` and other env variables
// https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
- envPrefix: ["VITE_", "TAURI_"],
+ envPrefix: ['VITE_', 'TAURI_'],
build: {
// Tauri supports es2021
- target: ["es2021", "chrome100", "safari13"],
+ target: ['es2021', 'chrome100', 'safari13'],
// don't minify for debug builds
- minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
+ minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
// produce sourcemaps for debug builds
sourcemap: !!process.env.TAURI_DEBUG,
},