diff --git a/.changeset/gold-rocks-hunt.md b/.changeset/gold-rocks-hunt.md new file mode 100644 index 00000000..578701fd --- /dev/null +++ b/.changeset/gold-rocks-hunt.md @@ -0,0 +1,5 @@ +--- +"next-yak": minor +--- + +allow to define a prefix for generated css names like variables diff --git a/.changeset/silver-hairs-clean.md b/.changeset/silver-hairs-clean.md index b7c8ef51..10f59247 100644 --- a/.changeset/silver-hairs-clean.md +++ b/.changeset/silver-hairs-clean.md @@ -2,4 +2,4 @@ "yak-swc": minor --- -allow to define the prefix for generated names +allow to define a prefix for generated css names like variables diff --git a/packages/next-yak/withYak/index.ts b/packages/next-yak/withYak/index.ts index 5bba0e57..fe073445 100644 --- a/packages/next-yak/withYak/index.ts +++ b/packages/next-yak/withYak/index.ts @@ -15,6 +15,12 @@ const { resolve } = createRequire(currentDir + "/index.js"); export type YakConfigOptions = { contextPath?: string; + /** + * Optional prefix for generated CSS identifiers. + * This can be used to ensure unique class names across different applications + * or to add organization-specific prefixes. + */ + prefix?: string; experiments?: { debug?: | boolean @@ -32,7 +38,11 @@ const addYak = (yakOptions: YakConfigOptions, nextConfig: NextConfig) => { nextConfig.experimental.swcPlugins ||= []; nextConfig.experimental.swcPlugins.push([ resolve("yak-swc"), - { devMode: process.env.NODE_ENV !== "production", basePath: currentDir }, + { + devMode: process.env.NODE_ENV !== "production", + basePath: currentDir, + prefix: yakOptions.prefix, + }, ]); nextConfig.webpack = (webpackConfig, options) => { @@ -104,7 +114,9 @@ function resolveYakContext(contextPath: string | undefined, cwd: string) { * // your next config here * }; * const yakConfig = { - * // your yak config + * // Optional prefix for generated CSS identifiers + * prefix: "my-app", + * // Other yak config options... * }; * module.exports = withYak(yakConfig, nextConfig); * ```