chore: 3.4.3

jaskang · Apr 11, 2024 · b094385 · b094385
1 parent 3d8b92a
commit b094385
Show file tree

Hide file tree

Showing 14 changed files with 177 additions and 2,238 deletions.
diff --git a/package.json b/package.json
@@ -14,14 +14,14 @@
     "@jaskang/config": "^2.0.0",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.12",
-    "@tailwindcss/vite": "^4.0.0-alpha.13",
     "@types/jsdom": "^21.1.6",
     "@types/mdast": "^4.0.3",
     "@types/node": "^20.12.7",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.24.1",
@@ -32,10 +32,11 @@
     "mdast-util-to-markdown": "^2.1.0",
     "micromark-extension-frontmatter": "^2.0.0",
     "mini-svg-data-uri": "^1.4.4",
+    "postcss-import": "^16.1.0",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.13",
     "rimraf": "^5.0.5",
-    "tailwindcss": "^4.0.0-alpha.14",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.4.4",
     "unist-util-visit": "^5.0.0",
     "vite": "^5.2.8",

diff --git a/packages/docs/.vitepress/config.ts b/packages/docs/.vitepress/config.ts
@@ -4,10 +4,14 @@ import { createHash } from 'node:crypto'
 import { defineConfigWithTheme, type MarkdownRenderer } from 'vitepress'
 import { readFileSync } from 'node:fs'
 import jsx from '@vitejs/plugin-vue-jsx'
-import tailwindcss from '@tailwindcss/vite'
-
-// import typography from '@tailwindcss/typography'
-// import forms from '@tailwindcss/forms'
+import colors from 'tailwindcss/colors'
+import typography from '@tailwindcss/typography'
+import nesting from 'tailwindcss/nesting'
+import autoprefixer from 'autoprefixer'
+import tailwindcss from 'tailwindcss'
+import atImport from 'postcss-import'
+import forms from '@tailwindcss/forms'
+import { tailwindcss as tailv } from '@tailv/preset'
 import { ThemeConfig } from './theme/theme'
 import { demo } from './plugins/demo'
 const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -18,7 +22,7 @@ export default defineConfigWithTheme<ThemeConfig>({
   title: 'My Awesome Project',
   description: 'A VitePress Site',
   vite: {
-    plugins: [jsx(), demo(), tailwindcss()],
+    plugins: [jsx(), demo()],
     resolve: {
       alias: [
         {
@@ -34,51 +38,41 @@ export default defineConfigWithTheme<ThemeConfig>({
       ],
     },
     css: {
-      transformer: 'lightningcss',
-      // postcss: {
-      // plugins: [
-      // 'postcss-import': {},
-      // 'tailwindcss/nesting': {},
-      // autoprefixer({}) as any,
-      // tailwindcss({
-      //   darkMode: 'class',
-      //   content: [
-      //     './index.html',
-      //     join(__dirname, '../../vue/src/**/*.{ts,tsx,vue}'),
-      //     join(__dirname, '../../docs/*.{md,vue,ts}'),
-      //     join(__dirname, '../../docs/components/**/*.{md,vue,ts}'),
-      //     join(__dirname, '../../docs/.vitepress/theme/**/*.{md,vue,ts}'),
-      //   ],
-      //   theme: {
-      //     extend: {
-      //       colors: {
-      //         primary: colors.indigo,
-      //         success: colors.green,
-      //         warning: colors.amber,
-      //         danger: colors.red,
-      //       },
-      //       maxWidth: {
-      //         '8xl': '90rem',
-      //       },
-      //       typography: theme => ({
-      //         DEFAULT: {
-      //           css: {
-      //             maxWidth: 'none',
-      //           },
-      //         },
-      //       }),
-      //     },
-      //   },
-      //   plugins: [
-      //     typography(),
-      //     forms({
-      //       strategy: 'base',
-      //     }),
-      //   ],
-      //   blocklist: ['container'],
-      // }),
-      // ],
-      // },
+      // transformer: 'lightningcss',
+      postcss: {
+        plugins: [
+          atImport(),
+          nesting,
+          autoprefixer({}) as any,
+          tailwindcss({
+            darkMode: 'class',
+            content: [
+              './index.html',
+              join(__dirname, '../../vue/src/**/*.{ts,tsx,vue}'),
+              join(__dirname, '../../docs/*.{md,vue,ts}'),
+              join(__dirname, '../../docs/components/**/*.{md,vue,ts}'),
+              join(__dirname, '../../docs/.vitepress/theme/**/*.{md,vue,ts}'),
+            ],
+            theme: {
+              extend: {
+                maxWidth: {
+                  '8xl': '90rem',
+                },
+                typography: theme => ({
+                  DEFAULT: {
+                    css: {
+                      maxWidth: 'none',
+                    },
+                  },
+                }),
+              },
+            },
+            presets: [tailv],
+            plugins: [typography()],
+            blocklist: ['container'],
+          }),
+        ],
+      },
     },
   },
   markdown: {

diff --git a/packages/docs/.vitepress/theme/components/DemoWrapper.vue b/packages/docs/.vitepress/theme/components/DemoWrapper.vue
@@ -31,7 +31,7 @@ const showCode = ref(false)
       '--tw-prose-pre-bg': 'transparent',
     }"
   >
-    <div class="demo-wrapper-svg-bg flex items-center justify-end bg-slate-50 py-1 px-2">
+    <div class="demo-wrapper-svg-bg flex items-center justify-end bg-slate-50 px-2 py-1">
       <div class="flex-1">
         <svg viewBox="0 0 32 32" class="h-4 w-4">
           <path fill="#41b883" d="M24.4 3.925H30l-14 24.15L2 3.925h10.71l3.29 5.6l3.22-5.6Z"></path>

diff --git a/packages/docs/.vitepress/theme/styles/code.css b/packages/docs/.vitepress/theme/styles/code.css
@@ -1,3 +1,17 @@
+.prose {
+  --vp-code-padding-x: 0.875rem;
+  --vp-code-padding-y: 0.875rem;
+  --vp-code-copy-color: var(--color-slate-500);
+  --vp-code-copy-code-bg: var(--color-white);
+  --vp-code-copy-code-border-color: var(--color-slate-200);
+  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgb(100, 116, 139)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
+  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgb(100, 116, 139)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
+
+  font-size: 0.875rem;
+  line-height: 1.7142857;
+}
+
+/* vp-code */
 .prose :where(.vp-code span) {
   color: var(--shiki-light, inherit);
 }
@@ -8,6 +22,7 @@
 
 .prose :where(.vp-code) {
   padding: var(--vp-code-padding-x) var(--vp-code-padding-y);
+  margin: 0;
   /* border-radius: var(--radius); */
 }
 
@@ -37,8 +52,6 @@
   width: 36px;
   height: 36px;
   color: var(--vp-code-copy-color);
-  -webkit-mask: var(--vp-code-copy-color);
-  mask: var(--vp-code-copy-color);
   background-color: var(--vp-code-copy-code-bg);
   opacity: 0;
   cursor: pointer;