feat: parse javascript sources

Author: patrickhulce

lib/nuke.js

@@ -1,10 +1,15 @@
 const Source = require('./sources/source')
+const JsSource = require('./sources/js-source')
 const CssNuker = require('./css-nuker')
 
 function toSource(source) {
   if (typeof source === 'string') {
     return new Source(source)
   } else if (typeof source === 'object') {
+    if (source.type === 'js') {
+      return new JsSource(source.content)
+    }
+
     return new Source(source.content)
   } else {
     throw new Error(`invalid source: ${source}`)

lib/sources/js-source.js

@@ -0,0 +1,50 @@
+const esprima = require('esprima')
+const Source = require('./source')
+
+class JsSource extends Source {
+  constructor(text) {
+    super(text)
+
+    try {
+      const tokens = esprima.tokenize(text)
+        .filter(token => token.type === 'String')
+        .map(token => token.value.substr(1, token.value.length - 2))
+      this._tokensArray = tokens
+      this._tokens = new Set(tokens)
+    } catch (err) {
+      console.warn(err)
+    }
+  }
+
+  _findWholeSelectorInTokens(selector) {
+    return this._tokensArray.find(token => Source.textContains(token, selector))
+  }
+
+  _findSelectorPartsInTokens(selector) {
+    if (selector.length === 0) {
+      return true
+    }
+
+    for (let i = 1; i <= selector.length; i++) {
+      const part = selector.substr(0, i)
+      const rest = selector.substr(i)
+      if (this._tokens.has(part) && this._findSelectorPartsInTokens(rest)) {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  contains(selector) {
+    if (this._tokens) {
+      return Boolean(this._tokens.has(selector) ||
+        this._findWholeSelectorInTokens(selector) ||
+        this._findSelectorPartsInTokens(selector))
+    } else {
+      return Source.textContains(this._text, selector)
+    }
+  }
+}
+
+module.exports = JsSource

lib/sources/source.js

@@ -4,7 +4,11 @@ class Source {
   }
 
   contains(selector) {
-    return new RegExp(`\\b${selector}\\b`, 'i').test(this._text)
+    return Source.textContains(this._text, selector)
+  }
+
+  static textContains(text, selector) {
+    return new RegExp(`\\b${selector}\\b`, 'i').test(text)
   }
 }
 

package.json

@@ -40,6 +40,7 @@
     }
   },
   "dependencies": {
+    "esprima": "^3.1.3",
     "gonzales-pe": "^4.0.3",
     "lodash": "^4.17.4"
   },

test/nuke.test.js

@@ -1,30 +1,81 @@
 const fs = require('fs')
 const path = require('path')
-const nuke = require('../lib/nuke')
+const nukecss = require('../lib/nuke')
 
 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 remove unused rules', function () {
-    const result = nuke(htmlContent, cssContent)
-    expect(result).to.not.contain('foobar[something=x]')
-    expect(result).to.not.contain('.something3')
-    expect(result).to.not.contain('.foo-bar-3')
-  })
+  context('when content is basic', () => {
+    const htmlContent = fs.readFileSync(path.join(__dirname, '/fixtures/content.html'), 'utf8')
+    const cssContent = fs.readFileSync(path.join(__dirname, '/fixtures/content.css'), 'utf8')
 
-  it('should remove empty media sets', function () {
-    const result = nuke(htmlContent, cssContent)
-    expect(result).to.not.contain('@media')
-  })
+    it('should remove unused rules', function () {
+      const result = nukecss(htmlContent, cssContent)
+      expect(result).to.not.contain('foobar[something=x]')
+      expect(result).to.not.contain('.something3')
+      expect(result).to.not.contain('.foo-bar-3')
+    })
+
+    it('should remove empty media sets', function () {
+      const result = nukecss(htmlContent, cssContent)
+      expect(result).to.not.contain('@media')
+    })
 
-  it('should respect nukecss:* comments', function () {
-    const result = nuke(htmlContent, cssContent)
-    expect(result).to.contain('.totally-unused')
+    it('should respect nukecss:* comments', function () {
+      const result = nukecss(htmlContent, cssContent)
+      expect(result).to.contain('.totally-unused')
+    })
+
+    it('should support multiple sources', function () {
+      const result = nukecss([htmlContent, '<div id="foo-bar-3"></div>'], cssContent)
+      expect(result).to.contain('.foo-bar-3')
+    })
   })
 
-  it('should support multiple sources', function () {
-    const result = nuke([htmlContent, '<div id="foo-bar-3"></div>'], cssContent)
-    expect(result).to.contain('.foo-bar-3')
+  context('when content is parseable', () => {
+    const jsContent = 'const jsignored = "js-class other-class"'
+    const moreJsContent = 'const woah = ["still", "works"].join("-")'
+    const htmlContent = '<div id="primary" class="html-class">html-ignored</div>'
+    const cssContent = `
+      .jsignored { color: white; }
+      .html-ignored { color: white; }
+      .js-class { color: white; }
+      .other-class { color: white; }
+      .still-works { color: white; }
+      .html-class { color: white; }
+      #primary { color: white; }
+      #primary > .unused { color: white; }
+      .also-unused { color: white; }
+    `.replace(/\n\s*/g, '\n')
+
+    const nuked = nukecss([
+      {content: jsContent, type: 'js'},
+      {content: moreJsContent, type: 'js'},
+      {content: htmlContent, type: 'html'},
+    ], cssContent)
+
+    console.log(nuked)
+
+    it('should remove unused rules', function () {
+      expect(nuked).to.not.contain('#primary > .unused')
+      expect(nuked).to.not.contain('.also-unused')
+    })
+
+    it('should not remove used rules', function () {
+      expect(nuked).to.contain('.js-class')
+      expect(nuked).to.contain('.other-class')
+      expect(nuked).to.contain('.html-class')
+      expect(nuked).to.contain('#primary')
+    })
+
+    it('should remove unused rules mentioned in non-strings', function () {
+      expect(nuked).to.not.contain('jsignored')
+    })
+
+    it.skip('should remove unused rules mentioned in textnodes', function () {
+      expect(nuked).to.not.contain('html-ignored')
+    })
+
+    it('should not remove unused rules dynamically joined', function () {
+      expect(nuked).to.contain('.still-works')
+    })
   })
 })

yarn.lock

@@ -812,7 +812,7 @@ esprima@2.7.x, esprima@^2.7.1:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
 
-esprima@^3.1.1:
+esprima@^3.1.1, esprima@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"