first commit

node_modules/@dcloudio/vue-cli-plugin-hbuilderx/packages/weex-styler/test/parse.js

@@ -0,0 +1,289 @@
+var chai = require('chai')
+var sinon = require('sinon')
+var sinonChai = require('sinon-chai')
+var expect = chai.expect
+chai.use(sinonChai)
+
+var styler = require('../')
+
+describe('parse', function () {
+
+  it('parse normal style code', function (done) {
+    var code = 'html {color: #000000;}\n\n.foo {color: red; background-color: rgba(255,255,255,0.6); -webkit-transform: rotate(90deg); width: 200px; left: 0; right: 0px; border-width: 1pt; font-weight: 100}\n\n.bar {background: red}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({foo: {color: '#FF0000', backgroundColor: 'rgba(255,255,255,0.6)', WebkitTransform: 'rotate(90deg)', width: '200px', left: 0, right: '0px', borderWidth: '1pt', fontWeight: '100'}, bar: {background: 'red'}})
+      expect(data.log).eql([
+        {line: 1, column: 1, reason: 'ERROR: Selector `html` is not supported. Weex only support single-classname selector'},
+        {line: 3, column: 7, reason: 'NOTE: property value `red` is autofixed to `#FF0000`'},
+        {line: 3, column: 60, reason: 'WARNING: `-webkit-transform` is not a standard property name (may not be supported)'},
+        {line: 5, column: 7, reason: 'WARNING: `background` is not a standard property name (may not be supported), suggest `background-color`'}
+      ])
+      done()
+    })
+  })
+
+  it('parse and fix prop value', function (done) {
+    var code = '.foo {font-size: 200px;}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({foo: {fontSize: '200px'}})
+      done()
+    })
+  })
+
+  it('parse and ensure number type value', function (done) {
+    var code = '.foo {line-height: 40;}\n\n .bar {line-height: 20px;}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({foo: {lineHeight: 40}, bar: {lineHeight: '20px'}})
+      done()
+    })
+  })
+
+  it('handle complex class definition', function (done) {
+    var code = '.foo, .bar {font-size: 20;}\n\n .foo {color: #ff5000;}\n\n .bar {color: #000000;}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        foo: {fontSize: 20, color: '#ff5000'},
+        bar: {fontSize: 20, color: '#000000'}
+      })
+      done()
+    })
+  })
+
+  it('handle more complex class definition', function (done) {
+    var code = '.foo, .bar {font-size: 20; color: #000000}\n\n .foo, .bar, .baz {color: #ff5000; height: 30;}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        foo: {fontSize: 20, color: '#ff5000', height: 30},
+        bar: {fontSize: 20, color: '#ff5000', height: 30},
+        baz: {color: '#ff5000', height: 30}
+      })
+      done()
+    })
+  })
+
+  it('parse transition', function (done) {
+    var code = '.foo {transition-property: margin-top; transition-duration: 300ms; transition-delay: 0.2s; transition-timing-function: ease-in;}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'marginTop', duration: 300, delay: 200, timingFunction: 'ease-in'}})
+      expect(data.jsonStyle.foo).eql({
+        transitionDelay: 200,
+        transitionDuration: 300,
+        transitionProperty: "marginTop",
+        transitionTimingFunction: "ease-in"
+      })
+      expect(data.log).eql([
+        {line: 1, column: 40, reason: 'NOTE: property value `300ms` is autofixed to `300`'},
+        {line: 1, column: 68, reason: 'NOTE: property value `0.2s` is autofixed to `200`'}
+      ])
+      done()
+    })
+  })
+
+  it('parse transition transform', function (done) {
+    var code = '.foo {transition-property: transform; transition-duration: 300ms; transition-delay: 0.2s; transition-timing-function: ease-in-out;}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'transform', duration: 300, delay: 200, timingFunction: 'ease-in-out'}})
+      expect(data.jsonStyle.foo).eql({
+        transitionDelay: 200,
+        transitionDuration: 300,
+        transitionProperty: "transform",
+        transitionTimingFunction: "ease-in-out"
+      })
+      done()
+    })
+  })
+
+  it('parse multi transition properties', function (done) {
+    var code = '.foo {transition-property: margin-top, height; transition-duration: 300ms; transition-delay: 0.2s; transition-timing-function: ease-in-out;}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'marginTop,height', duration: 300, delay: 200, timingFunction: 'ease-in-out'}})
+      expect(data.jsonStyle.foo).eql({
+        transitionDelay: 200,
+        transitionDuration: 300,
+        transitionProperty: "marginTop,height",
+        transitionTimingFunction: "ease-in-out"
+      })
+      done()
+    })
+  })
+
+  it('parse complex transition', function (done) {
+    var code = '.foo {font-size: 20; color: #000000}\n\n .foo, .bar {color: #ff5000; height: 30; transition-property: margin-top; transition-duration: 300ms; transition-delay: 0.2s; transition-timing-function: ease-in;}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle['@TRANSITION']).eql({
+        foo: {property: 'marginTop', duration: 300, delay: 200, timingFunction: 'ease-in'},
+        bar: {property: 'marginTop', duration: 300, delay: 200, timingFunction: 'ease-in'}
+      })
+      expect(data.jsonStyle.foo).eql({
+        fontSize: 20, color: '#ff5000', height: 30,
+        transitionDelay: 200,
+        transitionDuration: 300,
+        transitionProperty: "marginTop",
+        transitionTimingFunction: "ease-in"
+      })
+      expect(data.jsonStyle.bar).eql({
+        color: '#ff5000', height: 30,
+        transitionDelay: 200,
+        transitionDuration: 300,
+        transitionProperty: "marginTop",
+        transitionTimingFunction: "ease-in"
+      })
+      expect(data.log).eql([
+        {line: 3, column: 75, reason: 'NOTE: property value `300ms` is autofixed to `300`'},
+        {line: 3, column: 103, reason: 'NOTE: property value `0.2s` is autofixed to `200`'}
+      ])
+      done()
+    })
+  })
+
+  it('parse transition shorthand', function (done) {
+    var code = '.foo {font-size: 20; transition: margin-top 500ms ease-in-out 1s}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'marginTop', duration: 500, delay: 1000, timingFunction: 'ease-in-out' }})
+      expect(data.jsonStyle.foo).eql({
+        fontSize: 20,
+        transitionDelay: 1000,
+        transitionDuration: 500,
+        transitionProperty: "marginTop",
+        transitionTimingFunction: "ease-in-out"
+      })
+      expect(data.log).eql([
+        {line: 1, column: 22, reason: 'NOTE: property value `500ms` is autofixed to `500`'},
+        {line: 1, column: 22, reason: 'NOTE: property value `1s` is autofixed to `1000`'}
+      ])
+      done()
+    })
+  })
+
+  it.skip('override transition shorthand', function (done) {
+    var code = '.foo {font-size: 32px; transition: margin-top 500ms ease-in-out 1s; transition-duration: 300ms}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'marginTop', duration: 300, delay: 1000, timingFunction: 'ease-in-out' }})
+      expect(data.jsonStyle.foo).eql({
+        fontSize: 32,
+        transitionDelay: 1000,
+        transitionDuration: 300,
+        transitionProperty: "marginTop",
+        transitionTimingFunction: "ease-in-out"
+      })
+      done()
+    })
+  })
+
+  it('parse padding & margin shorthand', function (done) {
+    var code = '.foo { padding: 20px; margin: 30px 40; } .bar { margin: 10px 20 30; padding: 10 20px 30px 40;}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle.foo).eql({
+        paddingTop: '20px',
+        paddingRight: '20px',
+        paddingBottom: '20px',
+        paddingLeft: '20px',
+        marginTop: '30px',
+        marginRight: 40,
+        marginBottom: '30px',
+        marginLeft: 40
+      })
+      expect(data.jsonStyle.bar).eql({
+        paddingTop: 10,
+        paddingRight: '20px',
+        paddingBottom: '30px',
+        paddingLeft: 40,
+        marginTop: '10px',
+        marginRight: 20,
+        marginBottom: 30,
+        marginLeft: 20
+      })
+      done()
+    })
+  })
+
+  it('override padding & margin shorthand', function (done) {
+    var code = '.foo { padding: 20px; padding-left: 30px; } .bar { margin: 10px 20; margin-bottom: 30px;}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle.foo).eql({
+        paddingTop: '20px',
+        paddingRight: '20px',
+        paddingBottom: '20px',
+        paddingLeft: '30px'
+      })
+      expect(data.jsonStyle.bar).eql({
+        marginTop: '10px',
+        marginRight: 20,
+        marginBottom: '30px',
+        marginLeft: 20
+      })
+      done()
+    })
+  })
+
+  it('handle pseudo class', function (done) {
+    var code = '.class-a {color: #0000ff;} .class-a:last-child:focus {color: #ff0000;}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        'class-a': {
+          color: '#0000ff',
+          'color:last-child:focus': '#ff0000'
+        }
+      })
+      done()
+    })
+  })
+
+  it('handle iconfont', function (done) {
+    var code = '@font-face {font-family: "font-family-name-1"; src: url("font file url 1-1") format("truetype");} @font-face {font-family: "font-family-name-2"; src: url("font file url 2-1") format("truetype"), url("font file url 2-2") format("woff");}'
+    styler.parse(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        '@FONT-FACE': [
+          {fontFamily: 'font-family-name-1', src: 'url("font file url 1-1") format("truetype")'},
+          {fontFamily: 'font-family-name-2', src: 'url("font file url 2-1") format("truetype"), url("font file url 2-2") format("woff")'}
+        ]
+      })
+      done()
+    })
+  })
+
+  it('handle syntax error', function (done) {
+    var code = 'asdf'
+    styler.parse(code, function (err, data) {
+      expect(err).is.an.array
+      expect(err[0].toString()).eql('Error: undefined:1:5: missing \'{\'')
+      expect(err[0].reason).eql('missing \'{\'')
+      expect(err[0].filename).eql(undefined)
+      expect(err[0].line).eql(1)
+      expect(err[0].column).eql(5)
+      expect(err[0].source).eql('')
+      expect(data.log).eql([{line: 1, column: 5, reason: 'ERROR: undefined:1:5: missing \'{\''}])
+      done()
+    })
+  })
+})

node_modules/@dcloudio/vue-cli-plugin-hbuilderx/packages/weex-styler/test/shorthand-parser.spec.js

@@ -0,0 +1,238 @@
+var chai = require('chai')
+var sinon = require('sinon')
+var sinonChai = require('sinon-chai')
+var expect = chai.expect
+chai.use(sinonChai)
+
+var shorthandParser = require('../lib/shorthand-parser')
+
+describe('shorthand-parser', function () {
+  it('parse transition', function () {
+    var declarations = [
+      {
+        type: 'declaration',
+        property: 'transition',
+        value: 'margin-top 500ms ease-in-out 1s',
+        position: {}
+      }
+    ]
+    var result = shorthandParser(declarations)
+    expect(result).eql([
+      {
+        type: 'declaration',
+        property: 'transition-property',
+        value: 'margin-top',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'transition-duration',
+        value: '500ms',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'transition-timing-function',
+        value: 'ease-in-out',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'transition-delay',
+        value: '1s',
+        position: {}
+      }
+    ])
+
+    expect(shorthandParser([{
+      type: 'declaration',
+      property: 'transition',
+      value: 'width 2s ease-in-out, height 1s 1s, top cubic-bezier(0.1, 0.7, 1.0, 0.1)',
+      position: {}
+    }])).eql([{
+      type: 'declaration',
+      property: 'transition-property',
+      value: 'width, height, top',
+      position: {}
+    },
+    {
+      type: 'declaration',
+      property: 'transition-duration',
+      value: '2s, 1s, 0s',
+      position: {}
+    },
+    {
+      type: 'declaration',
+      property: 'transition-timing-function',
+      value: 'ease-in-out, ease, cubic-bezier(0.1, 0.7, 1.0, 0.1)',
+      position: {}
+    },
+    {
+      type: 'declaration',
+      property: 'transition-delay',
+      value: '0s, 1s, 0s',
+      position: {}
+    }])
+
+    expect(shorthandParser([{
+      type: 'declaration',
+      property: 'transition',
+      value: 'width 2s, height 2s',
+      position: {}
+    }])).eql([{
+      type: 'declaration',
+      property: 'transition-property',
+      value: 'width, height',
+      position: {}
+    },
+    {
+      type: 'declaration',
+      property: 'transition-duration',
+      value: '2s',
+      position: {}
+    },
+    {
+      type: 'declaration',
+      property: 'transition-timing-function',
+      value: 'ease',
+      position: {}
+    },
+    {
+      type: 'declaration',
+      property: 'transition-delay',
+      value: '0s',
+      position: {}
+    }])
+  })
+
+  it('parse margin', function () {
+    var declarations = [
+      {
+        type: 'declaration',
+        property: 'margin',
+        value: '1px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin',
+        value: '21px 22px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin',
+        value: '31px 32px 33px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin',
+        value: '41px 42px 43px 44px',
+        position: {}
+      }
+    ]
+    var result = shorthandParser(declarations)
+    expect(result).eql([
+      {
+        type: 'declaration',
+        property: 'margin-top',
+        value: '1px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin-right',
+        value: '1px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin-bottom',
+        value: '1px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin-left',
+        value: '1px',
+        position: {}
+      },
+
+      {
+        type: 'declaration',
+        property: 'margin-top',
+        value: '21px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin-right',
+        value: '22px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin-bottom',
+        value: '21px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin-left',
+        value: '22px',
+        position: {}
+      },
+
+      {
+        type: 'declaration',
+        property: 'margin-top',
+        value: '31px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin-right',
+        value: '32px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin-bottom',
+        value: '33px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin-left',
+        value: '32px',
+        position: {}
+      },
+
+      {
+        type: 'declaration',
+        property: 'margin-top',
+        value: '41px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin-right',
+        value: '42px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin-bottom',
+        value: '43px',
+        position: {}
+      },
+      {
+        type: 'declaration',
+        property: 'margin-left',
+        value: '44px',
+        position: {}
+      }
+    ])
+  })
+})

node_modules/@dcloudio/vue-cli-plugin-hbuilderx/packages/weex-styler/test/validate.js

@@ -0,0 +1,445 @@
+var chai = require('chai')
+var sinon = require('sinon')
+var sinonChai = require('sinon-chai')
+var expect = chai.expect
+chai.use(sinonChai)
+
+var styler = require('../')
+
+describe('validate', function () {
+
+  it('parse normal style code', function (done) {
+    var code = {
+      foo: {
+        color: '#FF0000',
+        width: '200',
+        position: 'sticky',
+        zIndex: 4
+      }
+    }
+    styler.validate(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({foo: {color: '#FF0000', width: 200, position: 'sticky', zIndex: 4}})
+      expect(data.log).eql([])
+      done()
+    })
+  })
+
+  it('parse length', function (done) {
+    var code = {
+      foo: {
+        width: '200px',
+        paddingLeft: '300',
+        borderWidth: '1pt',
+        left: '0',
+        right: '0px',
+        marginRight: 'asdf'
+      }
+    }
+    styler.validate(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({foo: {
+        width: '200px',
+        paddingLeft: 300,
+        borderWidth: '1pt',
+        left: 0,
+        right: '0px'
+      }})
+      expect(data.log).eql([
+        {reason: 'ERROR: property value `asdf` is not supported for `margin-right` (only number and pixel values are supported)'}
+      ])
+      done()
+    })
+  })
+
+  it('parse number', function (done) {
+    var code = {
+      foo: {
+        opacity: '1'
+      },
+      bar: {
+        opacity: '0.5'
+      },
+      baz: {
+        opacity: 'a'
+      },
+      boo: {
+        opacity: '0.5a'
+      },
+      zero: {
+        opacity: '0'
+      }
+    }
+    styler.validate(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        foo: {
+          opacity: 1
+        },
+        bar: {
+          opacity: 0.5
+        },
+        baz: {},
+        boo: {},
+        zero: {
+          opacity: 0
+        }
+      })
+      expect(data.log).eql([
+        {reason: 'ERROR: property value `a` is not supported for `opacity` (only number is supported)'},
+        {reason: 'ERROR: property value `0.5a` is not supported for `opacity` (only number is supported)'}
+      ])
+      done()
+    })
+  })
+
+  it('parse integer', function (done) {
+    var code = {
+      foo: {
+        zIndex: '1'
+      },
+      bar: {
+        zIndex: '0.5'
+      },
+      baz: {
+        zIndex: 'a'
+      },
+      boo: {
+        zIndex: '0.5a'
+      },
+      zero: {
+        zIndex: '0'
+      }
+    }
+    styler.validate(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        foo: {
+          zIndex: 1
+        },
+        bar: {},
+        baz: {},
+        boo: {},
+        zero: {
+          zIndex: 0
+        }
+      })
+      expect(data.log).eql([
+        {reason: 'ERROR: property value `0.5` is not supported for `z-index` (only integer is supported)'},
+        {reason: 'ERROR: property value `a` is not supported for `z-index` (only integer is supported)'},
+        {reason: 'ERROR: property value `0.5a` is not supported for `z-index` (only integer is supported)'}
+      ])
+      done()
+    })
+  })
+
+  it('parse color', function (done) {
+    var code = {
+      foo: {
+        color: '#FF0000',
+        backgroundColor: '#ff0000'
+      },
+      bar: {
+        color: '#F00',
+        backgroundColor: '#f00'
+      },
+      baz: {
+        color: 'red',
+        backgroundColor: 'lightpink'
+      },
+      rgba: {
+        color: 'rgb(23, 0, 255)',
+        backgroundColor: 'rgba(234, 45, 99, .4)'
+      },
+      transparent: {
+        color: 'transparent',
+        backgroundColor: 'asdf'
+      },
+      errRgba: {
+        color: 'rgb(266,0,255)',
+        backgroundColor: 'rgba(234,45,99,1.3)'
+      }
+    }
+    styler.validate(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        foo: {
+          color: '#FF0000',
+          backgroundColor: '#ff0000'
+        },
+        bar: {
+          color: '#FF0000',
+          backgroundColor: '#ff0000'
+        },
+        baz: {
+          color: '#FF0000',
+          backgroundColor: '#FFB6C1'
+        },
+        rgba: {
+          color: 'rgb(23,0,255)',
+          backgroundColor: 'rgba(234,45,99,0.4)'
+        },
+        transparent: {
+          color: 'rgba(0,0,0,0)'
+        },
+        errRgba: {}
+      })
+      expect(data.log).eql([
+        {reason: 'NOTE: property value `#F00` is autofixed to `#FF0000`'},
+        {reason: 'NOTE: property value `#f00` is autofixed to `#ff0000`'},
+        {reason: 'NOTE: property value `red` is autofixed to `#FF0000`'},
+        {reason: 'NOTE: property value `lightpink` is autofixed to `#FFB6C1`'},
+        {reason: 'ERROR: property value `asdf` is not valid for `background-color`'},
+        {reason: 'ERROR: property value `rgb(266,0,255)` is not valid for `color`'},
+        {reason: 'ERROR: property value `rgba(234,45,99,1.3)` is not valid for `background-color`'}
+      ])
+      done()
+    })
+  })
+
+  it('parse color', function (done) {
+    var code = {
+      foo: {
+        color: '#FF0000',
+        backgroundColor: '#ff0000'
+      },
+      bar: {
+        color: '#F00',
+        backgroundColor: '#f00'
+      },
+      baz: {
+        color: 'red',
+        backgroundColor: 'lightpink'
+      },
+      rgba: {
+        color: 'rgb(23, 0, 255)',
+        backgroundColor: 'rgba(234, 45, 99, .4)'
+      },
+      transparent: {
+        color: 'transparent',
+        backgroundColor: 'asdf'
+      },
+      errRgba: {
+        color: 'rgb(266,0,255)',
+        backgroundColor: 'rgba(234,45,99,1.3)'
+      }
+    }
+    styler.validate(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        foo: {
+          color: '#FF0000',
+          backgroundColor: '#ff0000'
+        },
+        bar: {
+          color: '#FF0000',
+          backgroundColor: '#ff0000'
+        },
+        baz: {
+          color: '#FF0000',
+          backgroundColor: '#FFB6C1'
+        },
+        rgba: {
+          color: 'rgb(23,0,255)',
+          backgroundColor: 'rgba(234,45,99,0.4)'
+        },
+        transparent: {
+          color: 'rgba(0,0,0,0)'
+        },
+        errRgba: {}
+      })
+      expect(data.log).eql([
+        {reason: 'NOTE: property value `#F00` is autofixed to `#FF0000`'},
+        {reason: 'NOTE: property value `#f00` is autofixed to `#ff0000`'},
+        {reason: 'NOTE: property value `red` is autofixed to `#FF0000`'},
+        {reason: 'NOTE: property value `lightpink` is autofixed to `#FFB6C1`'},
+        {reason: 'ERROR: property value `asdf` is not valid for `background-color`'},
+        {reason: 'ERROR: property value `rgb(266,0,255)` is not valid for `color`'},
+        {reason: 'ERROR: property value `rgba(234,45,99,1.3)` is not valid for `background-color`'}
+      ])
+      done()
+    })
+  })
+
+  it('parse flex-wrap', function (done) {
+    var code = {
+      foo: { flexWrap: 'nowrap' },
+      bar: { flexWrap: 'wrap' }
+    }
+    styler.validate(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        foo: { flexWrap: 'nowrap' },
+        bar: { flexWrap: 'wrap' }
+      })
+      expect(data.log).eql([
+        {reason: 'NOTE: property value `nowrap` is the DEFAULT value for `flex-wrap` (could be removed)'},
+        {reason: 'NOTE: the flex-wrap property may have compatibility problem on native'},
+      ])
+      done()
+    })
+  })
+
+  it('parse transition-property', function (done) {
+    var code = {
+      foo: {
+        transitionProperty: 'margin-top'
+      },
+      bar: {
+        transitionProperty: 'height'
+      },
+      foobar: {
+        transitionProperty: 'margin-top, height'
+      },
+      baz: {
+        transitionProperty: 'abc'
+      }
+    }
+    styler.validate(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        foo: {
+          transitionProperty: 'marginTop'
+        },
+        bar: {
+          transitionProperty: 'height'
+        },
+        foobar: {
+          transitionProperty: 'marginTop,height'
+        },
+        baz: {}
+      })
+      expect(data.log).eql([
+        {reason: 'ERROR: property value `abc` is not supported for `transition-property` (only css property is valid)'}
+      ])
+      done()
+    })
+  })
+
+  it('parse transition-duration & transition-delay', function (done) {
+    var code = {
+      foo: {
+        transitionDuration: '200ms',
+        transitionDelay: '0.5s'
+      },
+      bar: {
+        transitionDuration: '200',
+        transitionDelay: 'abc'
+      }
+    }
+    styler.validate(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        foo: {
+          transitionDuration: 200,
+          transitionDelay: 500
+        },
+        bar: {
+          transitionDuration: 200
+        }
+      })
+      expect(data.log).eql([
+        {reason: 'NOTE: property value `200ms` is autofixed to `200`'},
+        {reason: 'NOTE: property value `0.5s` is autofixed to `500`'},
+        {reason: 'ERROR: property value `abc` is not supported for `transition-delay` (only number of seconds and milliseconds is valid)'}
+      ])
+      done()
+    })
+  })
+
+  it('parse transition-timing-function', function (done) {
+    var code = {
+      foo: {
+        transitionTimingFunction: 'ease-in-out'
+      },
+      bar: {
+        transitionTimingFunction: 'cubic-bezier(.88, 1.0, -0.67, 1.37)'
+      },
+      baz: {
+        transitionTimingFunction: 'abc'
+      }
+    }
+    styler.validate(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        foo: {
+          transitionTimingFunction: 'ease-in-out'
+        },
+        bar: {
+          transitionTimingFunction: 'cubic-bezier(0.88,1,-0.67,1.37)'
+        },
+        baz: {}
+      })
+      expect(data.log).eql([
+        {reason: 'ERROR: property value `abc` is not supported for `transition-timing-function` (supported values are: `linear`|`ease`|`ease-in`|`ease-out`|`ease-in-out`|`cubic-bezier(n,n,n,n)`)'}
+      ])
+      done()
+    })
+  })
+
+  it('parse unknown', function (done) {
+    var code = {
+      foo: {
+        background: '#ff0000',
+        abc: '123',
+        def: '456px',
+        ghi: '789pt',
+        AbcDef: '456',
+        abcDef: 'abc'
+      }
+    }
+    styler.validate(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({
+        foo: {
+          background: '#ff0000',
+          abc: 123,
+          def: '456px',
+          ghi: '789pt',
+          AbcDef: 456,
+          abcDef: 'abc'
+        }
+      })
+      expect(data.log).eql([
+        {reason: 'WARNING: `background` is not a standard property name (may not be supported), suggest `background-color`'},
+        {reason: 'WARNING: `abc` is not a standard property name (may not be supported)'},
+        {reason: 'WARNING: `def` is not a standard property name (may not be supported)'},
+        {reason: 'WARNING: `ghi` is not a standard property name (may not be supported)'},
+        {reason: 'WARNING: `-abc-def` is not a standard property name (may not be supported)'},
+        {reason: 'WARNING: `abc-def` is not a standard property name (may not be supported)'}
+      ])
+      done()
+    })
+  })
+
+  it('parse complex style code', function (done) {
+    var code = {
+      foo: {
+        color: 'red',
+        WebkitTransform: 'rotate(90deg)',
+        width: '200px'
+      }
+    }
+    styler.validate(code, function (err, data) {
+      expect(err).is.undefined
+      expect(data).is.an.object
+      expect(data.jsonStyle).eql({foo: {color: '#FF0000', WebkitTransform: 'rotate(90deg)', width: '200px'}})
+      expect(data.log).eql([
+        {reason: 'NOTE: property value `red` is autofixed to `#FF0000`'},
+        {reason: 'WARNING: `-webkit-transform` is not a standard property name (may not be supported)'}
+      ])
+      done()
+    })
+  })
+})