Add support for transpiled code (#141)

* setup babel and test

* add basic extraction of template strings in babelized code

* add support for code transpiled by buble

* remove irrelevant section from README

* do not use rc file for babel, properly join array of strings

* remove block scoped variables

Author: m90

README.md

@@ -248,14 +248,6 @@ Options:
   -t, --transform    Consume a sheetify transform
 ```
 
-## FAQ
-### Help, why isn't my inline CSS being transformed?
-Well, that might be because you're running `babelify` before running
-`sheetify`. `sheetify` looks for template strings in your code and then
-transforms them as inline stylesheets. If these are caught and transformed to
-ES5 strings by `babelify` then `sheetify` ends up sad. So try running
-`sheetify` before `babelify` and you should be good, we hope.
-
 ## Installation
 ```sh
 $ npm install sheetify

package.json

@@ -36,7 +36,11 @@
     "xtend": "^4.0.1"
   },
   "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babelify": "^8.0.0",
     "browserify": "^13.0.0",
+    "bubleify": "^1.1.0",
     "codecov.io": "^0.1.6",
     "concat-stream": "^1.5.1",
     "css-extract": "^1.1.2",

test/index.js

@@ -4,3 +4,4 @@ require('./plugins')
 require('./json')
 require('./noparse')
 require('./transform-package')
+require('./transpilers')

test/transpilers.js

@@ -0,0 +1,73 @@
+const fs = require('fs')
+const browserify = require('browserify')
+const test = require('tape')
+const path = require('path')
+const concat = require('concat-stream')
+const through = require('through2')
+const babelify = require('babelify')
+const bubleify = require('bubleify')
+
+const sheetify = require('..')
+
+test('transpilers', function (t) {
+  const exPath = path.join(__dirname, 'fixtures/prefix-inline-expected.css')
+  const bPath = path.join(__dirname, 'fixtures/prefix-inline-source.js')
+  const expected = fs.readFileSync(exPath, 'utf8').trim()
+  const bOpts = { browserField: false }
+
+  t.test('with babel', function (t) {
+    t.plan(2)
+
+    const ws = concat(function (buf) {
+      const res = String(buf).trim()
+      t.equal(res, expected, 'css is equal')
+    })
+
+    function outFn () {
+      return ws
+    }
+
+    browserify(bPath, bOpts)
+      .transform(babelify, { presets: ['env'] })
+      .transform(sheetify)
+      .transform(function (file) {
+        return through(function (buf, enc, next) {
+          const str = buf.toString('utf8')
+          this.push(str.replace(/sheetify\/insert/, 'insert-css'))
+          next()
+        })
+      })
+      .plugin('css-extract', { out: outFn })
+      .bundle(function (err, src) {
+        t.error(err, 'no error')
+      })
+  })
+
+  t.test('with buble', function (t) {
+    t.plan(2)
+
+    const ws = concat(function (buf) {
+      const res = String(buf).trim()
+      t.equal(res, expected, 'css is equal')
+    })
+
+    function outFn () {
+      return ws
+    }
+
+    browserify(bPath, bOpts)
+      .transform(bubleify, { transforms: { dangerousTaggedTemplateString: true } })
+      .transform(sheetify)
+      .transform(function (file) {
+        return through(function (buf, enc, next) {
+          const str = buf.toString('utf8')
+          this.push(str.replace(/sheetify\/insert/, 'insert-css'))
+          next()
+        })
+      })
+      .plugin('css-extract', { out: outFn })
+      .bundle(function (err, src) {
+        t.error(err, 'no error')
+      })
+  })
+})

transform.js

@@ -13,6 +13,11 @@ const sheetify = require('./index')
 
 module.exports = transform
 
+function isBabelTemplateDefinition (node) {
+  return node.type === 'CallExpression' &&
+    node.callee.type === 'Identifier' && node.callee.name === '_taggedTemplateLiteral'
+}
+
 // inline sheetify transform for browserify
 // obj -> (str, opts) -> str
 function transform (filename, options) {
@@ -55,6 +60,7 @@ function transform (filename, options) {
     // but tough times call for tough measure. Please don't
     // judge us too harshly, we'll work on perf ✨soon✨ -yw
     const nodes = []
+    const babelTemplateObjects = {}
     const src = Buffer.concat(bufs).toString('utf8')
     var mname = null
     var ast
@@ -103,27 +109,57 @@ function transform (filename, options) {
     }
 
     function extractTemplateNodes (node) {
-      if (node.type !== 'TemplateLiteral') return
-      if (!node.parent || !node.parent.tag) return
-      if (node.parent.tag.name !== mname) return
+      var css
+      var elements
+
+      if (node.type === 'VariableDeclarator' && node.init && isBabelTemplateDefinition(node.init)) {
+        // Babel generates helper calls like
+        //    _taggedTemplateLiteral([":host .class { color: hotpink; }"], [":host .class { color: hotpink; }"])
+        // we only keep the "cooked" part
+        babelTemplateObjects[node.id.name] = node.init.arguments[0]
+      }
 
-      const css = [ node.quasis.map(cooked) ]
-        .concat(node.expressions.map(expr)).join('').trim()
+      if (node.type === 'TemplateLiteral' && node.parent && node.parent.tag) {
+        if (node.parent.tag.name !== mname) return
 
-      const val = {
-        css: css,
-        filename: filename,
-        opts: xtend(opts),
-        node: node.parent
+        css = [ node.quasis.map(cooked) ]
+          .concat(node.expressions.map(expr)).join('').trim()
+
+        nodes.push({
+          css: css,
+          filename: filename,
+          opts: xtend(opts),
+          node: node.parent
+        })
       }
 
-      nodes.push(val)
+      if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === mname) {
+        if (node.arguments[0] && node.arguments[0].type === 'ArrayExpression') {
+          // Buble generates code like
+          //     sheetify([":host .class { color: hotpink; }"])
+          elements = node.arguments[0].elements
+        } else if (node.arguments[0] && node.arguments[0].type === 'Identifier') {
+          // Babel generates code like
+          //    sheetify(_templateObject)
+          elements = babelTemplateObjects[node.arguments[0].name].elements
+        }
+
+        if (elements) {
+          nodes.push({
+            css: elements.map(function (part) { return part.value }).join(''),
+            filename: filename,
+            opts: xtend(opts),
+            node: node
+          })
+        }
+      }
     }
 
     function extractImportNodes (node) {
       if (node.type !== 'CallExpression') return
       if (!node.callee || node.callee.type !== 'Identifier') return
       if (node.callee.name !== mname) return
+      if (!node.arguments[0] || !node.arguments[0].value) return
       var pathOpts = { basedir: path.dirname(filename) }
       try {
         var resolvePath = cssResolve(node.arguments[0].value, pathOpts)