feat: add support for locally scoped css (#2)

lib/index.js

@@ -7,7 +7,6 @@ const CssHandler = require('./handlers/css-handler')
 
 const MANDATORY_BLACKLIST = [
   /^webpack\/bootstrap/,
-  '/css-loader/index.js',
   '/css-loader/lib/css-base.js',
   '/style-loader/addStyles.js',
 ]
@@ -34,20 +33,40 @@ class NukeCssPlugin {
       })
   }
 
-  static gatherSourceContent(options, assets) {
+  static determineJsContent(node) {
+    const source = node.source
+    const content = node.originalSource
+
+    if (source.includes('/css-loader/index.js') && !content.includes('removed by extract-text')) {
+      const indexOfLocals = content.indexOf('exports.locals')
+      return indexOfLocals >= 0 ? content.slice(indexOfLocals) : ''
+    } else {
+      return content
+    }
+  }
+
+  static gatherJsSourceContent(blacklist, asset) {
+    return asset.listMap({}).children
+      .map(node => {
+        if (!node.source) {
+          return false
+        } else if (blacklist.find(pattern => pattern.test(node.source))) {
+          return false
+        }
+
+        return {
+          type: 'js',
+          content: NukeCssPlugin.determineJsContent(node),
+        }
+      })
+      .filter(item => item && item.content)
+  }
+
+  static gatherAllSourceContent(options, assets) {
     const blacklist = NukeCssPlugin.getBlacklist(options)
     return _(assets)
       .filter(item => item.type === 'js')
-      .map(({asset, type}) => {
-        return asset.listMap({}).children
-          .filter(node => {
-            const doesNotMatch = pattern => !pattern.test(node.source)
-            return node.source && _.every(blacklist, doesNotMatch)
-          })
-          .map(node => {
-            return {type, content: node.originalSource}
-          })
-      })
+      .map(item => NukeCssPlugin.gatherJsSourceContent(blacklist, item.asset))
       .flatten()
       .concat(options.sources)
       .value()
@@ -59,7 +78,7 @@ class NukeCssPlugin {
       return {asset, name, type}
     })
 
-    const sourceContent = NukeCssPlugin.gatherSourceContent(this._options, assets)
+    const sourceContent = NukeCssPlugin.gatherAllSourceContent(this._options, assets)
     assets.forEach(({asset, name, type}) => {
       try {
         const handler = this._handlers[type]

test/fixtures/entry.css

@@ -28,3 +28,7 @@
 .fa-blacklisted {
   content: 'fa';
 }
+
+:local .my-local-class :global .fa-table {
+  content: 'locally scoped';
+}

test/fixtures/entry.extracted.css

@@ -44,3 +44,7 @@ a:hover {
 .html-ignored {
   color: white;
 }
+
+:local .my-other-local-class :global .fa-table {
+  content: 'locally scoped';
+}

test/fixtures/entry.js

@@ -1,10 +1,10 @@
 const data = require('./entry.css')
-require('./entry.extracted.css')
+const data2 = require('./entry.extracted.css')
 const myIcons = {
   'fa-address-book-o': true,
   'fa': true,
   'fa-save': true,
   'fa-table': true,
 }
 
-console.log(data, myIcons)
+console.log(data, data2, myIcons)

test/index.test.js

@@ -36,7 +36,7 @@ describe('NukeCssPlugin', () => {
   function findLineAndColumn(css, string) {
     const lines = css.split('\n')
     const line = lines.findIndex(l => l.includes(string)) + 1
-    if (line === -1) {
+    if (line === -1 || !lines[line - 1]) {
       throw new Error(`could not find string ${string}`)
     }
 
@@ -59,6 +59,11 @@ describe('NukeCssPlugin', () => {
     expect(fileStats['out.css'].content).to.not.contain('.my-favorite-class')
   })
 
+  it('should work with locally scoped', () => {
+    expect(fileStats['out.js'].content).to.contain('locally scoped')
+    expect(fileStats['out.css'].content).to.contain('locally scoped')
+  })
+
   it('should generate a source map', () => {
     expect(fileStats).to.have.property('out.css.map')