feat: add support for javascript tags

Author: patrickhulce

lib/sources/html-source.js

@@ -1,26 +1,46 @@
 const _ = require('lodash')
 const HtmlParser = require('htmlparser2').Parser
 const ParsedSource = require('./parsed-source')
+const JsSource = require('./js-source')
+
+const DEFAULT_ATTRIBUTES = ['id', 'class', 'ng-class', 'data-ng-class']
 
 class HtmlSource extends ParsedSource {
   get type() {
     return 'html'
   }
 
+  _findToken(selector) {
+    return _.find(this._parsed.children, source => source.contains(selector))
+  }
+
   static get joiner() {
     return '\n<!-- joined by nukecss -->\n'
   }
 
-  static parse(text) {
+  static parse(text, opts) {
     const tokens = new Set()
+    const children = []
+    const attributeKeys = _.get(opts, 'html.attributes', DEFAULT_ATTRIBUTES)
 
     let error
+    let innerText
     const parser = new HtmlParser({
       onopentag(name, attributes) {
-        [name, attributes.id, attributes.class]
+        const attributeValues = Array.isArray(attributeKeys) ?
+          attributeKeys.map(key => attributes[key]) : []
+        attributeValues.concat([name])
           .filter(candidate => typeof candidate === 'string')
           .forEach(candidate => tokens.add(candidate.toLowerCase()))
       },
+      ontext(value) {
+        innerText = value
+      },
+      onclosetag(name) {
+        if (name === 'script' && innerText) {
+          children.push(JsSource.from(innerText))
+        }
+      },
       onerror(err) {
         error = err
       },
@@ -35,7 +55,7 @@ class HtmlSource extends ParsedSource {
       throw new Error('No tokens found')
     }
 
-    return tokens
+    return {tokens, children}
   }
 }
 

lib/sources/js-source.js

@@ -37,7 +37,7 @@ class JsSource extends ParsedSource {
         ancestry.pop()
       },
     })
-    return tokens
+    return {tokens}
   }
 }
 

lib/sources/parsed-source.js

@@ -3,10 +3,11 @@ const debug = require('debug')('nukecss:parsed-source')
 const SimpleSource = require('./simple-source')
 
 class ParsedSource {
-  constructor(text, tokens, opts = {}) {
+  constructor(text, parsed, opts = {}) {
     this._text = text
+    this._parsed = parsed
     this._options = opts
-    this._tokensArray = Array.from(tokens).map(t => t.toLowerCase())
+    this._tokensArray = Array.from(parsed.tokens).map(t => t.toLowerCase())
     this._tokens = new Set(this._tokensArray)
   }
 
@@ -34,13 +35,22 @@ class ParsedSource {
     return false
   }
 
+  _findToken() {
+    return false
+  }
+
   contains(selector) {
     selector = selector.toLowerCase()
     return Boolean(this._tokens.has(selector) ||
+      this._findToken(selector) ||
       this._findWholeSelectorInTokens(selector) ||
       this._findSelectorPartsInTokens(selector))
   }
 
+  _joinParsed(parsedA, parsedB, tokens) {
+    return Object.assign({}, parsedA, parsedB, {tokens})
+  }
+
   join(that) {
     const Class = this.constructor
     if (this.type !== that.type) {
@@ -53,14 +63,15 @@ class ParsedSource {
     const thatTokens = that._tokensArray || []
     const tokens = new Set(thisTokens.concat(thatTokens))
     const joiner = Class.joiner
-    return new Class(`${this._text}${joiner}${that._text}`, tokens, this._options)
+    const parsed = this._joinParsed(this._parsed, that._parsed, tokens)
+    return new Class(`${this._text}${joiner}${that._text}`, parsed, this._options)
   }
 
   static from(text, opts) {
     try {
       const Class = this
-      const tokens = Class.parse(text, opts)
-      return new Class(text, tokens, opts)
+      const parsed = Class.parse(text, opts)
+      return new Class(text, parsed, opts)
     } catch (err) {
       debug(err)
       return new SimpleSource(text, opts)

test/sources/html-source.test.js

@@ -44,6 +44,9 @@ describe('sources/html-source.js', () => {
               <div class="several classes in-a-row">
                 <h1>My Header</h1>
                 <p class="lead">Examplelongtext</p>
+                <div ng-class="{strike: deleted}" ng-repeat="value in obj">
+                  {{template value}}
+                </div>
               </div>
             </div>
             <script>
@@ -66,6 +69,7 @@ describe('sources/html-source.js', () => {
         expect(source).to.contain('container')
         expect(source).to.contain('ConTainer')
         expect(source).to.contain('lead')
+        expect(source).to.contain('strike')
       })
 
       it('should find tokens as multiple classes', () => {
@@ -80,13 +84,18 @@ describe('sources/html-source.js', () => {
 
       it('should not find tokens as other attribtues', () => {
         expect(source).to.not.contain('stylesheet')
-        expect(source).to.not.contain('javascript')
+        expect(source).to.not.contain('text/javascript')
       })
 
       it('should not find tokens as text', () => {
         expect(source).to.not.contain('Header')
         expect(source).to.not.contain('examplelongtext')
       })
+
+      it('should find tokens in script', () => {
+        expect(source).to.contain('my-javascript-class')
+        expect(source).to.not.contain('myJsVar')
+      })
     })
   })
 })