From 85c7f7817c58f13f6a4e8bec13a45f6412ad87db Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Sat, 3 Feb 2024 15:21:19 -0600 Subject: [PATCH] feat: UnoCSS (TailwindCSS) (Storybook only) (#61) * feat: unocss (wip) * feat: unocss (storybook only) * cleanup unocss config * revert button.stories.tsx changes --- .eslintrc | 1 + .storybook/preview.tsx | 2 +- .storybook/vite-storybook.config.ts | 3 +- package.json | 7 + pnpm-lock.yaml | 348 ++++++++++++++++++ postcss.config.cjs | 12 +- .../common/ExtensionRoot/ExtensionRoot.tsx | 2 + tsconfig.json | 3 +- unocss.config.ts | 58 +++ vite.config.ts | 2 + 10 files changed, 427 insertions(+), 11 deletions(-) create mode 100644 unocss.config.ts diff --git a/.eslintrc b/.eslintrc index 82f65ee6..9c185f84 100644 --- a/.eslintrc +++ b/.eslintrc @@ -18,6 +18,7 @@ "airbnb-base", "airbnb/rules/react", "airbnb-typescript", + "@unocss", "prettier", ], "plugins": [ diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 19ed3029..cf094ffc 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,6 +1,6 @@ -import ExtensionRoot from 'src/views/components/common/ExtensionRoot/ExtensionRoot'; import type { Preview } from '@storybook/react'; import React from 'react'; +import ExtensionRoot from 'src/views/components/common/ExtensionRoot/ExtensionRoot'; const preview: Preview = { parameters: { diff --git a/.storybook/vite-storybook.config.ts b/.storybook/vite-storybook.config.ts index 951029cf..047953c6 100644 --- a/.storybook/vite-storybook.config.ts +++ b/.storybook/vite-storybook.config.ts @@ -1,5 +1,6 @@ import react from '@vitejs/plugin-react-swc'; import { resolve } from 'path'; +import UnoCSS from 'unocss/vite'; import Icons from 'unplugin-icons/vite'; import { defineConfig } from 'vite'; @@ -12,7 +13,7 @@ console.log(root); // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react(), Icons({ compiler: 'jsx', jsx: 'react' })], + plugins: [react(), UnoCSS(), Icons({ compiler: 'jsx', jsx: 'react' })], resolve: { alias: { src: root, diff --git a/package.json b/package.json index e88f1cc3..e8515d4e 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,12 @@ "@types/uuid": "^9.0.8", "@typescript-eslint/eslint-plugin": "^6.20.0", "@typescript-eslint/parser": "^6.20.0", + "@unocss/eslint-config": "^0.58.4", + "@unocss/postcss": "^0.58.4", + "@unocss/preset-uno": "^0.58.4", + "@unocss/preset-web-fonts": "^0.58.4", + "@unocss/transformer-directives": "^0.58.4", + "@unocss/transformer-variant-group": "^0.58.4", "@vitejs/plugin-react-swc": "^3.6.0", "cssnano": "^6.0.3", "cssnano-preset-advanced": "^6.0.3", @@ -77,6 +83,7 @@ "react-devtools": "^5.0.0", "storybook": "^7.6.12", "typescript": "^5.3.3", + "unocss": "^0.58.4", "unplugin-icons": "^0.18.3", "vite": "^5.0.12", "vite-plugin-inspect": "^0.8.3" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b3a2f22e..4310cf74 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -111,6 +111,24 @@ devDependencies: '@typescript-eslint/parser': specifier: ^6.20.0 version: 6.20.0(eslint@8.56.0)(typescript@5.3.3) + '@unocss/eslint-config': + specifier: ^0.58.4 + version: 0.58.4(eslint@8.56.0)(typescript@5.3.3) + '@unocss/postcss': + specifier: ^0.58.4 + version: 0.58.4(postcss@8.4.33) + '@unocss/preset-uno': + specifier: ^0.58.4 + version: 0.58.4 + '@unocss/preset-web-fonts': + specifier: ^0.58.4 + version: 0.58.4 + '@unocss/transformer-directives': + specifier: ^0.58.4 + version: 0.58.4 + '@unocss/transformer-variant-group': + specifier: ^0.58.4 + version: 0.58.4 '@vitejs/plugin-react-swc': specifier: ^3.6.0 version: 3.6.0(vite@5.0.12) @@ -189,6 +207,9 @@ devDependencies: typescript: specifier: ^5.3.3 version: 5.3.3 + unocss: + specifier: ^0.58.4 + version: 0.58.4(postcss@8.4.33)(vite@5.0.12) unplugin-icons: specifier: ^0.18.3 version: 0.18.3(@svgr/core@8.1.0) @@ -2411,6 +2432,11 @@ packages: dev: true optional: true + /@pkgr/core@0.1.1: + resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==} + engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} + dev: true + /@pkgr/utils@2.4.2: resolution: {integrity: sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==} engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} @@ -4849,6 +4875,246 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true + /@unocss/astro@0.58.4(vite@5.0.12): + resolution: {integrity: sha512-feS8+f3oPmCeR1XF7isQjs3Z9ojM5Ssv0vCNR/dexPFdROfccK/7sIu1YnHWtVg1trPc1kMfI8XJRqfrHMdd5w==} + peerDependencies: + vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 + peerDependenciesMeta: + vite: + optional: true + dependencies: + '@unocss/core': 0.58.4 + '@unocss/reset': 0.58.4 + '@unocss/vite': 0.58.4(vite@5.0.12) + vite: 5.0.12(@types/node@20.11.16)(sass@1.70.0) + transitivePeerDependencies: + - rollup + dev: true + + /@unocss/cli@0.58.4: + resolution: {integrity: sha512-8dAs1TzzWCtb3FxoTsVtR2+JGkdmchuP0RvGlSywADf5FqYn9nbP0m3z4STtpPavHO9JaGbabStyjS0nA8Ck6w==} + engines: {node: '>=14'} + hasBin: true + dependencies: + '@ampproject/remapping': 2.2.1 + '@rollup/pluginutils': 5.1.0 + '@unocss/config': 0.58.4 + '@unocss/core': 0.58.4 + '@unocss/preset-uno': 0.58.4 + cac: 6.7.14 + chokidar: 3.5.3 + colorette: 2.0.20 + consola: 3.2.3 + fast-glob: 3.3.2 + magic-string: 0.30.5 + pathe: 1.1.2 + perfect-debounce: 1.0.0 + transitivePeerDependencies: + - rollup + dev: true + + /@unocss/config@0.58.4: + resolution: {integrity: sha512-b/inDCOnhUPzobhj+SxRI7xeSwoAQU+3D3J5JoWZNPBI4OaJdwpuz40uLXl9VsPz5N6dc8/qa+FrSsgCjUcLTg==} + engines: {node: '>=14'} + dependencies: + '@unocss/core': 0.58.4 + unconfig: 0.3.11 + dev: true + + /@unocss/core@0.58.4: + resolution: {integrity: sha512-wh4pxXUCkhC+C/0ct74PMYeZgX+oWuHj2mnvr09nM0WmvOm1HeeISrDCCBGcxmKbErUk+D1v3JgzXF7b6j2l4g==} + dev: true + + /@unocss/eslint-config@0.58.4(eslint@8.56.0)(typescript@5.3.3): + resolution: {integrity: sha512-NJ0NJmEJBKSmglFKOJvEXdlj5ERgiQLKBZtsSiTUmuKk8srLkSUZv5QJ4iQl/uygxRY8ugNUyiEOfQs6a1iTUw==} + engines: {node: '>=14'} + dependencies: + '@unocss/eslint-plugin': 0.58.4(eslint@8.56.0)(typescript@5.3.3) + transitivePeerDependencies: + - eslint + - supports-color + - typescript + dev: true + + /@unocss/eslint-plugin@0.58.4(eslint@8.56.0)(typescript@5.3.3): + resolution: {integrity: sha512-wWXqs4+MbgqVgkpSqenO9QRxxixL7dA3U/tVgz6q7CwhmKc0fczEpYd04TUR2oLYhl9fnj15UcYNGdG+GCNt0Q==} + engines: {node: '>=14'} + dependencies: + '@typescript-eslint/utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3) + '@unocss/config': 0.58.4 + '@unocss/core': 0.58.4 + magic-string: 0.30.5 + synckit: 0.9.0 + transitivePeerDependencies: + - eslint + - supports-color + - typescript + dev: true + + /@unocss/extractor-arbitrary-variants@0.58.4: + resolution: {integrity: sha512-TQlVtSQk8YdBU9KuTA5k6JBJ8d/aPrIsCWjDPfBvAqDvrll/dzwBCLoLTQMdCHFjCXCOYWKPum1ET+Wn9R+XbA==} + dependencies: + '@unocss/core': 0.58.4 + dev: true + + /@unocss/inspector@0.58.4: + resolution: {integrity: sha512-BbsaIMqP6dqa3qCfkC0nkvjCg11JRigvFPU4319imTPcTHQNQSg35t2mVFPGZ+QYHlU/3ouBeogUQfJDHBmtVQ==} + dependencies: + '@unocss/core': 0.58.4 + '@unocss/rule-utils': 0.58.4 + gzip-size: 6.0.0 + sirv: 2.0.4 + dev: true + + /@unocss/postcss@0.58.4(postcss@8.4.33): + resolution: {integrity: sha512-pg2qCGakV1TyMApPdvuvqqmPDhgogPWF14J97BT5zIfGYITAJSmBsm7d3+06w6EuqIS+vcYRw+qCV3oX6qTeiA==} + engines: {node: '>=14'} + peerDependencies: + postcss: ^8.4.21 + dependencies: + '@unocss/config': 0.58.4 + '@unocss/core': 0.58.4 + '@unocss/rule-utils': 0.58.4 + css-tree: 2.3.1 + fast-glob: 3.3.2 + magic-string: 0.30.5 + postcss: 8.4.33 + dev: true + + /@unocss/preset-attributify@0.58.4: + resolution: {integrity: sha512-r7pDXgcOgGMmrMoqM4/w20KKn4PxF+/vpElatAGXW3V/tHJWFOLGzk+wYeCMgMxeC+vPzqyJkjTfoqYlZrlokQ==} + dependencies: + '@unocss/core': 0.58.4 + dev: true + + /@unocss/preset-icons@0.58.4: + resolution: {integrity: sha512-xdOe3PLfEWS4y+rA7Gxh/kDI82VkW0PbdoYO2FBwXH7a0JegdUDD5zuOTsTKAIymvQ7eVH53WXN9mcuhfNmdvQ==} + dependencies: + '@iconify/utils': 2.1.20 + '@unocss/core': 0.58.4 + ofetch: 1.3.3 + transitivePeerDependencies: + - supports-color + dev: true + + /@unocss/preset-mini@0.58.4: + resolution: {integrity: sha512-cpIWUYxLi4VCkkjxpNJOVqH9D32NX1ebRFaoAVnvCRsoj5TRsZJSdxs0WMN7reHT/CUHh0Wh6d3TfMCFxzbZ4g==} + dependencies: + '@unocss/core': 0.58.4 + '@unocss/extractor-arbitrary-variants': 0.58.4 + '@unocss/rule-utils': 0.58.4 + dev: true + + /@unocss/preset-tagify@0.58.4: + resolution: {integrity: sha512-1E3vQvg5Qy4tbgovvrV0JaIXFfcdhK4NCSz+MuUk5ZYgKGVDh4IEw0WPuic534nlLm9+YFqyCSLLyIs3bT/GYQ==} + dependencies: + '@unocss/core': 0.58.4 + dev: true + + /@unocss/preset-typography@0.58.4: + resolution: {integrity: sha512-0Opt3Y0At4F03092iwGgz7HswRC2ElBXHR+IO9wWxSbldtpdmKzFJ/GBHEalzQjacWnyyzmRjabjA2quoQ8FQA==} + dependencies: + '@unocss/core': 0.58.4 + '@unocss/preset-mini': 0.58.4 + dev: true + + /@unocss/preset-uno@0.58.4: + resolution: {integrity: sha512-FWBPGIt0UcQHu58l75kvhB4vF2v+s2m0OW9DnIrPm3aY7Qj3q4yA2wdahR37qSsH+6vR3JP4+mV9WBrGjIsjrQ==} + dependencies: + '@unocss/core': 0.58.4 + '@unocss/preset-mini': 0.58.4 + '@unocss/preset-wind': 0.58.4 + '@unocss/rule-utils': 0.58.4 + dev: true + + /@unocss/preset-web-fonts@0.58.4: + resolution: {integrity: sha512-vcy20fIK37GdhesRpiWGvCvkJDQsSiRF1jxw3dy8J5n9kFpIV8DQoPWUIE0ePF4i5ky2dHSDxKaNOP1bxHdKGA==} + dependencies: + '@unocss/core': 0.58.4 + ofetch: 1.3.3 + dev: true + + /@unocss/preset-wind@0.58.4: + resolution: {integrity: sha512-e2F0HsqPXw+nD85MKIZ63mx5yUx5g8iPOtMw9/eEUeK67HrD+jFxeLq0hAM3ou3a4589QIzeg23LXAkM7gCzvg==} + dependencies: + '@unocss/core': 0.58.4 + '@unocss/preset-mini': 0.58.4 + '@unocss/rule-utils': 0.58.4 + dev: true + + /@unocss/reset@0.58.4: + resolution: {integrity: sha512-ZZTrAdl4WWmMjQdOqcOSWdgFH6kdFKZjPu4c6Ijxk7KvY2BW3nttTTBa7IYeuXFHVfcExUFqlOgRurt+NeWYyQ==} + dev: true + + /@unocss/rule-utils@0.58.4: + resolution: {integrity: sha512-52Jp4I+joGTaDm7ehB/7uZ2kJL+9BZcYRDUVk4IDacDH5W9yxf1F75LzYT8jJVWXD/HIhiS0r9V6qhcBq2OWZw==} + engines: {node: '>=14'} + dependencies: + '@unocss/core': 0.58.4 + magic-string: 0.30.5 + dev: true + + /@unocss/scope@0.58.4: + resolution: {integrity: sha512-JrX98xoYnv0HN41WyzlvCCU1T3jnDOry+V8mm2dB9DvByzxI484X6gtKbOXlJFAPwOlZPU5Bru/XTDaL6yQQww==} + dev: true + + /@unocss/transformer-attributify-jsx-babel@0.58.4: + resolution: {integrity: sha512-yJd+OxAdgAxSQHVrqC6z19ibPqwwWO7J0TFf2caiP3hidSJ0iOvxcC0h62YCMr9dg4MsCpXaiHmGzxXbWGJ9nQ==} + dependencies: + '@babel/core': 7.23.9 + '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.9) + '@babel/preset-typescript': 7.23.3(@babel/core@7.23.9) + '@unocss/core': 0.58.4 + transitivePeerDependencies: + - supports-color + dev: true + + /@unocss/transformer-attributify-jsx@0.58.4: + resolution: {integrity: sha512-Y4YMVkgY/EF7x0llV8Y42WGs8b77hbXkPstRLNeRD5x8KBNKnjYUXADwhTBEKXjDR8/y5Ewie8u43i1nbh1XuA==} + dependencies: + '@unocss/core': 0.58.4 + dev: true + + /@unocss/transformer-compile-class@0.58.4: + resolution: {integrity: sha512-GPz462ogvtb64W0iweuB0Dcm1snGsGte0RlVpFUeG2eWlVqKMRvNRtYuive2Ky2zSZKefWJQBGk3Ti+7CM4wFA==} + dependencies: + '@unocss/core': 0.58.4 + dev: true + + /@unocss/transformer-directives@0.58.4: + resolution: {integrity: sha512-5g2XVhwpmu2IrGHqPwxh+S3ZtkC/AwAtLIBLWB1QNhY3HVzAAaOzcif6uarngrCTTDQSDmsjzm8TSAq26LtCmQ==} + dependencies: + '@unocss/core': 0.58.4 + '@unocss/rule-utils': 0.58.4 + css-tree: 2.3.1 + dev: true + + /@unocss/transformer-variant-group@0.58.4: + resolution: {integrity: sha512-zpJ4TMor7aJ3SoLJm4jNBOSqikyXUdQEO1AxkILd9Zcn7JWRgudfFXiXnFP+WGJcs9mMLoUiISxzT8SKNCckfA==} + dependencies: + '@unocss/core': 0.58.4 + dev: true + + /@unocss/vite@0.58.4(vite@5.0.12): + resolution: {integrity: sha512-TqD5fIXv6NF3v10FFrCII//GRbkou6Dn/OzW+d4T5f0KM5+T6DutljpYUdGo0+2QXKDroUWLAspFUaZUx8iwVw==} + peerDependencies: + vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 + dependencies: + '@ampproject/remapping': 2.2.1 + '@rollup/pluginutils': 5.1.0 + '@unocss/config': 0.58.4 + '@unocss/core': 0.58.4 + '@unocss/inspector': 0.58.4 + '@unocss/scope': 0.58.4 + '@unocss/transformer-directives': 0.58.4 + chokidar: 3.5.3 + fast-glob: 3.3.2 + magic-string: 0.30.5 + vite: 5.0.12(@types/node@20.11.16)(sass@1.70.0) + transitivePeerDependencies: + - rollup + dev: true + /@vitejs/plugin-react-swc@3.6.0(vite@5.0.12): resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==} peerDependencies: @@ -5642,6 +5908,11 @@ packages: engines: {node: '>= 0.8'} dev: true + /cac@6.7.14: + resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} + engines: {node: '>=8'} + dev: true + /cacheable-lookup@5.0.4: resolution: {integrity: sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==} engines: {node: '>=10.6.0'} @@ -5911,6 +6182,10 @@ packages: resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} dev: true + /colorette@2.0.20: + resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==} + dev: true + /combined-stream@1.0.8: resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} engines: {node: '>= 0.8'} @@ -6443,6 +6718,10 @@ packages: engines: {node: '>=6'} dev: true + /destr@2.0.2: + resolution: {integrity: sha512-65AlobnZMiCET00KaFFjUefxDX0khFA/E4myqZ7a6Sq1yZtR8+FVIvilVX66vF2uobSumxooYZChiRPCKNqhmg==} + dev: true + /destroy@1.2.0: resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==} engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16} @@ -8827,6 +9106,11 @@ packages: supports-color: 8.1.1 dev: true + /jiti@1.21.0: + resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==} + hasBin: true + dev: true + /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} @@ -9669,6 +9953,14 @@ packages: es-abstract: 1.22.3 dev: true + /ofetch@1.3.3: + resolution: {integrity: sha512-s1ZCMmQWXy4b5K/TW9i/DtiN8Ku+xCiHcjQ6/J/nDdssirrQNOoB165Zu8EqLMA2lln1JUth9a0aW9Ap2ctrUg==} + dependencies: + destr: 2.0.2 + node-fetch-native: 1.6.1 + ufo: 1.3.2 + dev: true + /ohash@1.1.3: resolution: {integrity: sha512-zuHHiGTYTA1sYJ/wZN+t5HKZaH23i4yI1HMwbuXm24Nid7Dv0KcuRlKoNKS9UNfAVSBlnGLcuQrnOKWOZoEGaw==} dev: true @@ -11703,6 +11995,14 @@ packages: tslib: 2.6.2 dev: true + /synckit@0.9.0: + resolution: {integrity: sha512-7RnqIMq572L8PeEzKeBINYEJDDxpcH8JEgLwUqBd3TkofhFRbkq4QLR0u+36avGAhCRbk2nnmjcW9SE531hPDg==} + engines: {node: ^14.18.0 || >=16.0.0} + dependencies: + '@pkgr/core': 0.1.1 + tslib: 2.6.2 + dev: true + /tapable@1.1.3: resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==} engines: {node: '>=6'} @@ -12054,6 +12354,15 @@ packages: which-boxed-primitive: 1.0.2 dev: true + /unconfig@0.3.11: + resolution: {integrity: sha512-bV/nqePAKv71v3HdVUn6UefbsDKQWRX+bJIkiSm0+twIds6WiD2bJLWWT3i214+J/B4edufZpG2w7Y63Vbwxow==} + dependencies: + '@antfu/utils': 0.7.7 + defu: 6.1.4 + jiti: 1.21.0 + mlly: 1.5.0 + dev: true + /undici-types@5.26.5: resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} @@ -12128,6 +12437,45 @@ packages: engines: {node: '>= 10.0.0'} dev: true + /unocss@0.58.4(postcss@8.4.33)(vite@5.0.12): + resolution: {integrity: sha512-JYeQddAIObJPr6nuxahOgku0MIzjIaQ2P73KtJr0zSuzx6kiq20jf67FgDIOP1Ks6s7iJd7Ga3yuY2h49XjDjg==} + engines: {node: '>=14'} + peerDependencies: + '@unocss/webpack': 0.58.4 + vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 + peerDependenciesMeta: + '@unocss/webpack': + optional: true + vite: + optional: true + dependencies: + '@unocss/astro': 0.58.4(vite@5.0.12) + '@unocss/cli': 0.58.4 + '@unocss/core': 0.58.4 + '@unocss/extractor-arbitrary-variants': 0.58.4 + '@unocss/postcss': 0.58.4(postcss@8.4.33) + '@unocss/preset-attributify': 0.58.4 + '@unocss/preset-icons': 0.58.4 + '@unocss/preset-mini': 0.58.4 + '@unocss/preset-tagify': 0.58.4 + '@unocss/preset-typography': 0.58.4 + '@unocss/preset-uno': 0.58.4 + '@unocss/preset-web-fonts': 0.58.4 + '@unocss/preset-wind': 0.58.4 + '@unocss/reset': 0.58.4 + '@unocss/transformer-attributify-jsx': 0.58.4 + '@unocss/transformer-attributify-jsx-babel': 0.58.4 + '@unocss/transformer-compile-class': 0.58.4 + '@unocss/transformer-directives': 0.58.4 + '@unocss/transformer-variant-group': 0.58.4 + '@unocss/vite': 0.58.4(vite@5.0.12) + vite: 5.0.12(@types/node@20.11.16)(sass@1.70.0) + transitivePeerDependencies: + - postcss + - rollup + - supports-color + dev: true + /unpipe@1.0.0: resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==} engines: {node: '>= 0.8'} diff --git a/postcss.config.cjs b/postcss.config.cjs index 8ad5633c..deea0319 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,14 +1,10 @@ /* eslint-disable global-require */ /** @type {import('postcss-load-config').Config} */ const config = { - plugins: - process.env.NODE_ENV !== 'development' - ? [ - require('cssnano')({ - preset: 'advanced', - }), - ] - : [], + plugins: { + cssnano: process.env.NODE_ENV !== 'development' ? {} : false, + // '@unocss/postcss': {}, + }, }; module.exports = config; diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx index f01be7c7..9bc27972 100644 --- a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx +++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx @@ -1,6 +1,8 @@ import React from 'react'; import styles from './ExtensionRoot.module.scss'; +import 'uno.css'; + interface Props { testId?: string; } diff --git a/tsconfig.json b/tsconfig.json index 30710b94..f2267ecc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -54,6 +54,7 @@ "package.json", ".eslintrc", "postcss.config.cjs", - ".storybook" + ".storybook", + "unocss.config.ts", ] } diff --git a/unocss.config.ts b/unocss.config.ts new file mode 100644 index 00000000..a5cadfc9 --- /dev/null +++ b/unocss.config.ts @@ -0,0 +1,58 @@ +import presetUno from '@unocss/preset-uno'; +import presetWebFonts from '@unocss/preset-web-fonts'; +import transformerDirectives from '@unocss/transformer-directives'; +import transformerVariantGroup from '@unocss/transformer-variant-group'; +import { defineConfig } from 'unocss'; + +export default defineConfig({ + rules: [ + ['btn-transition', { transition: 'color 180ms, border-color 150ms, background-color 150ms, transform 50ms' }], + [ + 'ring-offset-0', + { + '--un-ring-offset-width': '0px', + }, + ], + ], + shortcuts: { + focusable: 'outline-none ring-blue-500/50 dark:ring-blue-400/60 ring-0 focus-visible:ring-4', + }, + theme: { + easing: { + 'in-out-expo': 'cubic-bezier(.46, 0, .21, 1)', + 'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)', + }, + colors: { + ut: { + 'burnt-orange': '#BF5700', + black: '#333F48', + orange: '#f8971f', + yellow: '#ffd600', + 'light-green': '#a6cd57', + green: '#579d42', + teal: '#00a9b7', + blue: '#005f86', + gray: '#9cadb7', + 'off-white': '#d6d2c4', + concrete: '#95a5a6', + }, + theme: { + red: '#af2e2d', + black: '#1a2024', + }, + }, + }, + + presets: [ + presetUno(), + presetWebFonts({ + provider: 'none', + fonts: { + sans: { + name: 'Roboto Flex', + }, + }, + }), + ], + transformers: [transformerVariantGroup(), transformerDirectives()], +}); diff --git a/vite.config.ts b/vite.config.ts index 7d551aaa..7676a4e1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,7 @@ import { crx } from '@crxjs/vite-plugin'; import react from '@vitejs/plugin-react-swc'; import { resolve } from 'path'; +import UnoCSS from 'unocss/vite'; import Icons from 'unplugin-icons/vite'; import { Plugin, ResolvedConfig, ViteDevServer, defineConfig } from 'vite'; import inspect from 'vite-plugin-inspect'; @@ -45,6 +46,7 @@ let server: ViteDevServer; export default defineConfig({ plugins: [ react(), + UnoCSS(), Icons({ compiler: 'jsx', jsx: 'react' }), crx({ manifest }), inspect(),