first commit

Author: futurist

.babelrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["./index"],
+  "ignore": ["node_modules"]
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,2 +1,74 @@
 # babel-plugin-transform-cssobj-jsx
-Babel plugin to transform class names into cssobj localized
+Babel plugin to transform class names into cssobj localized names, easily transform existing code into cssobj.
+
+## Usage
+
+1. Install
+
+  ``` bash
+  npm install --save-dev babel-plugin-syntax-jsx babel-plugin-transform-cssobj-jsx
+  ```
+
+2. In your `.babelrc`:
+
+  ``` json
+  {
+    "plugins": ["transform-cssobj-jsx"]
+  }
+  ```
+
+3. In you JSX, consume cssobj result as below:
+
+    ``` javascript
+    const style = cssobj(obj)
+
+    const html = (
+        <div className={'nav', style}>
+        <p className={'!news item active', style}> </p></div>
+    )
+    ```
+
+    Which transform into below code:
+
+    ``` javascript
+    const html = (
+        <div className={result.mapClass('nav')}>
+        <p className={result.mapClass('!news item active')}> </p></div>
+    )
+    ```
+
+  Note: According to **cssobj** `mapClass` rule, the `news` will not localized (aka keep AS IS).
+
+## More Usage
+
+  - **Case 1** Your existing code already use Sequence Expression
+
+    Use below to prevent this plugin to transform:
+
+    ```Javascript
+    // existing code
+    <div className={init(), get()}>
+
+    // prevent transform
+    <div className={init(), get(), true}>
+
+    // will result as (same as existing code)
+    <div className={init(), get()}>
+    ```
+
+  - **Case 2** You are debugging, want temp disable the transform
+
+    Use below to keep you class names untouched (not mapped)
+
+    ```Javascript
+    // pass null as last object
+    <div className={'a b c', null}>
+
+    // will result as
+    <div className={'a b c'}>
+    ```
+
+## TODO
+
+ - [ ] Support JSX Spread
+ - [ ] Child element should regard to parent cssobj scope

index.js

@@ -0,0 +1,30 @@
+// Babel plugin to transform class names into cssobj localized
+module.exports = function (babel) {
+  var t = babel.types
+
+  return {
+    inherits: require('babel-plugin-syntax-jsx'),
+    visitor: {
+      JSXAttribute: function (path) {
+        var node = path.node
+        if (!node.name || !node.value || ['className', 'class'].indexOf(node.name.name)<0) return
+        if (t.isJSXExpressionContainer(node.value)) {
+          if(t.isSequenceExpression(node.value.expression)) {
+            var values = node.value.expression.expressions
+            var resultObj = values[values.length-1]
+            var classStr = values[0]
+            var exp =  /Literal$/.test(resultObj.type)
+                ? (resultObj.value == null
+                   ? classStr
+                   : t.sequenceExpression(node.value.expression.expressions.slice(0,-1)))
+                : t.callExpression(
+                  t.memberExpression(resultObj, t.identifier('mapClass')),
+                  [classStr]
+                )
+            node.value = t.jSXExpressionContainer(exp)
+          }
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "babel-plugin-transform-cssobj-jsx",
+  "version": "1.0.0",
+  "description": "Babel plugin to transform class names into cssobj localized",
+  "main": "index.js",
+  "directories": {
+    "test": "test"
+  },
+  "files": [
+    "index.js"
+  ],
+  "scripts": {
+    "test": "mocha --compilers js:babel-register"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cssobj/babel-plugin-transform-cssobj-jsx.git"
+  },
+  "keywords": [
+    "babel",
+    "plugin",
+    "cssobj",
+    "transform",
+    "mapClass",
+    "jsx"
+  ],
+  "author": "James Yang <jamesyang999@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cssobj/babel-plugin-transform-cssobj-jsx/issues"
+  },
+  "homepage": "https://github.com/cssobj/babel-plugin-transform-cssobj-jsx#readme",
+  "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-register": "^6.18.0",
+    "chai": "^3.5.0",
+    "mocha": "^3.2.0"
+  },
+  "dependencies": {
+    "babel-plugin-syntax-jsx": "^6.18.0"
+  }
+}

test/test.js

@@ -0,0 +1,27 @@
+const {expect} = require('chai')
+const {transform} = require('babel-core')
+
+function lib (code) {
+  return transform(code, {
+    plugins: ['./index']
+  }).code
+}
+
+describe('babel-plugin-transform-cssobj-jsx', () => {
+  describe('single level test', () => {
+    it('should add mapClass', () => {
+      const node = `var d=<div className={'a b c', result}>test</div>`
+      expect(lib(node)).to.equal(`var d = <div className={result.mapClass('a b c')}>test</div>;`)
+    })
+
+    it('should not mapClass (use global)', () => {
+      const node = `var d=<div className={'a b c', null}>test</div>`
+      expect(lib(node)).to.equal(`var d = <div className={'a b c'}>test</div>;`)
+    })
+
+    it('should regard to existing SequenceExpression', () => {
+      const node = `var d=<div className={init(), get(), true}>test</div>`
+      expect(lib(node)).to.equal(`var d = <div className={(init(), get())}>test</div>;`)
+    })
+  })
+})