diff --git a/.changeset/purple-parents-tease.md b/.changeset/purple-parents-tease.md new file mode 100644 index 000000000..5eb569026 --- /dev/null +++ b/.changeset/purple-parents-tease.md @@ -0,0 +1,10 @@ +--- +'@vanilla-extract/esbuild-plugin': minor +'@vanilla-extract/jest-transform': minor +'@vanilla-extract/webpack-plugin': minor +'@vanilla-extract/rollup-plugin': minor +'@vanilla-extract/integration': minor +'@vanilla-extract/vite-plugin': minor +--- + +Optional `packageName` config option that can be used if package json isn't available and a different name needs to be used diff --git a/packages/esbuild-plugin/src/index.ts b/packages/esbuild-plugin/src/index.ts index c86aa777b..63622dc07 100644 --- a/packages/esbuild-plugin/src/index.ts +++ b/packages/esbuild-plugin/src/index.ts @@ -24,6 +24,7 @@ interface VanillaExtractPluginOptions { processCss?: (css: string) => Promise; identifiers?: IdentifierOption; esbuildOptions?: CompileOptions['esbuildOptions']; + packageName?: string; } export function vanillaExtractPlugin({ outputCss, @@ -32,6 +33,7 @@ export function vanillaExtractPlugin({ processCss, identifiers, esbuildOptions, + packageName, }: VanillaExtractPluginOptions = {}): Plugin { if (runtime) { // If using runtime CSS then just apply fileScopes and debug IDs to code diff --git a/packages/integration/src/compile.ts b/packages/integration/src/compile.ts index c7abd24f6..792862b54 100644 --- a/packages/integration/src/compile.ts +++ b/packages/integration/src/compile.ts @@ -14,14 +14,14 @@ import { getPackageInfo } from './packageInfo'; interface VanillaExtractTransformPluginParams { identOption?: IdentifierOption; + packageName?: string; } export const vanillaExtractTransformPlugin = ({ identOption, + packageName, }: VanillaExtractTransformPluginParams): Plugin => ({ name: 'vanilla-extract-filescope', setup(build) { - const packageInfo = getPackageInfo(build.initialOptions.absWorkingDir); - build.onLoad({ filter: cssFileFilter }, async ({ path }) => { const originalSource = await fs.readFile(path, 'utf-8'); @@ -29,7 +29,9 @@ export const vanillaExtractTransformPlugin = ({ source: originalSource, filePath: path, rootPath: build.initialOptions.absWorkingDir!, - packageName: packageInfo.name, + packageName: + packageName ?? + getPackageInfo(build.initialOptions.absWorkingDir).name, identOption: identOption ?? (build.initialOptions.minify ? 'short' : 'debug'), }); diff --git a/packages/integration/src/compiler.ts b/packages/integration/src/compiler.ts index 40d1808b2..15165ca76 100644 --- a/packages/integration/src/compiler.ts +++ b/packages/integration/src/compiler.ts @@ -48,12 +48,13 @@ const createViteServer = async ({ root, identifiers, vitePlugins = [], + packageName, }: { root: string; identifiers: IdentifierOption; vitePlugins?: Array; + packageName?: string; }) => { - const pkg = getPackageInfo(root); const vite = await import('vite'); normalizeModuleId = vite.normalizePath; @@ -93,7 +94,7 @@ const createViteServer = async ({ source: code, rootPath: root, filePath: id, - packageName: pkg.name, + packageName: packageName ?? getPackageInfo(root).name, identOption: identifiers, globalAdapterIdentifier, }); diff --git a/packages/jest-transform/src/index.ts b/packages/jest-transform/src/index.ts index 28cfdbfa2..43d47edc6 100644 --- a/packages/jest-transform/src/index.ts +++ b/packages/jest-transform/src/index.ts @@ -25,7 +25,7 @@ const vanillaTransformer: Transformer = { source, filePath, rootPath: options.config.rootDir, - packageName: packageName, + packageName, identOption: 'debug', }); diff --git a/packages/rollup-plugin/src/index.ts b/packages/rollup-plugin/src/index.ts index a35bc318d..14e14f77a 100644 --- a/packages/rollup-plugin/src/index.ts +++ b/packages/rollup-plugin/src/index.ts @@ -16,11 +16,13 @@ interface Options { identifiers?: IdentifierOption; cwd?: string; esbuildOptions?: CompileOptions['esbuildOptions']; + packageName?: string; } export function vanillaExtractPlugin({ identifiers, cwd = process.cwd(), esbuildOptions, + packageName, }: Options = {}): Plugin { const isProduction = process.env.NODE_ENV === 'production'; @@ -42,6 +44,7 @@ export function vanillaExtractPlugin({ cwd, esbuildOptions, identOption, + packageName, }); for (const file of watchFiles) { diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts index 6a807fc2d..6ed612791 100644 --- a/packages/vite-plugin/src/index.ts +++ b/packages/vite-plugin/src/index.ts @@ -24,11 +24,13 @@ interface Options { identifiers?: IdentifierOption; emitCssInSsr?: boolean; esbuildOptions?: CompileOptions['esbuildOptions']; + packageName?: string; } export function vanillaExtractPlugin({ identifiers, emitCssInSsr, esbuildOptions, + packageName, }: Options = {}): Plugin { let config: ResolvedConfig; let server: ViteDevServer; @@ -39,7 +41,6 @@ export function vanillaExtractPlugin({ let resolvedEmitCssInSsr: boolean = hasEmitCssOverride ? emitCssInSsr : !!process.env.VITE_RSC_BUILD; - let packageName: string; const getAbsoluteVirtualFileId = (source: string) => normalizePath(path.join(config.root, source)); @@ -67,7 +68,10 @@ export function vanillaExtractPlugin({ }, async configResolved(resolvedConfig) { config = resolvedConfig; - packageName = getPackageInfo(config.root).name; + + if (!packageName) { + packageName = getPackageInfo(config.root).name; + } if (config.command === 'serve') { postCssConfig = await resolvePostcssConfig(config); diff --git a/packages/webpack-plugin/src/loader.ts b/packages/webpack-plugin/src/loader.ts index 08fb9c287..0943a76a7 100644 --- a/packages/webpack-plugin/src/loader.ts +++ b/packages/webpack-plugin/src/loader.ts @@ -33,6 +33,7 @@ const virtualNextFileLoaderExtractionFile = path.join( interface LoaderOptions { outputCss: boolean; identifiers?: IdentifierOption; + packageName?: string; } interface InternalLoaderOptions extends LoaderOptions { @@ -47,9 +48,9 @@ const defaultIdentifierOption = ( identifiers ?? (mode === 'production' ? 'short' : 'debug'); export default function (this: LoaderContext, source: string) { - const { identifiers } = loaderUtils.getOptions(this) as InternalLoaderOptions; - - const { name } = getPackageInfo(this.rootContext); + const { identifiers, packageName } = loaderUtils.getOptions( + this, + ) as InternalLoaderOptions; const callback = this.async(); @@ -57,7 +58,7 @@ export default function (this: LoaderContext, source: string) { source, filePath: this.resourcePath, rootPath: this.rootContext, - packageName: name, + packageName: packageName ?? getPackageInfo(this.rootContext).name, identOption: defaultIdentifierOption(this.mode, identifiers), }) .then((code) => { diff --git a/site/docs/integrations/esbuild.md b/site/docs/integrations/esbuild.md index cc1fe8323..f802380a2 100644 --- a/site/docs/integrations/esbuild.md +++ b/site/docs/integrations/esbuild.md @@ -114,3 +114,7 @@ Each integration will set a default value based on the configuration options pas esbuild is used internally to compile `.css.ts` files before evaluating them to extract styles. You can pass additional options here to customize that process. Accepts a subset of esbuild build options (`plugins`, `external`, `define`, `loader` and `tsconfig`). See the [build API](https://esbuild.github.io/api/#build-api) documentation. + +### packageName + +The name of the closest package json is used to scope the styles. If a package json isn't available or there's a need to use a different name, `packageName` can be used instead. diff --git a/site/docs/integrations/next.md b/site/docs/integrations/next.md index 54be3db96..c015da325 100644 --- a/site/docs/integrations/next.md +++ b/site/docs/integrations/next.md @@ -67,6 +67,10 @@ const withVanillaExtract = createVanillaExtractPlugin({ Each integration will set a default value based on the configuration options passed to the bundler. +### packageName + +The name of the closest package json is used to scope the styles. If a package json isn't available or there's a need to use a different name, `packageName` can be used instead. + ## Transpiling Vanilla Extract-dependent Libraries By default, Next.js does not allow importing of TypeScript files outside of the app root. diff --git a/site/docs/integrations/rollup.md b/site/docs/integrations/rollup.md index 00bc292ee..d2c4da226 100644 --- a/site/docs/integrations/rollup.md +++ b/site/docs/integrations/rollup.md @@ -90,3 +90,7 @@ Each integration will set a default value based on the configuration options pas esbuild is used internally to compile `.css.ts` files before evaluating them to extract styles. You can pass additional options here to customize that process. Accepts a subset of esbuild build options (`plugins`, `external`, `define`, `loader` and `tsconfig`). See the [build API](https://esbuild.github.io/api/#build-api) documentation. + +### packageName + +The name of the closest package json is used to scope the styles. If a package json isn't available or there's a need to use a different name, `packageName` can be used instead. diff --git a/site/docs/integrations/vite.md b/site/docs/integrations/vite.md index 456432345..3e4a61bc7 100644 --- a/site/docs/integrations/vite.md +++ b/site/docs/integrations/vite.md @@ -88,3 +88,7 @@ export default { esbuild is used internally to compile `.css.ts` files before evaluating them to extract styles. You can pass additional options here to customize that process. Accepts a subset of esbuild build options (`plugins`, `external`, `define`, `loader` and `tsconfig`). See the [build API](https://esbuild.github.io/api/#build-api) documentation. + +### packageName + +The name of the closest package json is used to scope the styles. If a package json isn't available or there's a need to use a different name, `packageName` can be used instead. diff --git a/site/docs/integrations/webpack.md b/site/docs/integrations/webpack.md index 6665aa12c..2ad3c4e8c 100644 --- a/site/docs/integrations/webpack.md +++ b/site/docs/integrations/webpack.md @@ -100,3 +100,7 @@ VanillaExtractPlugin({ ``` Each integration will set a default value based on the configuration options passed to the bundler. + +### packageName + +The name of the closest package json is used to scope the styles. If a package json isn't available or there's a need to use a different name, `packageName` can be used instead.