feat: use cssnano build css + ignore css comment in build

fix vitejs#426
rolldown · Jun 23, 2020 · 18d28d9 · 18d28d9
1 parent 3de010f
commit 18d28d9
Show file tree

Hide file tree

Showing 6 changed files with 773 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "chalk": "^4.0.0",
     "chokidar": "^3.3.1",
     "clean-css": "^4.2.3",
+    "cssnano": "^4.1.10",
     "debug": "^4.1.1",
     "dotenv": "^8.2.0",
     "dotenv-expand": "^5.1.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)
@@ -74,7 +75,7 @@ export async function compileCss(
   const {
     options: postcssOptions,
     plugins: postcssPlugins
-  } = await resolvePostcssOptions(root)
+  } = await resolvePostcssOptions(root, isBuild)
 
   const res = await compileStyleAsync({
     source,
@@ -156,11 +157,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('cssnano')({ preset: 'default' }))
+  }
   return {
     options,
     plugins