feat: support whitelists and blacklists

Author: patrickhulce

lib/css-nuker.js

@@ -4,12 +4,22 @@ const ENABLE_COMMENT_REGEX = /\bnukecss:enable\b/
 const DISABLE_COMMENT_REGEX = /\bnukecss:disable\b/
 
 class CssNuker {
-  constructor(sources, parser) {
+  constructor(sources, parser, options = {}) {
+    this._options = options
     this._sources = sources
     this._parser = parser
 
     this._enabled = true
     this._usedTokens = new Set()
+    this._blacklistedTokens = new Set()
+
+    if (options.whitelist) {
+      options.whitelist.forEach(token => this._usedTokens.add(token))
+    }
+
+    if (options.blacklist) {
+      options.blacklist.forEach(token => this._blacklistedTokens.add(token))
+    }
   }
 
   nuke() {
@@ -43,6 +53,8 @@ class CssNuker {
     return _.every(tokens, token => {
       if (this._usedTokens.has(token)) {
         return true
+      } else if (this._blacklistedTokens.has(token)) {
+        return false
       }
 
       const found = _.find(this._sources, source => source.contains(token))

lib/plugin.js

@@ -9,7 +9,7 @@ function createPlugin(sources, opts) {
 
   return parsed => {
     const parser = new PostCssParser(parsed)
-    const nuker = new CssNuker(sources, parser)
+    const nuker = new CssNuker(sources, parser, opts)
     nuker.nuke()
   }
 }

test/nuke.test.js

@@ -7,6 +7,12 @@ describe('nuke.js', function () {
     const htmlContent = fs.readFileSync(path.join(__dirname, '/fixtures/content.html'), 'utf8')
     const cssContent = fs.readFileSync(path.join(__dirname, '/fixtures/content.css'), 'utf8')
 
+    it('should keep used rules', function () {
+      const result = nukecss(htmlContent, cssContent)
+      expect(result).to.contain('#something[title*=foo]:hover')
+      expect(result).to.contain('.something')
+    })
+
     it('should remove unused rules', function () {
       const result = nukecss(htmlContent, cssContent)
       expect(result).to.not.contain('foobar[something=x]')
@@ -24,6 +30,20 @@ describe('nuke.js', function () {
       expect(result).to.contain('.totally-unused')
     })
 
+    it('should respect the whitelist', function () {
+      const whitelist = ['foo-bar-3']
+      const result = nukecss(htmlContent, cssContent, {whitelist})
+      expect(result).to.contain('.foo-bar-3')
+    })
+
+    it('should respect the blacklist', function () {
+      const blacklist = ['something']
+      const extraHtml = '<div id="blacklist-test">test</div>'
+      const extraCss = '\n.something, #blacklist-test { color: white; }'
+      const result = nukecss([htmlContent, extraHtml], cssContent + extraCss, {blacklist})
+      expect(result).to.contain('#blacklist-test')
+    })
+
     it('should support multiple sources', function () {
       const result = nukecss([htmlContent, '<div id="foo-bar-3"></div>'], cssContent)
       expect(result).to.contain('.foo-bar-3')