fix: work with style-loader

patrickhulce · Feb 20, 2017 · e7f8251 · e7f8251
1 parent dfd50b5
commit e7f8251
Showing 1 changed file with 51 additions and 41 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -3,7 +3,9 @@ const path = require('path')
 const _ = require('lodash')
 const esprima = require('esprima')
 const nukecss = require('nukecss')
-const ConcatSource = require('webpack-sources').ConcatSource
+const sources = require('webpack-sources')
+const ConcatSource = sources.ConcatSource
+const ReplaceSource = sources.ReplaceSource
 
 const CSS_LOADER_PATTERN = /exports\.push\(\[module\./
 
@@ -43,51 +45,59 @@ class NukeCssPlugin {
     ].join('')
   }
 
-  apply(compiler) {
-    compiler.plugin('this-compilation', compilation => {
-      compilation.plugin('additional-assets', done => {
-        const assets = _.map(compilation.assets, (asset, name) => {
-          const type = path.extname(name).replace(/\./g, '')
-          return {asset, name, type}
-        })
-
-        const sources = _(assets)
-          .filter(item => item.type === 'js' || item.type === 'html')
-          .map(({asset, type}) => {
-            if (type === 'js') {
-              return asset.listMap().children
-                .filter(node => node.source && !node.source.includes('css-loader'))
-                .map(node => {
-                  return {type, content: node.originalSource}
-                })
-            } else {
-              const content = asset.source()
-              return {type, content}
-            }
-          })
-          .flatten()
-          .value()
-
-        const replaceCss = css => nukecss(sources, css)
-        assets.forEach(({asset, name, type}) => {
-          if (type === 'css') {
-            const content = asset.source()
-            const nuked = replaceCss(content)
-            compilation.assets[name] = new ConcatSource(nuked)
-          } else if (type === 'js') {
-            asset.listMap().children.forEach(node => {
-              if (!NukeCssPlugin.isStyleNode(node)) {
-                return
-              }
+  onAdditionalAssets(compilation, done) {
+    const assets = _.map(compilation.assets, (asset, name) => {
+      const type = path.extname(name).replace(/\./g, '')
+      return {asset, name, type}
+    })
 
-              node.mapGeneratedCode(code => {
-                return NukeCssPlugin.replaceCss(code, replaceCss)
-              })
+    const sources = _(assets)
+      .filter(item => item.type === 'js' || item.type === 'html')
+      .map(({asset, type}) => {
+        if (type === 'js') {
+          return asset.listMap().children
+            .filter(node => node.source && !node.source.includes('css-loader'))
+            .map(node => {
+              return {type, content: node.originalSource}
             })
+        } else {
+          const content = asset.source()
+          return {type, content}
+        }
+      })
+      .flatten()
+      .value()
+
+    const replaceCss = css => nukecss(sources, css)
+    assets.forEach(({asset, name, type}) => {
+      if (type === 'css') {
+        const content = asset.source()
+        const nuked = replaceCss(content)
+        compilation.assets[name] = new ConcatSource(nuked)
+      } else if (type === 'js') {
+        const allCode = asset.source()
+        const replacementAsset = compilation.assets[name] = new ReplaceSource(asset)
+        asset.listMap().children.forEach(node => {
+          if (!NukeCssPlugin.isStyleNode(node)) {
+            return
           }
+
+          const code = node.generatedCode
+          const startIndex = allCode.indexOf(code)
+          const endIndex = startIndex + code.length
+          const replacement = NukeCssPlugin.replaceCss(code, replaceCss)
+          replacementAsset.replace(startIndex, endIndex, replacement)
         })
+      }
+    })
+
+    done()
+  }
 
-        done()
+  apply(compiler) {
+    compiler.plugin('this-compilation', compilation => {
+      compilation.plugin('additional-assets', done => {
+        this.onAdditionalAssets(compilation, done)
       })
     })
   }