Add postcss support to vite-plugin (#517)

Author: Ben Jervis

.changeset/curly-needles-love.md

@@ -0,0 +1,9 @@
+---
+'@vanilla-extract/vite-plugin': minor
+---
+
+Add postcss processing to the plugin
+
+Vite supports postcss processing as a built in feature, but that's lost in dev mode with vanilla-extract because there are no actual css files for vite to pick up.
+
+The vite plugin now manually runs postcss over the generated css in serve mode, if any postcss config was found.

.changeset/light-bobcats-destroy.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/integration': major
+---
+
+processVanillaFile is now async

packages/esbuild-plugin/src/index.ts

@@ -63,7 +63,7 @@ export function vanillaExtractPlugin({
           cwd: build.initialOptions.absWorkingDir,
         });
 
-        const contents = processVanillaFile({
+        const contents = await processVanillaFile({
           source,
           filePath: path,
           outputCss,

packages/integration/src/processVanillaFile.ts

@@ -37,9 +37,9 @@ interface ProcessVanillaFileOptions {
     base64Source: string;
     fileScope: FileScope;
     source: string;
-  }) => string;
+  }) => string | Promise<string>;
 }
-export function processVanillaFile({
+export async function processVanillaFile({
   source,
   filePath,
   outputCss = true,
@@ -116,14 +116,24 @@ export function processVanillaFile({
         : fileScope.filePath
     }.vanilla.css`;
 
-    const virtualCssFilePath = serializeVirtualCssPath
-      ? serializeVirtualCssPath({
-          fileName,
-          base64Source,
-          fileScope,
-          source: css,
-        })
-      : `import '${fileName}?source=${base64Source}';`;
+    let virtualCssFilePath: string;
+
+    if (serializeVirtualCssPath) {
+      const serializedResult = serializeVirtualCssPath({
+        fileName,
+        base64Source,
+        fileScope,
+        source: css,
+      });
+
+      if (typeof serializedResult === 'string') {
+        virtualCssFilePath = serializedResult;
+      } else {
+        virtualCssFilePath = await serializedResult;
+      }
+    } else {
+      virtualCssFilePath = `import '${fileName}?source=${base64Source}';`;
+    }
 
     cssImports.push(virtualCssFilePath);
   }

packages/vite-plugin/package.json

@@ -16,7 +16,9 @@
   "license": "MIT",
   "dependencies": {
     "@vanilla-extract/integration": "^1.4.3",
-    "outdent": "^0.8.0"
+    "outdent": "^0.8.0",
+    "postcss": "^8.3.6",
+    "postcss-load-config": "^3.1.0"
   },
   "devDependencies": {
     "vite": "^2.6.0"

packages/vite-plugin/src/index.ts

@@ -12,6 +12,7 @@ import {
   stringifyFileScope,
   parseFileScope,
 } from '@vanilla-extract/integration';
+import { PostCSSConfigResult, resolvePostcssConfig } from './postcss';
 
 const styleUpdateEvent = (fileId: string) =>
   `vanilla-extract-style-update:${fileId}`;
@@ -25,6 +26,7 @@ export function vanillaExtractPlugin({ identifiers }: Options = {}): Plugin {
   let config: ResolvedConfig;
   let packageInfo: ReturnType<typeof getPackageInfo>;
   let server: ViteDevServer;
+  let postCssConfig: PostCSSConfigResult | null;
   const cssMap = new Map<string, string>();
 
   let virtualExt: string;
@@ -50,9 +52,13 @@ export function vanillaExtractPlugin({ identifiers }: Options = {}): Plugin {
         },
       };
     },
-    configResolved(resolvedConfig) {
+    async configResolved(resolvedConfig) {
       config = resolvedConfig;
 
+      if (config.command === 'serve') {
+        postCssConfig = await resolvePostcssConfig(config);
+      }
+
       virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
 
       packageInfo = getPackageInfo(config.root);
@@ -133,10 +139,24 @@ export function vanillaExtractPlugin({ identifiers }: Options = {}): Plugin {
         filePath: validId,
         identOption:
           identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
-        serializeVirtualCssPath: ({ fileScope, source }) => {
+        serializeVirtualCssPath: async ({ fileScope, source }) => {
           const fileId = stringifyFileScope(fileScope);
           const id = `${virtualPrefix}${fileId}${virtualExt}`;
 
+          let cssSource = source;
+
+          if (postCssConfig) {
+            const postCssResult = await (await import('postcss'))
+              .default(postCssConfig.plugins)
+              .process(source, {
+                ...postCssConfig.options,
+                from: undefined,
+                map: false,
+              });
+
+            cssSource = postCssResult.css;
+          }
+
           if (server && cssMap.has(fileId) && cssMap.get(fileId) !== source) {
             const { moduleGraph } = server;
             const module = moduleGraph.getModuleById(id);
@@ -148,11 +168,11 @@ export function vanillaExtractPlugin({ identifiers }: Options = {}): Plugin {
             server.ws.send({
               type: 'custom',
               event: styleUpdateEvent(fileId),
-              data: source,
+              data: cssSource,
             });
           }
 
-          cssMap.set(fileId, source);
+          cssMap.set(fileId, cssSource);
 
           return `import "${id}";`;
         },

packages/vite-plugin/src/postcss.ts

@@ -0,0 +1,47 @@
+import type { ResolvedConfig } from 'vite';
+import type { ProcessOptions, Plugin } from 'postcss';
+
+export interface PostCSSConfigResult {
+  options: ProcessOptions;
+  plugins: Plugin[];
+}
+
+// Mostly copied from vite's implementation
+// https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
+export const resolvePostcssConfig = async (
+  config: ResolvedConfig,
+): Promise<PostCSSConfigResult | null> => {
+  // inline postcss config via vite config
+  const inlineOptions = config.css?.postcss;
+  const inlineOptionsIsString = typeof inlineOptions === 'string';
+
+  if (inlineOptions && !inlineOptionsIsString) {
+    const options = { ...inlineOptions };
+
+    delete options.plugins;
+    return {
+      options,
+      plugins: inlineOptions.plugins || [],
+    };
+  } else {
+    try {
+      const searchPath =
+        typeof inlineOptions === 'string' ? inlineOptions : config.root;
+
+      const postCssConfig = await (
+        await import('postcss-load-config')
+      ).default({}, searchPath);
+
+      return {
+        options: postCssConfig.options,
+        // @ts-expect-error - The postcssrc options don't agree with real postcss, but it should be ok
+        plugins: postCssConfig.plugins,
+      };
+    } catch (e: any) {
+      if (!/No PostCSS Config found/.test(e.message)) {
+        throw e;
+      }
+      return null;
+    }
+  }
+};

packages/webpack-plugin/src/loader.ts

@@ -65,8 +65,8 @@ export function pitch(this: LoaderContext) {
 
   childCompiler
     .getCompiledSource(this)
-    .then(({ source }) => {
-      const result = processVanillaFile({
+    .then(async ({ source }) => {
+      const result = await processVanillaFile({
         source,
         outputCss,
         filePath: this.resourcePath,