Removing the need for a package json

.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

packages/esbuild-plugin/src/index.ts

@@ -24,6 +24,7 @@ interface VanillaExtractPluginOptions {
   processCss?: (css: string) => Promise<string>;
   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

packages/integration/src/compile.ts

@@ -14,22 +14,24 @@ 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');
 
       const source = await transform({
         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'),
       });

packages/integration/src/compiler.ts

@@ -48,12 +48,13 @@ const createViteServer = async ({
   root,
   identifiers,
   vitePlugins = [],
+  packageName,
 }: {
   root: string;
   identifiers: IdentifierOption;
   vitePlugins?: Array<VitePlugin>;
+  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,
             });

packages/jest-transform/src/index.ts

@@ -25,7 +25,7 @@ const vanillaTransformer: Transformer = {
       source,
       filePath,
       rootPath: options.config.rootDir,
-      packageName: packageName,
+      packageName,
       identOption: 'debug',
     });
 

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) {

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);

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,17 +48,17 @@ 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();
 
   transform({
     source,
     filePath: this.resourcePath,
     rootPath: this.rootContext,
-    packageName: name,
+    packageName: packageName ?? getPackageInfo(this.rootContext).name,
     identOption: defaultIdentifierOption(this.mode, identifiers),
   })
     .then((code) => {

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.

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.

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.

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.

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.