fix: ignore css comment in build (#432)

fix #426
vitejs · Jun 23, 2020 · 98ff7a1 · 98ff7a1
1 parent beee018
commit 98ff7a1
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -87,6 +87,7 @@
     "open": "^7.0.3",
     "ora": "^4.0.4",
     "postcss": "^7.0.28",
+    "postcss-discard-comments": "^4.0.2",
     "postcss-import": "^12.0.1",
     "postcss-load-config": "^2.1.0",
     "postcss-modules": "^2.0.0",

diff --git a/playground/css/testPostCss.css b/playground/css/testPostCss.css
@@ -4,3 +4,7 @@ body {
     color: red;
   }
 }
+/* @font-face {
+    font-family: 'abcde';
+    src: url('./assets/fonts/abc.ttf') format('truetype');
+} */
diff --git a/src/node/build/buildPluginCss.ts b/src/node/build/buildPluginCss.ts
@@ -52,18 +52,23 @@ export const createBuildCssPlugin = ({
         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
-            })
+          : 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
+              },
+              true
+            )
 
         let modules: SFCStyleCompileResults['modules']
         if (typeof result === 'string') {

diff --git a/src/node/build/index.ts b/src/node/build/index.ts
@@ -100,7 +100,7 @@ export async function createBaseRollupPlugins(
   const {
     options: postcssOptions,
     plugins: postcssPlugins
-  } = await resolvePostcssOptions(root)
+  } = await resolvePostcssOptions(root, true)
 
   return [
     // user plugins

diff --git a/src/node/utils/cssUtils.ts b/src/node/utils/cssUtils.ts
@@ -55,7 +55,8 @@ export async function compileCss(
     modules,
     preprocessLang,
     preprocessOptions = {}
-  }: SFCAsyncStyleCompileOptions
+  }: SFCAsyncStyleCompileOptions,
+  isBuild: boolean = false
 ): Promise<SFCStyleCompileResults | string> {
   const id = hash_sum(publicPath)
   const postcssConfig = await loadPostcssConfig(root)
@@ -65,6 +66,7 @@ export async function compileCss(
     publicPath.endsWith('.css') &&
     !modules &&
     !postcssConfig &&
+    !isBuild &&
     !source.includes('@import')
   ) {
     // no need to invoke compile for plain css if no postcss config is present
@@ -74,7 +76,7 @@ export async function compileCss(
   const {
     options: postcssOptions,
     plugins: postcssPlugins
-  } = await resolvePostcssOptions(root)
+  } = await resolvePostcssOptions(root, isBuild)
 
   const res = await compileStyleAsync({
     source,
@@ -156,11 +158,14 @@ async function loadPostcssConfig(
   }
 }
 
-export async function resolvePostcssOptions(root: string) {
+export async function resolvePostcssOptions(root: string, isBuild: boolean) {
   const config = await loadPostcssConfig(root)
   const options = config && config.options
   const plugins = config ? config.plugins : []
   plugins.unshift(require('postcss-import')())
+  if (isBuild) {
+    plugins.push(require('postcss-discard-comments')({ removeAll: true }))
+  }
   return {
     options,
     plugins

diff --git a/yarn.lock b/yarn.lock
@@ -5214,6 +5214,13 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-discard-comments@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
+  integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==
+  dependencies:
+    postcss "^7.0.0"
+
 postcss-import@^12.0.1:
   version "12.0.1"
   resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153"