Closes #2. Parsing multiple expressions in binding style to inject _px2rem.

Author: MrRaindrop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "weex-vue-precompiler",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "a precompiler for weex-vue-render.",
   "main": "src/index.js",
   "scripts": {

src/components/index.js

@@ -1,7 +1,21 @@
+const div = require('./div')
+const image = require('./image')
+const text = require('./text')
+const a = require('./a')
+const cell = require('./cell')
+
+const cmpMaps = { div, image, text, a, cell }
+
 module.exports = {
-  div: require('./div').processDiv,
-  figure: require('./image').processImage,
-  p: require('./text').processText,
-  a: require('./a').processA,
-  section: require('./cell').processCell
+  div: div.processDiv,
+  figure: image.processImage,
+  p: text.processText,
+  a: a.processA,
+  section: cell.processCell,
+  // get ast compiler for binding styles.
+  getCompiler: function (tag) {
+    const cmp = cmpMaps[tag]
+    const compile = cmp && cmp.compile
+    return compile ? { compile } : undefined
+  }
 }

src/components/text.js

@@ -1,5 +1,6 @@
 const util = require('../util')
 const {
+  ast,
   extend,
   getStaticStyleObject
 } = util
@@ -43,3 +44,31 @@ exports.processText = function (
   delete el.ns
   el.plain = false
 }
+
+// deal with binding-styles ast node.
+exports.compile = function (objNode, px2remTags, rootValue, transformNode) {
+  const props = objNode.properties
+  let hasLines = false
+  for (let i = 0, l = props.length; i < l; i++) {
+    const propNode = props[i]
+    const keyNode = propNode.key
+    const keyType = keyNode.type
+    const keyNodeValStr = keyType === 'Literal' ? 'value' : 'name'
+    const keyName = keyNode[keyNodeValStr]
+    const valNode = propNode.value
+    if (keyName === 'lines') {
+      hasLines = true
+      keyNode[keyNodeValStr] = 'webkitLineClamp'
+    }
+    else if (px2remTags.indexOf(keyName) > -1) {
+      propNode.value = transformNode(propNode.value, 'text', rootValue, true/*asPropValue*/)
+    }
+  }
+  if (hasLines) {
+    objNode.properties = props.concat([
+      ast.genPropNode('overflow', 'hidden'),
+      ast.genPropNode('textOverflow', 'ellipsis')
+    ])
+  }
+  return objNode
+}

src/config.js

@@ -1,3 +1,20 @@
+const util = require('./util')
+
+const vendorReg = /webkit|moz/i
+function hyphen (key) {
+  return util.hyphenate(key.replace(vendorReg, function ($0) {
+    return `-${$0.toLowerCase()}-`
+  }))
+}
+
+function getAllStyles (scaleStyles) {
+  return Object.keys(scaleStyles.reduce(function (pre, key) {
+    pre[key] = 1
+    pre[hyphen(key)] = 1
+    return pre
+  }, {}))
+}
+
 const config = {
   eventMap: {
     click: 'weex$tap',
@@ -81,35 +98,14 @@ const config = {
     'finish',
     'fail'
   ],
-  preservedTags: [
-    'a',
-    'container',
-    'div',
-    'image',
-    'img',
-    'text',
-    'input',
-    'switch',
-    'list',
-    'scroller',
-    'waterfall',
-    'slider',
-    'indicator',
-    'loading-indicator',
-    'loading',
-    'refresh',
-    'textarea',
-    'video',
-    'web'
-  ],
   autoprefixer: {
     browsers: ['> 0.1%', 'ios >= 8', 'not ie < 12']
   },
   px2rem: {
     rootValue: 75,
     minPixelValue: 1.01
   },
-  bindingStyleNamesForPx2Rem: [
+  bindingStyleNamesForPx2Rem: getAllStyles([
     'width',
     'height',
     'left',
@@ -145,7 +141,7 @@ const config = {
     'mozTransform',
     'MozTransform',
     'itemSize'
-  ]
+  ])
 }
 
 module.exports = config