Webpack: No longer require babel to be run on .css.ts files (#341)

Co-authored-by: Mark Dalgleish <[email protected]>

Author: mattcompiles

.changeset/bright-onions-film.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/vite-plugin': patch
+---
+
+Refactor SSR file scoping to use centralised `addFileScope` implementation

.changeset/fuzzy-flies-camp.md

@@ -0,0 +1,9 @@
+---
+'@vanilla-extract/webpack-plugin': minor
+---
+
+No longer require Babel to be run on .css.ts files
+
+Previously, the `@vanilla-extract/webpack-plugin` required the `@vanilla-extract/babel-plugin` to be run over .css.ts files. In order to bring webpack inline with the other integrations, the `@vanilla-extract/webpack-plugin` can now be used without Babel. 
+
+Note: Automatic debug IDs still require the `@vanilla-extract/babel-plugin`.

.changeset/warm-walls-act.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/integration': minor
+---
+
+Add `addFileScope` API

README.md

@@ -121,18 +121,10 @@ There are currently a few integrations to choose from.
 1. Install the dependencies.
 
 ```bash
-npm install @vanilla-extract/css @vanilla-extract/babel-plugin @vanilla-extract/webpack-plugin
+npm install @vanilla-extract/css @vanilla-extract/webpack-plugin
 ```
 
-2. Add the [Babel](https://babeljs.io) plugin.
-
-```json
-{
-  "plugins": ["@vanilla-extract/babel-plugin"]
-}
-```
-
-3. Add the [webpack](https://webpack.js.org) plugin.
+2. Add the [webpack](https://webpack.js.org) plugin.
 
 > 💡 This plugin accepts an optional [configuration object](#configuration).
 
@@ -179,6 +171,18 @@ module.exports = {
   ```
 </details>
 
+3. If you'd like automatic debuggable identifiers, you can add the [Babel](https://babeljs.io) plugin.
+   
+```bash
+$ npm install @vanilla-extract/babel-plugin
+```
+
+```json
+{
+  "plugins": ["@vanilla-extract/babel-plugin"]
+}
+```
+
 ### esbuild
 
 1. Install the dependencies.

packages/integration/src/addFileScope.ts

@@ -0,0 +1,33 @@
+import { posix, relative, sep } from 'path';
+import type { PackageInfo } from './packageInfo';
+
+interface AddFileScopeParams {
+  source: string;
+  filePath: string;
+  packageInfo: PackageInfo;
+}
+export function addFileScope({
+  source,
+  filePath,
+  packageInfo,
+}: AddFileScopeParams) {
+  if (source.indexOf('@vanilla-extract/css/fileScope') > -1) {
+    return { source, updated: false };
+  }
+
+  // Encode windows file paths as posix
+  const normalizedPath = posix.join(
+    ...relative(packageInfo.dirname, filePath).split(sep),
+  );
+
+  const packageName = packageInfo.name ? `"${packageInfo.name}"` : 'undefined';
+
+  const contents = `
+    import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+    setFileScope("${normalizedPath}", ${packageName});
+    ${source}
+    endFileScope();
+  `;
+
+  return { source: contents, updated: true };
+}

packages/integration/src/compile.ts

@@ -1,10 +1,11 @@
-import { dirname, relative, join, posix, sep } from 'path';
+import { dirname, join } from 'path';
 import { promises as fs } from 'fs';
 
 import { build as esbuild, Plugin } from 'esbuild';
 
 import { cssFileFilter } from './filters';
 import { getPackageInfo } from './packageInfo';
+import { addFileScope } from './addFileScope';
 
 export const vanillaExtractFilescopePlugin = (): Plugin => ({
   name: 'vanilla-extract-filescope',
@@ -14,24 +15,15 @@ export const vanillaExtractFilescopePlugin = (): Plugin => ({
     build.onLoad({ filter: cssFileFilter }, async ({ path }) => {
       const originalSource = await fs.readFile(path, 'utf-8');
 
-      if (originalSource.indexOf('@vanilla-extract/css/fileScope') === -1) {
-        // Encode windows file paths as posix
-        const filePath = posix.join(
-          ...relative(packageInfo.dirname, path).split(sep),
-        );
-
-        const contents = `
-        import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-        setFileScope("${filePath}", ${
-          packageInfo.name ? `"${packageInfo.name}"` : 'undefined'
-        });
-
-        ${originalSource}
-        endFileScope()
-        `;
+      const { source, updated } = addFileScope({
+        source: originalSource,
+        filePath: path,
+        packageInfo,
+      });
 
+      if (updated) {
         return {
-          contents,
+          contents: source,
           loader: path.match(/\.(ts|tsx)$/i) ? 'ts' : undefined,
           resolveDir: dirname(path),
         };

packages/integration/src/index.ts

@@ -3,6 +3,8 @@ export { getSourceFromVirtualCssFile } from './virtualFile';
 export { getPackageInfo } from './packageInfo';
 export { compile, vanillaExtractFilescopePlugin } from './compile';
 export { hash } from './hash';
+export { addFileScope } from './addFileScope';
 export * from './filters';
 
 export type { IdentifierOption } from './processVanillaFile';
+export type { PackageInfo } from './packageInfo';

packages/integration/src/packageInfo.ts

@@ -2,7 +2,7 @@ import path from 'path';
 
 import findUp from 'find-up';
 
-interface PackageInfo {
+export interface PackageInfo {
   name: string;
   path: string;
   dirname: string;

packages/vite-plugin/src/index.ts

@@ -10,6 +10,7 @@ import {
   hash,
   getPackageInfo,
   IdentifierOption,
+  addFileScope,
 } from '@vanilla-extract/integration';
 
 interface Options {
@@ -59,23 +60,11 @@ export function vanillaExtractPlugin({ identifiers }: Options = {}): Plugin {
       }
 
       if (ssr) {
-        // If file already has a scope (has already run through babel plugin)
-        if (code.indexOf('@vanilla-extract/css/fileScope') > -1) {
-          return code;
-        }
-
-        const filePath = normalizePath(path.relative(packageInfo.dirname, id));
-
-        const packageName = packageInfo.name
-          ? `"${packageInfo.name}"`
-          : 'undefined';
-
-        return `
-          import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-          setFileScope("${filePath}", ${packageName});
-          ${code}
-          endFileScope();
-        `;
+        return addFileScope({
+          source: code,
+          filePath: normalizePath(path.relative(packageInfo.dirname, id)),
+          packageInfo,
+        }).source;
       }
 
       const { source, watchFiles } = await compile({

packages/webpack-plugin/src/index.ts

@@ -1,4 +1,8 @@
-import { cssFileFilter, IdentifierOption } from '@vanilla-extract/integration';
+import {
+  cssFileFilter,
+  IdentifierOption,
+  getPackageInfo,
+} from '@vanilla-extract/integration';
 import path from 'path';
 import type { Compiler, RuleSetRule } from 'webpack';
 import chalk from 'chalk';
@@ -149,6 +153,7 @@ export class VanillaExtractPlugin {
             outputCss: this.outputCss,
             childCompiler: this.childCompiler,
             identifiers: this.identifiers,
+            packageInfo: getPackageInfo(compiler.context),
           },
         },
       ],