From 5b1e25d710a6f7e56d4d364a78c332ce7840cb63 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 5 Jun 2020 16:20:08 -0400
Subject: [PATCH] fix: proper handling of custom postcss config for build

fix #354
---
 package.json                     |  2 +-
 src/node/build/buildPluginCss.ts | 29 +++++++++++++++++------------
 src/node/build/index.ts          |  7 +++++++
 src/node/utils/cssUtils.ts       | 22 +++++++++++++++++-----
 yarn.lock                        |  8 ++++----
 5 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 692f7795698a84..c6769e69d1d767 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
     "rollup": "^2.11.2",
     "rollup-plugin-dynamic-import-variables": "^1.0.1",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-vue": "^6.0.0-beta.5",
+    "rollup-plugin-vue": "^6.0.0-beta.6",
     "selfsigned": "^1.10.7",
     "slash": "^3.0.0",
     "vue": "^3.0.0-beta.14",
diff --git a/src/node/build/buildPluginCss.ts b/src/node/build/buildPluginCss.ts
index 1fe8b2e0a2dade..af75dc1b9ec72e 100644
--- a/src/node/build/buildPluginCss.ts
+++ b/src/node/build/buildPluginCss.ts
@@ -46,18 +46,23 @@ export const createBuildCssPlugin = ({
     name: 'vite:css',
     async transform(css: string, id: string) {
       if (id.endsWith('.css') || cssPreprocessLangRE.test(id)) {
-        const result = await compileCss(root, id, {
-          id: '',
-          source: css,
-          filename: id,
-          scoped: false,
-          modules: id.endsWith('.module.css'),
-          preprocessLang: id.replace(
-            cssPreprocessLangRE,
-            '$2'
-          ) as SFCAsyncStyleCompileOptions['preprocessLang'],
-          preprocessOptions
-        })
+        // if this is a Vue SFC style request, it's already processed by
+        // rollup-plugin-vue and we just need to rewrite URLs + collect it
+        const isVueStyle = /\?vue&type=style/.test(id)
+        const result = isVueStyle
+          ? css
+          : await compileCss(root, id, {
+              id: '',
+              source: css,
+              filename: id,
+              scoped: false,
+              modules: id.endsWith('.module.css'),
+              preprocessLang: id.replace(
+                cssPreprocessLangRE,
+                '$2'
+              ) as SFCAsyncStyleCompileOptions['preprocessLang'],
+              preprocessOptions
+            })
 
         let modules: SFCStyleCompileResults['modules']
         if (typeof result === 'string') {
diff --git a/src/node/build/index.ts b/src/node/build/index.ts
index d19d2b767d0db1..49923a0adeb8fe 100644
--- a/src/node/build/index.ts
+++ b/src/node/build/index.ts
@@ -26,6 +26,7 @@ import { stopService } from '../esbuildService'
 import { BuildConfig } from '../config'
 import { createBuildJsTransformPlugin } from '../transform'
 import hash_sum from 'hash-sum'
+import { resolvePostcssOptions } from '../utils/cssUtils'
 
 export interface BuildResult {
   html: string
@@ -95,6 +96,10 @@ export async function createBaseRollupPlugins(
   } = options
   const { nodeResolve } = require('@rollup/plugin-node-resolve')
   const dynamicImport = require('rollup-plugin-dynamic-import-variables')
+  const {
+    options: postcssOptions,
+    plugins: postcssPlugins
+  } = await resolvePostcssOptions(root)
 
   return [
     // user plugins
@@ -109,6 +114,8 @@ export async function createBaseRollupPlugins(
       transformAssetUrls: {
         includeAbsolute: true
       },
+      postcssOptions,
+      postcssPlugins,
       preprocessStyles: true,
       preprocessOptions: {
         includePaths: ['node_modules'],
diff --git a/src/node/utils/cssUtils.ts b/src/node/utils/cssUtils.ts
index d3c7e95b727ffb..9eb00242dc2fdc 100644
--- a/src/node/utils/cssUtils.ts
+++ b/src/node/utils/cssUtils.ts
@@ -12,7 +12,7 @@ import {
 import { hmrClientPublicPath } from '../server/serverPluginHmr'
 
 export const urlRE = /(url\(\s*['"]?)([^"')]+)(["']?\s*\))/
-export const cssPreprocessLangRE = /(.+).(less|sass|scss|styl|stylus)$/
+export const cssPreprocessLangRE = /(.+).(less|sass|scss|styl|stylus|postcss)$/
 
 type Replacer = (url: string) => string | Promise<string>
 
@@ -55,7 +55,7 @@ export async function compileCss(
   }: SFCAsyncStyleCompileOptions
 ): Promise<SFCStyleCompileResults | string> {
   const id = hash_sum(publicPath)
-  let postcssConfig = await loadPostcssConfig(root)
+  const postcssConfig = await loadPostcssConfig(root)
   const { compileStyleAsync } = resolveCompiler(root)
 
   if (
@@ -68,9 +68,10 @@ export async function compileCss(
     return source
   }
 
-  const postcssOptions = postcssConfig && postcssConfig.options
-  const postcssPlugins = postcssConfig ? postcssConfig.plugins : []
-  postcssPlugins.unshift(require('postcss-import')())
+  const {
+    options: postcssOptions,
+    plugins: postcssPlugins
+  } = await resolvePostcssOptions(root)
 
   const res = await compileStyleAsync({
     source,
@@ -152,6 +153,17 @@ async function loadPostcssConfig(
   }
 }
 
+export async function resolvePostcssOptions(root: string) {
+  const config = await loadPostcssConfig(root)
+  const options = config && config.options
+  const plugins = config ? config.plugins : []
+  plugins.unshift(require('postcss-import')())
+  return {
+    options,
+    plugins
+  }
+}
+
 export const cssImportMap = new Map<
   string /*filePath*/,
   Set<string /*filePath*/>
diff --git a/yarn.lock b/yarn.lock
index 0b8e7ef707e3c1..6664581f83e3bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5895,10 +5895,10 @@ rollup-plugin-terser@^5.3.0:
     serialize-javascript "^2.1.2"
     terser "^4.6.2"
 
-rollup-plugin-vue@^6.0.0-beta.5:
-  version "6.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0-beta.5.tgz#d551382d727bb96c77cc84113d53647f0409aaa6"
-  integrity sha512-WMcHnavgxB/5q8uYp5omlQeui23ICPzANQR/E2zyAXolsFNjY9S0icVPMy3fC0yiPvpKM065JouH76TgH6yj8g==
+rollup-plugin-vue@^6.0.0-beta.6:
+  version "6.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0-beta.6.tgz#e77dc9cdec9e53778f086259a89fbff36f391ddf"
+  integrity sha512-APbkp9EDk0Vj5PpZNaa11yyNhr/Uy8OkrzpkajxUvONU+S7+qqOSVlaNTcsxiT198dOC6TM0iJK5ChDgEVecTA==
   dependencies:
     debug "^4.1.1"
     hash-sum "^2.0.0"