DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UnoCSS (TailwindCSS) (Storybook only) (#61)

Browse Source 
* feat: unocss (wip)

* feat: unocss (storybook only)

* cleanup unocss config

* revert button.stories.tsx changes
This commit is contained in:
Razboy20
2024-02-03 15:21:19 -06:00
committed by doprz
parent bb3b313fd2
commit 85c7f7817c
10 changed files with 427 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc
View File

@@ -18,6 +18,7 @@
"airbnb-base",
"airbnb/rules/react",
"airbnb-typescript",
"@unocss",
"prettier",
],
"plugins": [

2
.storybook/preview.tsx
View File

@@ -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: {

3
.storybook/vite-storybook.config.ts
View File

@@ -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,

7
package.json
View File

@@ -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"

348
pnpm-lock.yaml generated
View File

@@ -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'}

12
postcss.config.cjs
View File

@@ -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;

2
src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import styles from './ExtensionRoot.module.scss';
import 'uno.css';
interface Props {
testId?: string;
}

3
tsconfig.json
View File

@@ -54,6 +54,7 @@
"package.json",
".eslintrc",
"postcss.config.cjs",
".storybook"
".storybook",
"unocss.config.ts",
]
}

58
unocss.config.ts Normal file
View File

@@ -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()],
});

2
vite.config.ts
View File

@@ -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(),