perform minimize after extract is finished (#153)

kendrickw · egoist · commit 20aeab466849 · 2019-01-23T02:43:42.000+08:00
* perform minimize after extract is finished * Allow boolean plugins support (#142) Allow boolean plugins similar to how Rollup plugins work. In the Rollup plugins array you may write the following to only run a plugin for production usage: ```js plugins: [ (process.env.NODE_ENV === 'production' && terser()) ] ``` This pull request allow the same approach for PostCSS plugins: ```js plugins: [ (process.env.NODE_ENV === 'production' && cssnano()) ] ``` [Example of how Rollup has implemented this feature.](https://github.com/rollup/rollup/blob/f58d1e60a3da4b8470e5d56aa0caef2ecadec2b8/src/rollup/index.ts#L107) * perform minimize after extract is finished * tweaks
diff --git a/src/index.js b/src/index.js
@@ -16,7 +16,9 @@ function inferOption(option, defaultValue) {
 
 export default (options = {}) => {
   const filter = createFilter(options.include, options.exclude)
-  const postcssPlugins = Array.isArray(options.plugins) ? options.plugins.filter(Boolean) : options.plugins
+  const postcssPlugins = Array.isArray(options.plugins) ?
+    options.plugins.filter(Boolean) :
+    options.plugins
   const sourceMap = options.sourceMap
   const postcssLoaderOptions = {
     /** Inject CSS as `<style>` to `<head>` */
@@ -99,9 +101,9 @@ export default (options = {}) => {
         const { modules } = bundle[path.relative(dir, opts.file)]
         if (modules) {
           const fileList = Object.keys(modules)
-          entries.sort((a, b) => (
-            fileList.indexOf(a.id) - fileList.indexOf(b.id)
-          ))
+          entries.sort(
+            (a, b) => fileList.indexOf(a.id) - fileList.indexOf(b.id)
+          )
         }
         for (const res of entries) {
           const relative = path.relative(dir, res.id)
@@ -137,7 +139,25 @@ export default (options = {}) => {
         }
       }
 
-      const { code, codeFileName, map, mapFileName } = getExtracted()
+      let { code, codeFileName, map, mapFileName } = getExtracted()
+      // Perform cssnano on the extracted file
+      if (options.minimize) {
+        const cssOpts = postcssLoaderOptions.minimize
+        if (sourceMap === 'inline') {
+          cssOpts.map = { inline: true }
+        } else if (sourceMap === true && map) {
+          cssOpts.map = { prev: map }
+          cssOpts.to = codeFileName
+        }
+
+        const result = await require('cssnano').process(code, cssOpts)
+        code = result.css
+
+        if (sourceMap === true && result.map && result.map.toString) {
+          map = result.map.toString()
+        }
+      }
+
       const codeFile = {
         fileName: codeFileName,
         isAsset: true,
diff --git a/src/postcss-loader.js b/src/postcss-loader.js
@@ -93,7 +93,8 @@ export default {
       )
     }
 
-    if (options.minimize) {
+    // If shouldExtract, minimize is done after all CSS are extracted to a file
+    if (!shouldExtract && options.minimize) {
       plugins.push(require('cssnano')(options.minimize))
     }
 
diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -368,14 +368,7 @@ console.log(css, css$1);
 "
 `;
 
-exports[`minimize extract: css code 1`] = `
-"body{color:red}
-.bar{color:red}
-body{color:red;background:red}
-#sidebar{width:30%;background-color:#faa}
-#header{color:#6c94be}
-.pcss{color:red}"
-`;
+exports[`minimize extract: css code 1`] = `".bar,body{color:red}body{background:red}#sidebar{width:30%;background-color:#faa}#header{color:#6c94be}.pcss{color:red}"`;
 
 exports[`minimize extract: js code 1`] = `
 "'use strict';
@@ -384,6 +377,32 @@ console.log(undefined, undefined);
 "
 `;
 
+exports[`minimize extract-sourcemap-inline: css code 1`] = `
+".bar,body{color:red}body{background:red}#sidebar{width:30%;background-color:#faa}#header{color:#6c94be}.pcss{color:red}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxpbnB1dCBjc3MgMj4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUUEsVUFIRSxTQU1GLENBSEEsS0FFRSxjQUNGLENBRUEsU0FDRSxTQUFVLENBQ1YscUJBQXdCLENBRzFCLFFBQ0UsYUFDRixDQUVBLE1BQ0UsU0FDRiIsImZpbGUiOiJ0by5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJib2R5IHtcbiAgY29sb3I6IHJlZDtcbn1cblxuLmJhciB7XG4gIGNvbG9yOiByZWQ7XG59XG5cbmJvZHkge1xuICBjb2xvcjogI2YwMDtcbiAgYmFja2dyb3VuZDogI2YwMDtcbn1cbi8qIyBzb3VyY2VNYXBwaW5nVVJMPXRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLmNzcy5tYXAgKi9cbiNzaWRlYmFyIHtcbiAgd2lkdGg6IDMwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZhYTsgfVxuXG4vKiMgc291cmNlTWFwcGluZ1VSTD0uLi8uLi8uLi9pbmxpbmUgKi9cbiNoZWFkZXIge1xuICBjb2xvcjogIzZjOTRiZTtcbn1cblxuLnBjc3Mge1xuICBjb2xvcjogcmVkO1xufVxuXG4vKiMgc291cmNlTWFwcGluZ1VSTD1kYXRhOmFwcGxpY2F0aW9uL2pzb247YmFzZTY0LGV5SjJaWEp6YVc5dUlqb3pMQ0p6YjNWeVkyVnpJanBiSW1admJ5NWpjM01pTENKaVlYSXVZM056SWl3aWRHVnpkQzltYVhoMGRYSmxjeTl6YVcxd2JHVXZjM1I1YkdVdWMzUjViQ0lzSW5OMGVXeGxMbk4wZVd3aUxDSjBaWE4wTDJacGVIUjFjbVZ6TDNOcGJYQnNaUzl6ZEhsc1pTNXpZWE56SWl3aWMzUjViR1V1YzJGemN5SXNJblJsYzNRdlptbDRkSFZ5WlhNdmMybHRjR3hsTDNOMGVXeGxMbXhsYzNNaUxDSnpkSGxzWlM1c1pYTnpJaXdpYzNSNWJHVXVjR056Y3lKZExDSnVZVzFsY3lJNlcxMHNJbTFoY0hCcGJtZHpJam9pUVVGQlFUdEZRVU5GTEZkQlFWYzdRMEZEV2pzN1FVTkdSRHRGUVVORkxGZEJRVmM3UTBGRFdqczdRVU5HUkR0RlFVTkZMRmxCUVVFN1JVRkRRU3hwUWtGQlFUdERRME5FTzBGQlEwUXNNRVJCUVRCRU8wRkRTakZFTzBWQlEwVXNWMEZCVlR0RlFVTldMSFZDUVVGelFpeEZRVUZIT3p0QlEwVXpRaXgxUTBGQmRVTTdRVU5FZGtNN1JVRkRSU3hsUVVGQk8wTkRSa1E3TzBGRFJrUTdSVUZEUlN4WFFVRlhPME5CUTFvaUxDSm1hV3hsSWpvaVluVnVaR3hsTG1OemN5SXNJbk52ZFhKalpYTkRiMjUwWlc1MElqcGJJbUp2WkhrZ2UxeHVJQ0JqYjJ4dmNqb2djbVZrTzF4dWZWeHVJaXdpTG1KaGNpQjdYRzRnSUdOdmJHOXlPaUJ5WldRN1hHNTlYRzRpTEc1MWJHd3NiblZzYkN4dWRXeHNMRzUxYkd3c2JuVnNiQ3h1ZFd4c0xDSXVjR056Y3lCN1hHNGdJR052Ykc5eU9pQnlaV1E3WEc1OVhHNGlYWDA9Ki8iXX0= */"
+`;
+
+exports[`minimize extract-sourcemap-inline: js code 1`] = `
+"'use strict';
+
+console.log(undefined, undefined);
+"
+`;
+
+exports[`minimize extract-sourcemap-true: css code 1`] = `
+".bar,body{color:red}body{background:red}#sidebar{width:30%;background-color:#faa}#header{color:#6c94be}.pcss{color:red}
+/*# sourceMappingURL=bundle.css.map */"
+`;
+
+exports[`minimize extract-sourcemap-true: css map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"test/fixtures/simple/style.styl\\",\\"bar.css\\",\\"bundle.css\\",\\"style.sass\\",\\"test/fixtures/simple/style.less\\",\\"style.pcss\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,UCCE,SCUF,CFXA,KAEE,cESF,CCXA,SACE,SAAA,CACA,qBAAuB,CCCzB,QACE,aFeF,CGnBA,MACE,SHsBF\\",\\"file\\":\\"bundle.css\\",\\"sourcesContent\\":[null,\\".bar {\\\\n  color: red;\\\\n}\\\\n\\",\\"body {\\\\n  color: red;\\\\n}\\\\n\\\\n.bar {\\\\n  color: red;\\\\n}\\\\n\\\\nbody {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\n/*# sourceMappingURL=test/fixtures/simple/style.css.map */\\\\n#sidebar {\\\\n  width: 30%;\\\\n  background-color: #faa; }\\\\n\\\\n#header {\\\\n  color: #6c94be;\\\\n}\\\\n\\\\n.pcss {\\\\n  color: red;\\\\n}\\\\n\\\\n/*# sourceMappingURL=bundle.css.map */\\",\\"#sidebar {\\\\n  width: 30%;\\\\n  background-color: #faa; }\\\\n\\",null,\\".pcss {\\\\n  color: red;\\\\n}\\\\n\\"]}"`;
+
+exports[`minimize extract-sourcemap-true: js code 1`] = `
+"'use strict';
+
+console.log(undefined, undefined);
+"
+`;
+
 exports[`minimize inject: js code 1`] = `
 "'use strict';
 
diff --git a/test/index.test.js b/test/index.test.js
@@ -152,6 +152,24 @@ snapshotMany('minimize', [
       minimize: true,
       extract: true
     }
+  },
+  {
+    title: 'extract-sourcemap-true',
+    input: 'simple/index.js',
+    options: {
+      minimize: true,
+      extract: true,
+      sourceMap: true
+    }
+  },
+  {
+    title: 'extract-sourcemap-inline',
+    input: 'simple/index.js',
+    options: {
+      minimize: true,
+      extract: true,
+      sourceMap: 'inline'
+    }
   }
 ])
 
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -93,7 +93,8 @@ export default {`
`93`	`93`	`)`
`94`	`94`	`}`
`95`	`95`
`96`		`- if (options.minimize) {`
	`96`	`+ // If shouldExtract, minimize is done after all CSS are extracted to a file`
	`97`	`+ if (!shouldExtract && options.minimize) {`
`97`	`98`	`plugins.push(require('cssnano')(options.minimize))`
`98`	`99`	`}`
`99`	`100`