feat: support postcss config in js css imports as well

src/node/config.ts

@@ -0,0 +1,16 @@
+import postcssrc from 'postcss-load-config'
+
+// postcss-load-config doesn't expose Result type
+type Result = ReturnType<typeof postcssrc> extends Promise<infer T> ? T : never
+
+let cachedPostcssConfig: Result | null | undefined
+
+export async function loadPostcssConfig(root: string): Promise<Result | null> {
+  try {
+    return (
+      cachedPostcssConfig || (cachedPostcssConfig = await postcssrc({}, root))
+    )
+  } catch (e) {
+    return (cachedPostcssConfig = null)
+  }
+}

src/node/serverPluginCss.ts

@@ -1,29 +1,50 @@
 import { Plugin } from './server'
-import { isImportRequest } from './utils'
+import { isImportRequest, readBody } from './utils'
 import { hmrClientId } from './serverPluginHmr'
 import hash_sum from 'hash-sum'
+import { loadPostcssConfig } from './config'
 
-export const cssPlugin: Plugin = ({ app, watcher, resolver }) => {
+export const cssPlugin: Plugin = ({ root, app, watcher, resolver }) => {
   app.use(async (ctx, next) => {
     await next()
     // handle .css imports
-    // we rewrite it to JS that injects a <style> tag pointing to the same url
-    // but with a `?raw` query which returns the actual css
     if (
       ctx.path.endsWith('.css') &&
-      isImportRequest(ctx) &&
       // note ctx.body could be null if upstream set status to 304
-      ctx.body &&
-      // skip raw requests
-      !ctx.query.raw
+      ctx.body
     ) {
-      ctx.type = 'js'
-      const id = JSON.stringify(hash_sum(ctx.path))
-      const rawPath = JSON.stringify(ctx.path + '?raw')
-      ctx.body = `
-import { updateStyle } from "${hmrClientId}"\n
-updateStyle(${id}, ${rawPath})
-`.trim()
+      if (
+        isImportRequest(ctx) &&
+        // skip raw requests
+        !ctx.query.raw
+      ) {
+        // we rewrite it to JS that injects a <style> tag pointing to the same url
+        // but with a `?raw` query which returns the actual css
+        ctx.type = 'js'
+        const id = JSON.stringify(hash_sum(ctx.path))
+        const rawPath = JSON.stringify(ctx.path + '?raw')
+        ctx.body = `
+  import { updateStyle } from "${hmrClientId}"\n
+  updateStyle(${id}, ${rawPath})
+  `.trim()
+      } else {
+        // plain css request, apply postcss transform
+        const postcssConfig = await loadPostcssConfig(root)
+        if (postcssConfig) {
+          const css = await readBody(ctx.body)
+          try {
+            const result = await require('postcss')(
+              postcssConfig.plugins
+            ).process(css, {
+              from: resolver.requestToFile(ctx.path),
+              ...postcssConfig.options
+            })
+            ctx.body = result.css
+          } catch (e) {
+            console.error(`[vite] error applying postcss transforms: `, e)
+          }
+        }
+      }
     }
   })
 

src/node/serverPluginVue.ts

@@ -12,8 +12,9 @@ import LRUCache from 'lru-cache'
 import { hmrClientId } from './serverPluginHmr'
 import resolve from 'resolve-from'
 import { cachedRead } from './utils'
+import { loadPostcssConfig } from './config'
 import { Context } from 'koa'
-import postcssrc from 'postcss-load-config'
+
 const debug = require('debug')('vite:sfc')
 const getEtag = require('etag')
 
@@ -245,6 +246,8 @@ async function compileSFCStyle(
   }
 
   const id = hash_sum(publicPath)
+  const postcssConfig = await loadPostcssConfig(root)
+
   const result = await resolveCompiler(root).compileStyleAsync({
     source: style.content,
     filename: filePath,
@@ -253,7 +256,12 @@ async function compileSFCStyle(
     modules: style.module != null,
     preprocessLang: style.lang as any,
     preprocessCustomRequire: (id: string) => require(resolve(root, id)),
-    ...loadPostCssConfig(root)
+    ...(postcssConfig
+      ? {
+          postcssOptions: postcssConfig.options,
+          postcssPlugins: postcssConfig.plugins
+        }
+      : {})
   })
 
   if (result.errors.length) {
@@ -268,11 +276,3 @@ async function compileSFCStyle(
   vueCache.set(filePath, cached)
   return result
 }
-
-function loadPostCssConfig(root: string) {
-  const config = postcssrc.sync({}, root)
-  return {
-    postcssOptions: config.options,
-    postcssPlugins: config.plugins
-  }
-}