1var chai = require('chai') 2var sinon = require('sinon') 3var sinonChai = require('sinon-chai') 4var expect = chai.expect 5chai.use(sinonChai) 6 7var styler = require('../') 8 9describe('parse', function () { 10 11 it('parse normal style code', function (done) { 12 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}' 13 styler.parse(code, function (err, data) { 14 expect(err).is.undefined 15 expect(data).is.an.object 16 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'}}) 17 expect(data.log).eql([ 18 {line: 1, column: 1, reason: 'ERROR: Selector `html` is not supported. Weex only support single-classname selector'}, 19 {line: 3, column: 7, reason: 'NOTE: property value `red` is autofixed to `#FF0000`'}, 20 {line: 3, column: 60, reason: 'WARNING: `-webkit-transform` is not a standard property name (may not be supported)'}, 21 {line: 5, column: 7, reason: 'WARNING: `background` is not a standard property name (may not be supported), suggest `background-color`'} 22 ]) 23 done() 24 }) 25 }) 26 27 it('parse and fix prop value', function (done) { 28 var code = '.foo {font-size: 200px;}' 29 styler.parse(code, function (err, data) { 30 expect(err).is.undefined 31 expect(data).is.an.object 32 expect(data.jsonStyle).eql({foo: {fontSize: '200px'}}) 33 done() 34 }) 35 }) 36 37 it('parse and ensure number type value', function (done) { 38 var code = '.foo {line-height: 40;}\n\n .bar {line-height: 20px;}' 39 styler.parse(code, function (err, data) { 40 expect(err).is.undefined 41 expect(data).is.an.object 42 expect(data.jsonStyle).eql({foo: {lineHeight: 40}, bar: {lineHeight: '20px'}}) 43 done() 44 }) 45 }) 46 47 it('handle complex class definition', function (done) { 48 var code = '.foo, .bar {font-size: 20;}\n\n .foo {color: #ff5000;}\n\n .bar {color: #000000;}' 49 styler.parse(code, function (err, data) { 50 expect(err).is.undefined 51 expect(data).is.an.object 52 expect(data.jsonStyle).eql({ 53 foo: {fontSize: 20, color: '#ff5000'}, 54 bar: {fontSize: 20, color: '#000000'} 55 }) 56 done() 57 }) 58 }) 59 60 it('handle more complex class definition', function (done) { 61 var code = '.foo, .bar {font-size: 20; color: #000000}\n\n .foo, .bar, .baz {color: #ff5000; height: 30;}' 62 styler.parse(code, function (err, data) { 63 expect(err).is.undefined 64 expect(data).is.an.object 65 expect(data.jsonStyle).eql({ 66 foo: {fontSize: 20, color: '#ff5000', height: 30}, 67 bar: {fontSize: 20, color: '#ff5000', height: 30}, 68 baz: {color: '#ff5000', height: 30} 69 }) 70 done() 71 }) 72 }) 73 74 it('parse transition', function (done) { 75 var code = '.foo {transition-property: margin-top; transition-duration: 300ms; transition-delay: 0.2s; transition-timing-function: ease-in;}' 76 styler.parse(code, function (err, data) { 77 expect(err).is.undefined 78 expect(data).is.an.object 79 expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'marginTop', duration: 300, delay: 200, timingFunction: 'ease-in'}}) 80 expect(data.jsonStyle.foo).eql({ 81 transitionDelay: 200, 82 transitionDuration: 300, 83 transitionProperty: "marginTop", 84 transitionTimingFunction: "ease-in" 85 }) 86 expect(data.log).eql([ 87 {line: 1, column: 40, reason: 'NOTE: property value `300ms` is autofixed to `300`'}, 88 {line: 1, column: 68, reason: 'NOTE: property value `0.2s` is autofixed to `200`'} 89 ]) 90 done() 91 }) 92 }) 93 94 it('parse transition transform', function (done) { 95 var code = '.foo {transition-property: transform; transition-duration: 300ms; transition-delay: 0.2s; transition-timing-function: ease-in-out;}' 96 styler.parse(code, function (err, data) { 97 expect(err).is.undefined 98 expect(data).is.an.object 99 expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'transform', duration: 300, delay: 200, timingFunction: 'ease-in-out'}}) 100 expect(data.jsonStyle.foo).eql({ 101 transitionDelay: 200, 102 transitionDuration: 300, 103 transitionProperty: "transform", 104 transitionTimingFunction: "ease-in-out" 105 }) 106 done() 107 }) 108 }) 109 110 it('parse multi transition properties', function (done) { 111 var code = '.foo {transition-property: margin-top, height; transition-duration: 300ms; transition-delay: 0.2s; transition-timing-function: ease-in-out;}' 112 styler.parse(code, function (err, data) { 113 expect(err).is.undefined 114 expect(data).is.an.object 115 expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'marginTop,height', duration: 300, delay: 200, timingFunction: 'ease-in-out'}}) 116 expect(data.jsonStyle.foo).eql({ 117 transitionDelay: 200, 118 transitionDuration: 300, 119 transitionProperty: "marginTop,height", 120 transitionTimingFunction: "ease-in-out" 121 }) 122 done() 123 }) 124 }) 125 126 it('parse complex transition', function (done) { 127 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;}' 128 styler.parse(code, function (err, data) { 129 expect(err).is.undefined 130 expect(data).is.an.object 131 expect(data.jsonStyle['@TRANSITION']).eql({ 132 foo: {property: 'marginTop', duration: 300, delay: 200, timingFunction: 'ease-in'}, 133 bar: {property: 'marginTop', duration: 300, delay: 200, timingFunction: 'ease-in'} 134 }) 135 expect(data.jsonStyle.foo).eql({ 136 fontSize: 20, color: '#ff5000', height: 30, 137 transitionDelay: 200, 138 transitionDuration: 300, 139 transitionProperty: "marginTop", 140 transitionTimingFunction: "ease-in" 141 }) 142 expect(data.jsonStyle.bar).eql({ 143 color: '#ff5000', height: 30, 144 transitionDelay: 200, 145 transitionDuration: 300, 146 transitionProperty: "marginTop", 147 transitionTimingFunction: "ease-in" 148 }) 149 expect(data.log).eql([ 150 {line: 3, column: 75, reason: 'NOTE: property value `300ms` is autofixed to `300`'}, 151 {line: 3, column: 103, reason: 'NOTE: property value `0.2s` is autofixed to `200`'} 152 ]) 153 done() 154 }) 155 }) 156 157 it('parse transition shorthand', function (done) { 158 var code = '.foo {font-size: 20; transition: margin-top 500ms ease-in-out 1s}' 159 styler.parse(code, function (err, data) { 160 expect(err).is.undefined 161 expect(data).is.an.object 162 expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'marginTop', duration: 500, delay: 1000, timingFunction: 'ease-in-out' }}) 163 expect(data.jsonStyle.foo).eql({ 164 fontSize: 20, 165 transitionDelay: 1000, 166 transitionDuration: 500, 167 transitionProperty: "marginTop", 168 transitionTimingFunction: "ease-in-out" 169 }) 170 expect(data.log).eql([ 171 {line: 1, column: 22, reason: 'NOTE: property value `500ms` is autofixed to `500`'}, 172 {line: 1, column: 22, reason: 'NOTE: property value `1s` is autofixed to `1000`'} 173 ]) 174 done() 175 }) 176 }) 177 178 it.skip('override transition shorthand', function (done) { 179 var code = '.foo {font-size: 32px; transition: margin-top 500ms ease-in-out 1s; transition-duration: 300ms}' 180 styler.parse(code, function (err, data) { 181 expect(err).is.undefined 182 expect(data).is.an.object 183 expect(data.jsonStyle['@TRANSITION']).eql({foo: {property: 'marginTop', duration: 300, delay: 1000, timingFunction: 'ease-in-out' }}) 184 expect(data.jsonStyle.foo).eql({ 185 fontSize: 32, 186 transitionDelay: 1000, 187 transitionDuration: 300, 188 transitionProperty: "marginTop", 189 transitionTimingFunction: "ease-in-out" 190 }) 191 done() 192 }) 193 }) 194 195 it('parse padding & margin shorthand', function (done) { 196 var code = '.foo { padding: 20px; margin: 30px 40; } .bar { margin: 10px 20 30; padding: 10 20px 30px 40;}' 197 styler.parse(code, function (err, data) { 198 expect(err).is.undefined 199 expect(data).is.an.object 200 expect(data.jsonStyle.foo).eql({ 201 paddingTop: '20px', 202 paddingRight: '20px', 203 paddingBottom: '20px', 204 paddingLeft: '20px', 205 marginTop: '30px', 206 marginRight: 40, 207 marginBottom: '30px', 208 marginLeft: 40 209 }) 210 expect(data.jsonStyle.bar).eql({ 211 paddingTop: 10, 212 paddingRight: '20px', 213 paddingBottom: '30px', 214 paddingLeft: 40, 215 marginTop: '10px', 216 marginRight: 20, 217 marginBottom: 30, 218 marginLeft: 20 219 }) 220 done() 221 }) 222 }) 223 224 it('override padding & margin shorthand', function (done) { 225 var code = '.foo { padding: 20px; padding-left: 30px; } .bar { margin: 10px 20; margin-bottom: 30px;}' 226 styler.parse(code, function (err, data) { 227 expect(err).is.undefined 228 expect(data).is.an.object 229 expect(data.jsonStyle.foo).eql({ 230 paddingTop: '20px', 231 paddingRight: '20px', 232 paddingBottom: '20px', 233 paddingLeft: '30px' 234 }) 235 expect(data.jsonStyle.bar).eql({ 236 marginTop: '10px', 237 marginRight: 20, 238 marginBottom: '30px', 239 marginLeft: 20 240 }) 241 done() 242 }) 243 }) 244 245 it('handle pseudo class', function (done) { 246 var code = '.class-a {color: #0000ff;} .class-a:last-child:focus {color: #ff0000;}' 247 styler.parse(code, function (err, data) { 248 expect(err).is.undefined 249 expect(data).is.an.object 250 expect(data.jsonStyle).eql({ 251 'class-a': { 252 color: '#0000ff', 253 'color:last-child:focus': '#ff0000' 254 } 255 }) 256 done() 257 }) 258 }) 259 260 it('handle iconfont', function (done) { 261 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");}' 262 styler.parse(code, function (err, data) { 263 expect(err).is.undefined 264 expect(data).is.an.object 265 expect(data.jsonStyle).eql({ 266 '@FONT-FACE': [ 267 {fontFamily: 'font-family-name-1', src: 'url("font file url 1-1") format("truetype")'}, 268 {fontFamily: 'font-family-name-2', src: 'url("font file url 2-1") format("truetype"), url("font file url 2-2") format("woff")'} 269 ] 270 }) 271 done() 272 }) 273 }) 274 275 it('handle syntax error', function (done) { 276 var code = 'asdf' 277 styler.parse(code, function (err, data) { 278 expect(err).is.an.array 279 expect(err[0].toString()).eql('Error: undefined:1:5: missing \'{\'') 280 expect(err[0].reason).eql('missing \'{\'') 281 expect(err[0].filename).eql(undefined) 282 expect(err[0].line).eql(1) 283 expect(err[0].column).eql(5) 284 expect(err[0].source).eql('') 285 expect(data.log).eql([{line: 1, column: 5, reason: 'ERROR: undefined:1:5: missing \'{\''}]) 286 done() 287 }) 288 }) 289}) 290