fix: proper handling of custom postcss config for build

fix #354
vitejs · Jun 5, 2020 · 5b1e25d · 5b1e25d
1 parent a383ec3
commit 5b1e25d
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"