weex-styler - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

index.js

@@ -7,2 +7,21 @@ 'use strict'
 
+// padding & margin shorthand parsing
+function convertLengthShorthand (rule, prop) {
+  for (var i = 0; i < rule.declarations.length; i++) {
+    var declaration = rule.declarations[i]
+    if (declaration.property === prop) {
+      var values =  declaration.value.split(/\s+/)
+      // values[0] = values[0] || 0
+      values[1] = values[1] || values[0]
+      values[2] = values[2] || values[0]
+      values[3] = values[3] || values[1]
+      rule.declarations.splice(i, 1)
+      rule.declarations.splice(i, 0, {type: 'declaration', property: prop + '-left', value: values[3], position: declaration.position})
+      rule.declarations.splice(i, 0, {type: 'declaration', property: prop + '-bottom', value: values[2], position: declaration.position})
+      rule.declarations.splice(i, 0, {type: 'declaration', property: prop + '-right', value: values[1], position: declaration.position})
+      rule.declarations.splice(i, 0, {type: 'declaration', property: prop + '-top', value: values[0], position: declaration.position})
+      // break
+    }
+  }
+}
 
@@ -51,7 +70,7 @@ /**
               if (match) {
-                match[1] && rule.declarations.push({type: 'declaration', property: 'transition-property', value: match[1], position: declaration.position})
-                match[2] && rule.declarations.push({type: 'declaration', property: 'transition-duration', value: match[2], position: declaration.position})
-                match[3] && rule.declarations.push({type: 'declaration', property: 'transition-timing-function', value: match[3], position: declaration.position})
-                match[4] && rule.declarations.push({type: 'declaration', property: 'transition-delay', value: match[4], position: declaration.position})
                 rule.declarations.splice(i, 1)
+                match[4] && rule.declarations.push(i, 0, {type: 'declaration', property: 'transition-delay', value: match[4], position: declaration.position})
+                match[3] && rule.declarations.push(i, 0, {type: 'declaration', property: 'transition-timing-function', value: match[3], position: declaration.position})
+                match[2] && rule.declarations.push(i, 0, {type: 'declaration', property: 'transition-duration', value: match[2], position: declaration.position})
+                match[1] && rule.declarations.push(i, 0, {type: 'declaration', property: 'transition-property', value: match[1], position: declaration.position})
                 break
@@ -62,2 +81,6 @@ }
 
+          // padding & margin shorthand parsing
+          convertLengthShorthand(rule, 'padding')
+          convertLengthShorthand(rule, 'margin')
+
           rule.declarations.forEach(function (declaration) {
@@ -64,0 +87,0 @@ var subType = declaration.type

lib/validator.js

@@ -219,2 +219,47 @@ var util = require('./util')
  * the values below is valid
+ * - number {1,4}
+ * - number + 'px' {1,4}
+ *
+ * @param {string} v
+ * @return {function} a function to return
+ * - value: number|null
+ * - reason(k, v, result)
+ */
+var SHORTHAND_LENGTH_VALIDATOR = function SHORTHAND_LENGTH_VALIDATOR(v) {
+  v = (v || '').toString()
+  var value = []
+  var reason = []
+  var results = v.split(/\s+/).map(LENGTH_VALIDATOR)
+  for (var i = 0; i < results.length; ++i) {
+    var res = results[i]
+    if (!res.value) {
+      value = null
+      reason = res.reason
+      break
+    }
+    value.push(res.value)
+    reason.push(res.reason)
+  }
+
+  if (!value) {
+    return {
+      value: value,
+      reason: reason
+    }
+  } else {
+    return {
+      value: value.join(' '),
+      reason: function (k, v, result) {
+        return reason.map(function (res) {
+          if (typeof res === 'function') {
+            return res(k, v, result)
+          }
+        }).join('\n')
+      }
+    }
+  }
+}
+
+/**
+ * the values below is valid
  * - hex color value (#xxxxxx or #xxx)
@@ -342,8 +387,6 @@ * - basic and extended color keywords in CSS spec
   v = (v || '').toString()
-  v = util.hyphenedToCamelCase(v)
+  v = v.split(/\s*,\s*/).map(util.hyphenedToCamelCase).join(',')
 
-  for (var prop in validatorMap) {
-    if (prop === v) {
-      return {value: v}
-    }
+  if (v.split(/\s*,\s*/).every(p => !!validatorMap[p])) {
+    return {value: v}
   }
@@ -470,3 +513,3 @@
     height: LENGTH_VALIDATOR,
-    padding: LENGTH_VALIDATOR,
+    padding: SHORTHAND_LENGTH_VALIDATOR,
     paddingLeft: LENGTH_VALIDATOR,
@@ -476,3 +519,3 @@ paddingRight: LENGTH_VALIDATOR,
     paddingBottom: LENGTH_VALIDATOR,
-    margin: LENGTH_VALIDATOR,
+    margin: SHORTHAND_LENGTH_VALIDATOR,
     marginLeft: LENGTH_VALIDATOR,
@@ -479,0 +522,0 @@ marginRight: LENGTH_VALIDATOR,

package.json

 {
   "name": "weex-styler",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Weex <style> transformer",
@@ -5,0 +5,0 @@ "main": "index.js",

test/parse.js

@@ -82,2 +82,8 @@ var chai = require('chai')
       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([
@@ -91,2 +97,18 @@ {line: 1, column: 40, reason: 'NOTE: property value `300ms` is autofixed to `300`'},
 
+  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) {
@@ -137,4 +159,4 @@ 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;}'
       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`'}
+        {line: 1, column: 22, reason: 'NOTE: property value `1s` is autofixed to `1000`'},
+        {line: 1, column: 22, reason: 'NOTE: property value `500ms` is autofixed to `500`'}
       ])
@@ -145,2 +167,69 @@ 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: 20,
+        paddingRight: 20,
+        paddingBottom: 20,
+        paddingLeft: 20,
+        marginTop: 30,
+        marginRight: 40,
+        marginBottom: 30,
+        marginLeft: 40
+      })
+      expect(data.jsonStyle.bar).eql({
+        paddingTop: 10,
+        paddingRight: 20,
+        paddingBottom: 30,
+        paddingLeft: 40,
+        marginTop: 10,
+        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: 20,
+        paddingRight: 20,
+        paddingBottom: 20,
+        paddingLeft: 30
+      })
+      expect(data.jsonStyle.bar).eql({
+        marginTop: 10,
+        marginRight: 20,
+        marginBottom: 30,
+        marginLeft: 20
+      })
+      done()
+    })
+  })
+
   it('handle pseudo class', function (done) {
@@ -147,0 +236,0 @@ var code = '.class-a {color: #0000ff;} .class-a:last-child:focus {color: #ff0000;}'

test/validate.js

@@ -34,3 +34,2 @@ var chai = require('chai')
         paddingLeft: '300',
-        margin: '10.5em',
         borderWidth: '1pt',
@@ -48,3 +47,2 @@ left: '0',
         paddingLeft: 300,
-        margin: 10.5,
         borderWidth: '1pt',
@@ -56,3 +54,2 @@ left: 0,
         {reason: 'NOTE: unit `px` is not supported and property value `200px` is autofixed to `200`'},
-        {reason: 'NOTE: unit `em` is not supported and property value `10.5em` is autofixed to `10.5`'},
         {reason: 'NOTE: unit `px` is not supported and property value `0px` is autofixed to `0`'},
@@ -259,2 +256,5 @@ {reason: 'ERROR: property value `asdf` is not supported for `margin-right` (only number and pixel values are supported)'}
       },
+      foobar: {
+        transitionProperty: 'margin-top, height'
+      },
       baz: {
@@ -274,2 +274,5 @@ transitionProperty: 'abc'
         },
+        foobar: {
+          transitionProperty: 'marginTop,height'
+        },
         baz: {}
@@ -276,0 +279,0 @@ })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54721

increased by10.45%

Lines of code

1518

increased by11.05%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes