use transform (#135)

* use transform

* Add transforms from package.json (#136)

* Remove unnecessary options from transform-package tests (#137)

Author: yoshuawuyts

README.md

@@ -11,7 +11,7 @@ like [browserify](http://browserify.org/) does.
 ## Features
 - __clarity:__ namespace CSS, no more need for naming schemes
 - __modularity:__ import and reuse CSS packages from npm
-- __extensibility:__ transform CSS using existing plugins, or write your own
+- __extensibility:__ transform CSS using existing transforms, or write your own
 - __transparency:__ inline CSS in your views
 - __simplicity:__ tiny API surface and a minimal code base
 
@@ -140,8 +140,8 @@ $ browserify index.js \
 [css-extract][2] can also write to a stream from the JS api, look at the
 documentation to see how.
 
-## Plugins
-Sheetify uses [plugins](#plugins) that take CSS and apply a transform.
+## Transforms
+Sheetify uses [transforms](#transforms) that take CSS and apply a transform.
 For example include
 [sheetify-cssnext](https://github.com/sheetify/sheetify-cssnext) to support
 autoprefixing, variables and more:
@@ -164,9 +164,9 @@ const tree = html`
 document.body.appendChild(tree)
 ```
 
-Compile with browserify using `-t [ sheetify -u sheetify-cssnext ]`:
+Compile with browserify using `-t [ sheetify -t sheetify-cssnext ]`:
 ```sh
-$ browserify -t [ sheetify -u sheetify-cssnext ] index.js > bundle.js
+$ browserify -t [ sheetify -t sheetify-cssnext ] index.js > bundle.js
 ```
 
 Transforms the CSS into:
@@ -177,15 +177,11 @@ h1 {
 }
 ```
 
-The following plugins are available:
-- [sheetify-cssnext](https://github.com/sheetify/sheetify-cssnext) - use
-  tomorrow's CSS syntax today
-
 ## API
 Browserify transforms accept either flags from the command line using
 [subargs](https://github.com/substack/subarg):
 ```sh
-$ browserify -t [ sheetify -u sheetify-cssnext ] index.js > bundle.js
+$ browserify -t [ sheetify -t sheetify-cssnext ] index.js > bundle.js
 ```
 
 Or the equivalent options by passing in a configuration object in the
@@ -194,14 +190,14 @@ JavaScript API:
 const browserify = require('browserify')
 
 const b = browserify(path.join(__dirname, 'transform/source.js'))
-b.transform('sheetify', { use: [ 'sheetify-cssnext' ] })
+b.transform('sheetify', { transform: [ 'sheetify-cssnext' ] })
 b.bundle().pipe(process.stdout)
 ```
 
 The following options are available:
 ```txt
 Options:
-  -u, --use    Consume a sheetify plugin
+  -t, --transform    Consume a sheetify transform
 ```
 
 ## FAQ

index.js

@@ -82,8 +82,8 @@ function parseCss (src, filename, prefix, options, done) {
   // one at the time
   // (str, str, obj, fn) -> null
   function applyTransforms (filename, src, options, done) {
-    options.use = [].concat(options.use || []).concat(options.u || [])
-    mapLimit(options.use, 1, iterate, function (err) {
+    options.transform = [].concat(options.transform || []).concat(options.t || [])
+    mapLimit(options.transform, 1, iterate, function (err) {
       if (err) return done(err)
       done(null, src)
     })

package.json

@@ -22,6 +22,8 @@
   ],
   "dependencies": {
     "falafel": "^2.1.0",
+    "fast-json-parse": "^1.0.2",
+    "findup": "^0.1.5",
     "insert-css": "^2.0.0",
     "map-limit": "0.0.1",
     "postcss": "^5.0.10",

test/fixtures/transform-package/expected.css

@@ -0,0 +1,8 @@
+._75161010 .hello,._75161010 .world {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }
+._75161010 .hello,._75161010 .world {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+  }

test/fixtures/transform-package/package.json

@@ -0,0 +1,12 @@
+{
+  "sheetify": {
+    "transform": [
+      [
+        "sheetify-cssnext",
+        {
+          "sourcemap": false
+        }
+      ]
+    ]
+  }
+}

test/fixtures/transform-package/source.js

@@ -0,0 +1,16 @@
+const sf = require('sheetify')
+
+const prefix = sf`
+  :host .hello, :host .world {
+    transform: translate(0, 0);
+  }
+`
+
+var foo = {}
+foo.bar = sf`
+  :host .hello, :host .world {
+    transform: translate(0, 0);
+  }
+`
+
+console.log(prefix)

test/index.js

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

test/plugins.js

@@ -23,7 +23,7 @@ test('plugins', function (t) {
     const bpath = path.join(__dirname, 'fixtures/plugins-source.js')
     browserify(bpath, bOpts)
       .transform(sheetify, {
-        use: [ [ 'sheetify-cssnext', { sourcemap: false } ] ]
+        transform: [ [ 'sheetify-cssnext', { sourcemap: false } ] ]
       })
       .transform(function (file) {
         return through(function (buf, enc, next) {

test/transform-package.js

@@ -0,0 +1,40 @@
+const browserify = require('browserify')
+const concat = require('concat-stream')
+const through = require('through2')
+const test = require('tape')
+const path = require('path')
+const fs = require('fs')
+
+const sheetify = require('../')
+
+test('transform-package', function (t) {
+  t.test('should transform CSS from package.json with options', function (t) {
+    t.plan(1)
+
+    const expath = path.join(__dirname, 'fixtures/transform-package/expected.css')
+    const expected = fs.readFileSync(expath, 'utf8').trim()
+
+    const ws = concat(function (buf) {
+      const res = String(buf).trim()
+      t.equal(res, expected, 'CSS was transformed')
+    })
+
+    const bpath = path.join(__dirname, 'fixtures/transform-package/source.js')
+
+    browserify(bpath)
+      .transform(sheetify)
+      .transform(function (file) {
+        return through(function (buf, enc, next) {
+          const str = buf.toString('utf8')
+          this.push(str.replace(/sheetify\/insert/g, 'insert-css'))
+          next()
+        })
+      })
+      .plugin('css-extract', { out: outFn })
+      .bundle()
+
+    function outFn () {
+      return ws
+    }
+  })
+})

transform.js

@@ -1,8 +1,10 @@
 const cssResolve = require('style-resolve').sync
 const staticEval = require('static-eval')
+const parse = require('fast-json-parse')
 const mapLimit = require('map-limit')
 const through = require('through2')
 const falafel = require('falafel')
+const findup = require('findup')
 const xtend = require('xtend')
 const path = require('path')
 const fs = require('fs')
@@ -18,12 +20,10 @@ function transform (filename, options) {
 
   const opts = xtend(options || {
     basedir: process.cwd(),
-    use: [],
+    transform: [],
     out: ''
   })
 
-  opts.use = [].concat(opts.use || []).concat(opts.u || [])
-
   const bufs = []
   const transformStream = through(write, end)
   return transformStream
@@ -54,19 +54,25 @@ function transform (filename, options) {
       return
     }
 
-    try {
-      const tmpAst = falafel(src, { ecmaVersion: 8 }, identifyModuleName)
-      ast = falafel(tmpAst.toString(), { ecmaVersion: 8 }, extractNodes)
-    } catch (err) {
-      return self.emit('error', err)
-    }
-
-    // transform all detected nodes and
-    // close stream when done
-    mapLimit(nodes, Infinity, iterate, function (err) {
+    findTransforms(filename, function (err, transforms) {
       if (err) return self.emit('error', err)
-      self.push(ast.toString())
-      self.push(null)
+
+      opts.transform = transforms.concat(opts.transform || []).concat(opts.t || [])
+
+      try {
+        const tmpAst = falafel(src, { ecmaVersion: 8 }, identifyModuleName)
+        ast = falafel(tmpAst.toString(), { ecmaVersion: 8 }, extractNodes)
+      } catch (err) {
+        return self.emit('error', err)
+      }
+
+      // transform all detected nodes and
+      // close stream when done
+      mapLimit(nodes, Infinity, iterate, function (err) {
+        if (err) return self.emit('error', err)
+        self.push(ast.toString())
+        self.push(null)
+      })
     })
 
     function identifyModuleName (node) {
@@ -164,6 +170,27 @@ function transform (filename, options) {
       })
     }
   }
+
+  function findTransforms (filename, done) {
+    findup(filename, 'package.json', function (err, pathname) {
+      // no package.json found - just run local transforms
+      if (err) return done(null, [])
+
+      var filename = path.join(pathname, 'package.json')
+      fs.readFile(filename, function (err, file) {
+        if (err) return done(err)
+        var parsed = parse(file)
+        if (parsed.err) return done(parsed.err)
+        var json = parsed.value
+        var d = json.sheetify
+        if (!d) return done(null, [])
+        var t = d.transform
+        if (!t || !Array.isArray(t)) return done(null, [])
+
+        return done(null, t)
+      })
+    })
+  }
 }
 
 function cooked (node) { return node.value.cooked }