feat: enable source map support

Author: patrickhulce

lib/index.js

@@ -6,7 +6,8 @@ const esprima = require('esprima')
 const nukecss = require('nukecss')
 const sources = require('webpack-sources')
 
-const ConcatSource = sources.ConcatSource
+const RawSource = sources.RawSource
+const SourceMapSource = sources.SourceMapSource
 const ReplaceSource = sources.ReplaceSource
 
 const CSS_LOADER_PATTERN = /exports\.push\(\[module\./
@@ -48,9 +49,23 @@ class NukeCssPlugin {
   }
 
   onCssAsset(compilation, name, asset, sources) {
-    const content = asset.source()
-    const nuked = nukecss(sources, content)
-    compilation.assets[name] = new ConcatSource(nuked)
+    const nukeCssOpts = {}
+    const input = asset.source()
+
+    let inputSourceMap
+    if (this._options.sourceMap) {
+      inputSourceMap = asset.map()
+      nukeCssOpts.sourceMap = {
+        from: name,
+        to: name,
+        inline: _.get(this._options, 'sourceMap.inline', false),
+      }
+    }
+
+    const nuked = nukecss(sources, input, nukeCssOpts)
+    compilation.assets[name] = this._options.sourceMap && nuked.map ?
+      new SourceMapSource(nuked.css, name, nuked.map, input, inputSourceMap) :
+      new RawSource(nuked.css || nuked)
   }
 
   onJsAsset(compilation, name, asset, sources) {

package.json

@@ -40,7 +40,7 @@
   "dependencies": {
     "esprima": "^3.1.3",
     "lodash": "^4.17.4",
-    "nukecss": "^1.0.0",
+    "nukecss": "^1.5.0",
     "webpack-sources": "^0.1.4"
   },
   "devDependencies": {
@@ -56,6 +56,7 @@
     "semantic-release": "^6.3.2",
     "sinon": "^1.17.7",
     "sinon-chai": "^2.8.0",
+    "source-map": "^0.5.6",
     "style-loader": "^0.13.1",
     "webpack": "^2.2.1",
     "xo": "github:patrickhulce/xo#master"

test/fixtures/entry.extracted.css

@@ -1,10 +1,18 @@
-/* thrown away */
+/* thrown away comment */
 @import "~bootstrap/dist/css/bootstrap.css";
 
 .fa {
   content: 'fa';
 }
 
+.my-favorite-class {
+  background: blue;
+}
+
+.fa-other {
+  content: 'foo';
+}
+
 .fa-address-book-o {
   content: 'fa';
 }
@@ -16,11 +24,3 @@
 .fa-table {
   content: 'fa';
 }
-
-.fa-other {
-  content: 'foo';
-}
-
-.my-favorite-class {
-  background: blue;
-}

test/fixtures/webpack.config.js

@@ -1,20 +1,23 @@
 const NukeCssPlugin = require('../../lib')
+const webpack = require('webpack')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 module.exports = {
+  devtool: 'source-map',
   entry: `${__dirname}/entry.js`,
   output: {filename: 'out.js', path: `${__dirname}/dist`},
   module: {
     rules: [
       {test: /\.(svg|eot|woff2?|ttf)/, use: 'file-loader'},
       {test: /\.extracted.css$/, use: ExtractTextPlugin.extract({
-        use: ['css-loader']
+        use: ['css-loader?sourceMap']
       }), include: __dirname},
       {test: /\.css$/, exclude: /.extracted.css/, use: ['style-loader', 'css-loader'], include: __dirname},
     ],
   },
   plugins: [
     new ExtractTextPlugin('out.css'),
-    new NukeCssPlugin(),
+    new NukeCssPlugin({sourceMap: true}),
+    new webpack.optimize.UglifyJsPlugin({sourceMap: true}),
   ]
 }

test/index.test.js

@@ -1,6 +1,7 @@
 const fs = require('fs')
 const _ = require('lodash')
 const webpack = require('webpack')
+const SourceMapConsumer = require('source-map').SourceMapConsumer
 
 describe('NukeCssPlugin', function () {
   let fileStats
@@ -14,7 +15,7 @@ describe('NukeCssPlugin', function () {
         return {
           filename,
           stats: fs.statSync(fullPath),
-          content: fs.readFileSync(fullPath, 'utf8'),
+          content: /\.(css|js)/.test(filename) && fs.readFileSync(fullPath, 'utf8'),
         }
       })
       .keyBy('filename')
@@ -32,6 +33,17 @@ describe('NukeCssPlugin', function () {
     })
   }
 
+  function findLineAndColumn(css, string) {
+    const lines = css.split('\n')
+    const line = lines.findIndex(l => l.includes(string)) + 1
+    if (line === -1) {
+      throw new Error(`could not find string ${string}`)
+    }
+
+    const column = lines[line - 1].indexOf(string) + 1
+    return {line, column}
+  }
+
   before(function (done) {
     this.timeout(10000)
     testWithConfig(baseConfig, done)
@@ -46,4 +58,15 @@ describe('NukeCssPlugin', function () {
     expect(fileStats['out.css'].content).to.contain('.fa-address-book-o')
     expect(fileStats['out.css'].content).to.not.contain('.my-favorite-class')
   })
+
+  it('should generate a source map', function () {
+    expect(fileStats).to.have.property('out.css.map')
+
+    const newContent = fileStats['out.css'].content
+    const newLocation = findLineAndColumn(newContent, '.fa-table {')
+    const consumer = new SourceMapConsumer(fileStats['out.css.map'].content)
+    const oldLocation = consumer.originalPositionFor(newLocation)
+    expect(oldLocation).to.have.property('source').that.include('entry.extracted.css')
+    expect(oldLocation).to.have.property('line', 24)
+  })
 })

yarn.lock

@@ -923,12 +923,18 @@ dateformat@^1.0.11:
     get-stdin "^4.0.1"
     meow "^3.3.0"
 
-debug@2, debug@2.2.0, debug@^2.1.1, debug@^2.2.0, debug@~2.2.0:
+debug@2, debug@2.2.0, debug@^2.2.0, debug@~2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
   dependencies:
     ms "0.7.1"
 
+debug@^2.1.1, debug@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.1.tgz#79855090ba2c4e3115cc7d8769491d58f0491351"
+  dependencies:
+    ms "0.7.2"
+
 decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -1670,7 +1676,7 @@ glob-parent@^2.0.0:
   dependencies:
     is-glob "^2.0.0"
 
-glob@7.0.5, glob@^7.0.0, glob@^7.0.3, glob@^7.0.5:
+glob@7.0.5, glob@^7.0.5:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.5.tgz#b4202a69099bbb4d292a7c1b95b6682b67ebdc95"
   dependencies:
@@ -1691,6 +1697,17 @@ glob@^5.0.15:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.0.0, glob@^7.0.3, glob@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.2"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 globals@^9.14.0:
   version "9.16.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.16.0.tgz#63e903658171ec2d9f51b1d31de5e2b8dc01fb80"
@@ -2588,6 +2605,10 @@ ms@0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
 
+ms@0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
+
 multimatch@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-2.1.0.tgz#9c7906a22fb4c02919e2f5f75161b4cdbd4b2a2b"
@@ -2774,12 +2795,16 @@ npmlog@^1.2.1:
     are-we-there-yet "~1.0.0"
     gauge "~1.2.0"
 
-nukecss@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/nukecss/-/nukecss-1.0.0.tgz#80b16bd28d1b5b7e41b1232f78e462381497badf"
+nukecss@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/nukecss/-/nukecss-1.5.0.tgz#4957804f28dda2dbc173ea14fcf8601249224eed"
   dependencies:
+    debug "^2.6.1"
+    esprima "^3.1.3"
+    glob "^7.1.1"
     gonzales-pe "^4.0.3"
     lodash "^4.17.4"
+    postcss "^5.2.15"
 
 num2fraction@^1.2.2:
   version "1.2.2"
@@ -3276,6 +3301,15 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
+postcss@^5.2.15:
+  version "5.2.15"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.15.tgz#a9e8685e50e06cc5b3fdea5297273246c26f5b30"
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"