Skip to content

Commit

Permalink
Merge pull request wattanx#8 from Shimpei-GANGAN/feat/add-csspath-nux…
Browse files Browse the repository at this point in the history
…t-options

feat: add 'cssPath' options for Nuxt module & add resolver
  • Loading branch information
wattanx authored Oct 5, 2023
2 parents 679e2cb + 02f266a commit 6e66495
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 2 deletions.
1 change: 1 addition & 0 deletions playground/css/global.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@layer reset, base, tokens, recipes, utilities;
1 change: 1 addition & 0 deletions playground/nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default defineNuxtConfig({
},
},
jsxFramework: "vue",
cssPath: "@/css/global.css",
},
devtools: { enabled: true },
});
19 changes: 17 additions & 2 deletions src/module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>({
Expand All @@ -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);
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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;
Expand Down
52 changes: 52 additions & 0 deletions src/resolvers.ts
Original file line number Diff line number Diff line change
@@ -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.",
};
}
1 change: 1 addition & 0 deletions test/basic.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down

0 comments on commit 6e66495

Please sign in to comment.