feat: integration callbacks

.changeset/cool-rats-poke.md

@@ -0,0 +1,9 @@
+---
+'@vanilla-extract/esbuild-plugin': minor
+'@vanilla-extract/rollup-plugin': minor
+'@vanilla-extract/sprinkles': minor
+'@vanilla-extract/vite-plugin': minor
+---
+
+makes changes to the plugins integration (vite/webpack/esbuild/rollup) by allowing to pass those new callbacks to the `processVanillaFile` call
+also exports the ProcessVanillaFileOptions & SprinklesProperties type

.changeset/great-grapes-complain.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/css': patch
+---
+
+fix(css): opti getDevPrefix by removing filePath regex
+which was especially slow when used against filePath located somewhere in node_modules

.changeset/moody-ears-study.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/vite-plugin': minor
+---
+
+allows customizing the forceEmitCssInSsrBuild option for the vite plugin (needed to make the HMR work with SSR frameworks for those not hard-coded, like vite-plugin-ssr)

.changeset/perfect-rocks-check.md

@@ -0,0 +1,7 @@
+---
+'@vanilla-extract/integration': minor
+---
+
+creates an AdapterContext (which is just a reference to the result of the adapter after the evalCode of processVanillaFile so anyone can retrieve the generated class names / CSS rules by file scopes
+
+adding a onEvaluated callback to processVanillaFile to retrieve the resulting mapping of classNames by property+value+condition using the AdapterContext

.changeset/strong-windows-fail.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/integration': minor
+---
+
+adding a serializeVanillaModule callback like the current serializeVirtualCssPath callback, it allows customizing the behaviour
+also exports the default implementation of serializeVanillaModule

.changeset/tidy-gifts-tap.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/vite-plugin': minor
+---
+
+fix HMR

.changeset/twelve-suns-dream.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/vite-plugin': minor
+---
+
+using raw .css.ts from another package than config.root

packages/css/src/identifier.ts

@@ -15,12 +15,12 @@ function getDevPrefix({
   if (debugFileName) {
     const { filePath } = getFileScope();
 
-    const matches = filePath.match(
-      /(?<dir>[^\/\\]*)?[\/\\]?(?<file>[^\/\\]*)\.css\.(ts|js|tsx|jsx|cjs|mjs)$/,
-    );
+    const pathParts = filePath.split('/');
+    const dir = pathParts[pathParts.length - 2];
+    const fileNameParts = pathParts[pathParts.length - 1].split('.');
+    const file = fileNameParts.length > 1 ? fileNameParts[0] : undefined;
 
-    if (matches && matches.groups) {
-      const { dir, file } = matches.groups;
+    if (dir || file) {
       parts.unshift(file && file !== 'index' ? file : dir);
     }
   }

packages/esbuild-plugin/src/index.ts

@@ -9,12 +9,17 @@ import {
   vanillaExtractTransformPlugin,
   IdentifierOption,
   CompileOptions,
+  ProcessVanillaFileOptions,
 } from '@vanilla-extract/integration';
 import type { Plugin } from 'esbuild';
 
 const vanillaCssNamespace = 'vanilla-extract-css-ns';
 
-interface VanillaExtractPluginOptions {
+interface VanillaExtractPluginOptions
+  extends Pick<
+    ProcessVanillaFileOptions,
+    'onEvaluated' | 'serializeVanillaModule'
+  > {
   outputCss?: boolean;
   /**
    * @deprecated Use `esbuildOptions.external` instead.
@@ -32,6 +37,8 @@ export function vanillaExtractPlugin({
   processCss,
   identifiers,
   esbuildOptions,
+  onEvaluated,
+  serializeVanillaModule,
 }: VanillaExtractPluginOptions = {}): Plugin {
   if (runtime) {
     // If using runtime CSS then just apply fileScopes and debug IDs to code
@@ -96,6 +103,8 @@ export function vanillaExtractPlugin({
           filePath: path,
           outputCss,
           identOption,
+          onEvaluated,
+          serializeVanillaModule,
         });
 
         return {

packages/integration/src/index.ts

@@ -1,4 +1,5 @@
 export {
+  defaultSerializeVanillaModule,
   processVanillaFile,
   parseFileScope,
   stringifyFileScope,
@@ -15,4 +16,8 @@ export * from './filters';
 
 export type { IdentifierOption } from './types';
 export type { PackageInfo } from './packageInfo';
+export type {
+  AdapterContext,
+  ProcessVanillaFileOptions,
+} from './processVanillaFile';
 export type { CompileOptions } from './compile';

packages/integration/src/processVanillaFile.ts

@@ -28,7 +28,7 @@ export function parseFileScope(serialisedFileScope: string): FileScope {
   };
 }
 
-interface ProcessVanillaFileOptions {
+export interface ProcessVanillaFileOptions {
   source: string;
   filePath: string;
   outputCss?: boolean;
@@ -38,41 +38,66 @@ interface ProcessVanillaFileOptions {
     fileScope: FileScope;
     source: string;
   }) => string | Promise<string>;
+  onEvaluated?: (args: {
+    source: string;
+    context: AdapterContext;
+    evalResult: Record<string, unknown>;
+    filePath: string;
+  }) => void;
+  serializeVanillaModule?: (
+    cssImports: Array<string>,
+    exports: Record<string, unknown>,
+    context: AdapterContext,
+    filePath: string,
+  ) => string;
+}
+
+export interface AdapterContext {
+  cssByFileScope: Map<string, Css[]>;
+  localClassNames: Set<string>;
+  composedClassLists: Composition[];
+  usedCompositions: Set<string>;
 }
+
+type Css = Parameters<Adapter['appendCss']>[0];
+type Composition = Parameters<Adapter['registerComposition']>[0];
+
 export async function processVanillaFile({
   source,
   filePath,
   outputCss = true,
   identOption = process.env.NODE_ENV === 'production' ? 'short' : 'debug',
   serializeVirtualCssPath,
+  serializeVanillaModule,
+  onEvaluated,
 }: ProcessVanillaFileOptions) {
-  type Css = Parameters<Adapter['appendCss']>[0];
-  type Composition = Parameters<Adapter['registerComposition']>[0];
-
-  const cssByFileScope = new Map<string, Array<Css>>();
-  const localClassNames = new Set<string>();
-  const composedClassLists: Array<Composition> = [];
-  const usedCompositions = new Set<string>();
+  const context: AdapterContext = {
+    cssByFileScope: new Map<string, Array<Css>>(),
+    localClassNames: new Set<string>(),
+    composedClassLists: [],
+    usedCompositions: new Set<string>(),
+  };
 
   const cssAdapter: Adapter = {
     appendCss: (css, fileScope) => {
       if (outputCss) {
         const serialisedFileScope = stringifyFileScope(fileScope);
-        const fileScopeCss = cssByFileScope.get(serialisedFileScope) ?? [];
+        const fileScopeCss =
+          context.cssByFileScope.get(serialisedFileScope) ?? [];
 
         fileScopeCss.push(css);
 
-        cssByFileScope.set(serialisedFileScope, fileScopeCss);
+        context.cssByFileScope.set(serialisedFileScope, fileScopeCss);
       }
     },
     registerClassName: (className) => {
-      localClassNames.add(className);
+      context.localClassNames.add(className);
     },
     registerComposition: (composedClassList) => {
-      composedClassLists.push(composedClassList);
+      context.composedClassLists.push(composedClassList);
     },
     markCompositionUsed: (identifier) => {
-      usedCompositions.add(identifier);
+      context.usedCompositions.add(identifier);
     },
     onEndFileScope: () => {},
     getIdentOption: () => identOption,
@@ -96,16 +121,17 @@ export async function processVanillaFile({
     { console, process, __adapter__: cssAdapter },
     true,
   );
+  onEvaluated?.({ source, context, evalResult, filePath });
 
   process.env.NODE_ENV = currentNodeEnv;
 
   const cssImports = [];
 
-  for (const [serialisedFileScope, fileScopeCss] of cssByFileScope) {
+  for (const [serialisedFileScope, fileScopeCss] of context.cssByFileScope) {
     const fileScope = parseFileScope(serialisedFileScope);
     const css = transformCss({
-      localClassNames: Array.from(localClassNames),
-      composedClassLists,
+      localClassNames: Array.from(context.localClassNames),
+      composedClassLists: context.composedClassLists,
       cssObjs: fileScopeCss,
     }).join('\n');
 
@@ -148,16 +174,12 @@ export async function processVanillaFile({
     true,
   );
 
-  const unusedCompositions = composedClassLists
-    .filter(({ identifier }) => !usedCompositions.has(identifier))
-    .map(({ identifier }) => identifier);
-
-  const unusedCompositionRegex =
-    unusedCompositions.length > 0
-      ? RegExp(`(${unusedCompositions.join('|')})\\s`, 'g')
-      : null;
-
-  return serializeVanillaModule(cssImports, evalResult, unusedCompositionRegex);
+  return (serializeVanillaModule ?? defaultSerializeVanillaModule)(
+    cssImports,
+    evalResult,
+    context,
+    filePath,
+  );
 }
 
 export function stringifyExports(
@@ -246,11 +268,20 @@ export function stringifyExports(
   );
 }
 
-function serializeVanillaModule(
+export function defaultSerializeVanillaModule(
   cssImports: Array<string>,
   exports: Record<string, unknown>,
-  unusedCompositionRegex: RegExp | null,
+  context: AdapterContext,
 ) {
+  const unusedCompositions = context.composedClassLists
+    .filter(({ identifier }) => !context.usedCompositions.has(identifier))
+    .map(({ identifier }) => identifier);
+
+  const unusedCompositionRegex =
+    unusedCompositions.length > 0
+      ? RegExp(`(${unusedCompositions.join('|')})\\s`, 'g')
+      : null;
+
   const recipeImports = new Set<string>();
 
   const moduleExports = Object.keys(exports).map((key) =>

packages/rollup-plugin/src/index.ts

@@ -7,12 +7,17 @@ import {
   getSourceFromVirtualCssFile,
   virtualCssFileFilter,
   CompileOptions,
+  ProcessVanillaFileOptions,
 } from '@vanilla-extract/integration';
 import { posix } from 'path';
 
 const { relative, normalize, dirname } = posix;
 
-interface Options {
+interface Options
+  extends Pick<
+    ProcessVanillaFileOptions,
+    'onEvaluated' | 'serializeVanillaModule'
+  > {
   identifiers?: IdentifierOption;
   cwd?: string;
   esbuildOptions?: CompileOptions['esbuildOptions'];
@@ -21,6 +26,8 @@ export function vanillaExtractPlugin({
   identifiers,
   cwd = process.cwd(),
   esbuildOptions,
+  onEvaluated,
+  serializeVanillaModule,
 }: Options = {}): Plugin {
   const emittedFiles = new Map<string, string>();
   const isProduction = process.env.NODE_ENV === 'production';
@@ -55,6 +62,8 @@ export function vanillaExtractPlugin({
         source,
         filePath,
         identOption,
+        onEvaluated,
+        serializeVanillaModule,
       });
       return {
         code: output,

packages/sprinkles/src/index.ts

@@ -12,6 +12,7 @@ import {
   createSprinkles as internalCreateSprinkles,
 } from './createSprinkles';
 import { SprinklesProperties, ResponsiveArrayConfig } from './types';
+export type { SprinklesProperties } from './types';
 
 export { createNormalizeValueFn, createMapValueFn } from './createUtils';
 export type { ConditionalValue, RequiredConditionalValue } from './createUtils';