Merge pull request wattanx#8 from Shimpei-GANGAN/feat/add-csspath-nux…

…t-options

feat: add 'cssPath' options for Nuxt module & add resolver

playground/css/global.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

playground/nuxt.config.ts

@@ -26,6 +26,7 @@ export default defineNuxtConfig({
       },
     },
     jsxFramework: "vue",
+    cssPath: "@/css/global.css",
   },
   devtools: { enabled: true },
 });

src/module.ts

@@ -9,11 +9,19 @@ import { emitArtifacts, loadConfigAndCreateContext } from "@pandacss/node";
 import { findConfigFile } from "@pandacss/config";
 import { promises as fsp, existsSync } from "node:fs";
 import { Config } from "@pandacss/types";
+import { resolveCSSPath } from "./resolvers";
 
 const logger = useLogger("nuxt:pandacss");
 
 export interface ModuleOptions extends Config {
   configPath?: string;
+  /**
+   * The path of the Panda CSS file.
+   * If the file does not exist, it will be created automatically.
+   * @default '<buildDir>/panda.css'
+   * @example '@/assets/css/global.css'
+   */
+  cssPath?: string;
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -31,6 +39,7 @@ export default defineNuxtModule<ModuleOptions>({
     exclude: [],
     outdir: "styled-system",
     cwd: nuxt.options.buildDir,
+    cssPath: `${nuxt.options.buildDir}/panda.css`,
   }),
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
@@ -62,7 +71,13 @@ export default defineNuxtModule<ModuleOptions>({
       configPath,
     };
 
-    nuxt.options.css.push(resolve(process.cwd(), "src/css/global.css"));
+    // Add CSS file
+    const { resolvedCSSPath, loggerMessage } = await resolveCSSPath(
+      options.cssPath,
+      nuxt
+    );
+    nuxt.options.css.push(resolvedCSSPath);
+    logger.info(loggerMessage);
 
     function loadContext() {
       return loadConfigAndCreateContext({
@@ -108,7 +123,7 @@ function addPandaConfigTemplate(cwd: string, options: ModuleOptions) {
     filename: "panda.config.mjs",
     getContents: () => `
 import { defineConfig } from "@pandacss/dev"
- 
+
 export default defineConfig(${JSON.stringify({ ...options, cwd }, null, 2)})`,
     write: true,
   }).dst;

src/resolvers.ts

@@ -0,0 +1,52 @@
+import { createResolver, useNuxt, resolvePath, addTemplate } from "nuxt/kit";
+import type { ModuleOptions } from "./module";
+import { existsSync } from "node:fs";
+import { relative } from "node:path";
+
+/**
+ *
+ * @param cssPath - ModuleOptions.cssPath
+ * @param nuxt
+ * @returns resolvedCSSPath
+ * @returns loggerMessage
+ * @example
+ * ```ts
+ * const { resolvedCSSPath, loggerMessage } = await resolveCSSPath('@/assets/css/global.css', nuxt);
+ * ```
+ */
+export async function resolveCSSPath(
+  cssPath: ModuleOptions["cssPath"],
+  nuxt = useNuxt()
+): Promise<{
+  resolvedCSSPath: NonNullable<ModuleOptions["cssPath"]>;
+  loggerMessage: string;
+}> {
+  // if cssPath is string, find args.cssPath
+  // else find cssPath from '@/assets/css/global.css'
+  const resolvedCSSPath =
+    typeof cssPath === "string"
+      ? await resolvePath(cssPath, { extensions: [".css"] })
+      : await resolvePath(`${nuxt.options.dir.assets}/css/global.css`, {
+          extensions: [".css"],
+        });
+
+  return existsSync(resolvedCSSPath)
+    ? {
+        resolvedCSSPath,
+        loggerMessage: `🐼 [info] Using Panda CSS file from @/${relative(
+          nuxt.options.srcDir,
+          resolvedCSSPath
+        )}`,
+      }
+    : {
+        resolvedCSSPath: createResolver(import.meta.url).resolve(
+          addTemplate({
+            filename: "panda.css",
+            write: true,
+            getContents: () =>
+              "@layer reset, base, tokens, recipes, utilities;",
+          }).dst
+        ),
+        loggerMessage: "🐼 [info] Using default Panda CSS file.",
+      };
+}

test/basic.test.ts

@@ -27,6 +27,7 @@ describe("basic test", async () => {
     expect(config.exclude).toEqual([]);
     expect(config.outdir).toBe("styled-system");
     expect(config.cwd).toBe(nuxt.options.buildDir);
+    expect(config.cssPath).toBe(`${nuxt.options.buildDir}/panda.css`);
     expect(config.theme).toEqual({
       tokens: {
         colors: {