From 51045ee300e9220b1590406b62e4aebc820aceeb Mon Sep 17 00:00:00 2001
From: Sid <sid@storipress.com>
Date: Tue, 28 Nov 2023 12:00:10 +0800
Subject: [PATCH] fix: karbon cli config

---
 packages/karbon/src/cli/bundle/index.ts   | 46 +++++++++++++----------
 packages/karbon/src/cli/bundle/setting.ts | 10 ++++-
 packages/karbon/src/cli/karbon.ts         |  6 ++-
 3 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/packages/karbon/src/cli/bundle/index.ts b/packages/karbon/src/cli/bundle/index.ts
index 72d27f75..34a4d08d 100644
--- a/packages/karbon/src/cli/bundle/index.ts
+++ b/packages/karbon/src/cli/bundle/index.ts
@@ -15,6 +15,7 @@ import { once } from 'remeda'
 import type { OutputChunk, OutputOptions } from 'rollup'
 import type { BuildOptions } from 'vite'
 import invariant from 'tiny-invariant'
+import fs from 'fs-extra'
 import importerChecker from '../plugins/importer-checker'
 import { ignoreSet, targetSet } from './setting'
 
@@ -73,6 +74,8 @@ export async function bundle(path: string, vuefileName: string, layoutName: stri
   const rollupOptions = createConfig(name, dir, ssr)
   const config = await loadNuxtConfigOnce()
 
+  const tailwindConfigPath = `${process.cwd()}/tailwind.config.js`
+
   await viteBuild({
     clearScreen: false,
     resolve: {
@@ -93,17 +96,22 @@ export async function bundle(path: string, vuefileName: string, layoutName: stri
       postcss: {
         plugins: [
           tailwind({
-            config: {
-              content: [
-                `${process.cwd()}/templates/article-layouts/*.{vue,ts,tsx}`,
-                `${process.cwd()}/templates/editor-blocks/*.{vue,ts,tsx}`,
-                `${process.cwd()}/templates/components/**/*.{vue,ts,tsx}`,
-              ],
-              corePlugins: {
-                preflight: false,
+            presets: [
+              {
+                config: {
+                  content: [
+                    `${process.cwd()}/templates/article-layouts/*.{vue,ts,tsx}`,
+                    `${process.cwd()}/templates/editor-blocks/*.{vue,ts,tsx}`,
+                    `${process.cwd()}/templates/components/**/*.{vue,ts,tsx}`,
+                  ],
+                  corePlugins: {
+                    preflight: false,
+                  },
+                  darkMode: ['class', '.force-use-dark-mode'],
+                },
               },
-              darkMode: ['class', '.force-use-dark-mode'],
-            },
+            ],
+            config: tailwindConfigPath,
           }),
         ],
       },
@@ -114,15 +122,15 @@ export async function bundle(path: string, vuefileName: string, layoutName: stri
         : [
             virtual({
               entry: `
-      import component from './${join(path)}'
-      import './main.css'
-      
-      export default component
-`,
+                import component from './${join(path)}'
+                import './main.css'
+                
+                export default component
+              `,
               'main.css': `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-`,
+                @tailwind components;
+                @tailwind utilities;
+              `,
             }),
           ]),
       tsconfigPaths(),
@@ -150,7 +158,7 @@ export async function bundle(path: string, vuefileName: string, layoutName: stri
           'vue',
           {
             '@storipress/custom-field': ['useField', 'FieldType'],
-            '@storipress/sdk/article/utils': ['useArticle', 'useRecommendArticle', 'useSite'],
+            '@storipress/sdk/article/utils': ['useArticle', 'useRecommendArticle', 'useSite', 'useColorMode'],
             '@storipress/sdk/resources': ['useResourceResolver'],
           },
         ],
diff --git a/packages/karbon/src/cli/bundle/setting.ts b/packages/karbon/src/cli/bundle/setting.ts
index e9f95eab..fa6aba34 100644
--- a/packages/karbon/src/cli/bundle/setting.ts
+++ b/packages/karbon/src/cli/bundle/setting.ts
@@ -1,2 +1,10 @@
 export const ignoreSet = new Set(['NuxtLink', 'ClientOnly'])
-export const targetSet = new Set(['ArticleTitle', 'ArticleHeroPhoto', 'ArticleBody', 'ArticleBlurb', 'Icon'])
+export const targetSet = new Set([
+  'ArticleTitle',
+  'ArticleHeroPhoto',
+  'ArticleBody',
+  'ArticleBlurb',
+  'Icon',
+  'NuxtImg',
+  'NuxtPicture',
+])
diff --git a/packages/karbon/src/cli/karbon.ts b/packages/karbon/src/cli/karbon.ts
index 1574d617..e5036c0e 100644
--- a/packages/karbon/src/cli/karbon.ts
+++ b/packages/karbon/src/cli/karbon.ts
@@ -169,7 +169,11 @@ async function testBuild() {
 
     if (packageManager === 'yarn') {
       await configYarn(path.resolve(tempPath, './.yarnrc.yml'))
-      await $$`yarn set version berry`
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const packageJson = require(path.resolve(tempPath, './package.json'))
+      const version = packageJson?.packageManager?.split?.('@')?.[1] || 'berry'
+
+      await $$`yarn set version ${version}`
     }
     await $$`${packageManager} install`
     const { exitCode, stderr } = await $$`npx nuxi build`