taro-css-to-react-native 3.3.11 → 3.3.15

package/dist/css-to-react-native/TokenStream.js

@@ -25,15 +25,25 @@ var TokenStream = /*#__PURE__*/function () {
   }
 
   _createClass(TokenStream, [{
+    key: "node",
+    get: function get() {
+      return this.nodes[this.index];
+    }
+  }, {
+    key: "length",
+    get: function get() {
+      return this.nodes.length;
+    }
+  }, {
     key: "hasTokens",
     value: function hasTokens() {
-      return this.index <= this.nodes.length - 1;
+      return this.index <= this.length - 1;
     }
   }, {
     key: SYMBOL_MATCH,
     value: function value() {
       if (!this.hasTokens()) return null;
-      var node = this.nodes[this.index];
+      var node = this.node;
 
       for (var i = 0; i < arguments.length; i += 1) {
         var tokenDescriptor = i < 0 || arguments.length <= i ? undefined : arguments[i];
@@ -62,7 +72,7 @@ var TokenStream = /*#__PURE__*/function () {
   }, {
     key: "matchesFunction",
     value: function matchesFunction() {
-      var node = this.nodes[this.index];
+      var node = this.node;
       if (node.type !== 'function') return null;
       var value = new TokenStream(node.nodes, node);
       this.index += 1;
@@ -83,7 +93,9 @@ var TokenStream = /*#__PURE__*/function () {
   }, {
     key: "throw",
     value: function _throw() {
-      throw new Error("Unexpected token type: ".concat(this.nodes[this.index].type));
+      var _this$node;
+
+      throw new Error("Unexpected token type: ".concat((_this$node = this.node) === null || _this$node === void 0 ? void 0 : _this$node.type));
     }
   }, {
     key: "saveRewindPoint",

package/dist/css-to-react-native/index.js

@@ -30,7 +30,7 @@ var transformRawValue = function transformRawValue(input) {
   if (numberMatch !== null) {
     var num = Number(numberMatch[1]);
 
-    if (/px/.test(value)) {
+    if (/(\d+)px/.test(value)) {
       return "scalePx2dp(".concat(num, ")");
     } else {
       return num;

package/dist/css-to-react-native/tokenTypes.js

@@ -62,7 +62,7 @@ var regExpToken = function regExpToken(regExp) {
     if (match === null) return null;
     var value = transform(match[1]);
 
-    if (/px/.test(node.value)) {
+    if (/(\d+)px/.test(node.value)) {
       return "scalePx2dp(".concat(value, ")");
     } else {
       return value;

package/dist/css-to-react-native/transforms/flex.js

@@ -50,7 +50,7 @@ var _default = function _default(tokenStream) {
   while (partsParsed < 2 && tokenStream.hasTokens()) {
     if (partsParsed !== 0) tokenStream.expect(SPACE);
 
-    if (flexGrow === undefined && tokenStream.matches(NUMBER)) {
+    if (typeof flexGrow === 'undefined' && tokenStream.matches(NUMBER)) {
       flexGrow = tokenStream.lastValue;
       tokenStream.saveRewindPoint();
 
@@ -59,9 +59,9 @@ var _default = function _default(tokenStream) {
       } else {
         tokenStream.rewind();
       }
-    } else if (flexBasis === undefined && tokenStream.matches(LENGTH)) {
+    } else if (typeof flexBasis === 'undefined' && tokenStream.matches(LENGTH)) {
       flexBasis = tokenStream.lastValue;
-    } else if (flexBasis === undefined && tokenStream.matches(AUTO)) {
+    } else if (typeof flexBasis === 'undefined' && tokenStream.matches(AUTO)) {
       flexBasis = 'auto';
     } else {
       tokenStream["throw"]();
@@ -71,9 +71,9 @@ var _default = function _default(tokenStream) {
   }
 
   tokenStream.expectEmpty();
-  if (flexGrow === undefined) flexGrow = defaultFlexGrow;
-  if (flexShrink === undefined) flexShrink = defaultFlexShrink;
-  if (flexBasis === undefined) flexBasis = defaultFlexBasis;
+  if (typeof flexGrow === 'undefined') flexGrow = defaultFlexGrow;
+  if (typeof flexShrink === 'undefined') flexShrink = defaultFlexShrink;
+  if (typeof flexBasis === 'undefined') flexBasis = defaultFlexBasis;
   return {
     $merge: {
       flexGrow: flexGrow,

package/dist/css-to-react-native/transforms/font.js

@@ -36,11 +36,11 @@ var _default = function _default(tokenStream) {
   while (numStyleWeightVariantMatched < 3 && tokenStream.hasTokens()) {
     if (tokenStream.matches(NORMAL)) {
       /* pass */
-    } else if (fontStyle === undefined && tokenStream.matches(STYLE)) {
+    } else if (typeof fontStyle === 'undefined' && tokenStream.matches(STYLE)) {
       fontStyle = tokenStream.lastValue;
-    } else if (fontWeight === undefined && tokenStream.matches(WEIGHT)) {
+    } else if (typeof fontWeight === 'undefined' && tokenStream.matches(WEIGHT)) {
       fontWeight = tokenStream.lastValue;
-    } else if (fontVariant === undefined && tokenStream.matches(VARIANT)) {
+    } else if (typeof fontVariant === 'undefined' && tokenStream.matches(VARIANT)) {
       fontVariant = [tokenStream.lastValue];
     } else {
       break;
@@ -54,7 +54,8 @@ var _default = function _default(tokenStream) {
 
   if (tokenStream.matches(SLASH)) {
     if (tokenStream.matches(NUMBER)) {
-      lineHeight = fontSize * tokenStream.lastValue;
+      var size = typeof fontSize === 'string' ? fontSize.replace(/scalePx2dp\((\d+)\)/, '$1') : fontSize;
+      lineHeight = size * tokenStream.lastValue;
     } else {
       lineHeight = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT);
     }
@@ -62,9 +63,9 @@ var _default = function _default(tokenStream) {
 
   tokenStream.expect(SPACE);
   var fontFamily = (0, _fontFamily["default"])(tokenStream);
-  if (fontStyle === undefined) fontStyle = defaultFontStyle;
-  if (fontWeight === undefined) fontWeight = defaultFontWeight;
-  if (fontVariant === undefined) fontVariant = defaultFontVariant;
+  if (typeof fontStyle === 'undefined') fontStyle = defaultFontStyle;
+  if (typeof fontWeight === 'undefined') fontWeight = defaultFontWeight;
+  if (typeof fontVariant === 'undefined') fontVariant = defaultFontVariant;
   var out = {
     fontStyle: fontStyle,
     fontWeight: fontWeight,
@@ -72,7 +73,7 @@ var _default = function _default(tokenStream) {
     fontSize: fontSize,
     fontFamily: fontFamily
   };
-  if (lineHeight !== undefined) out.lineHeight = lineHeight;
+  if (typeof lineHeight !== 'undefined') out.lineHeight = lineHeight;
   return {
     $merge: out
   };

package/dist/css-to-react-native/transforms/textDecoration.js

@@ -24,7 +24,7 @@ var _default = function _default(tokenStream) {
   while (tokenStream.hasTokens()) {
     if (didParseFirst) tokenStream.expect(SPACE);
 
-    if (line === undefined && tokenStream.matches(LINE)) {
+    if (typeof line === 'undefined' && tokenStream.matches(LINE)) {
       var lines = [tokenStream.lastValue.toLowerCase()];
       tokenStream.saveRewindPoint();
 
@@ -37,9 +37,9 @@ var _default = function _default(tokenStream) {
       }
 
       line = lines.join(' ');
-    } else if (style === undefined && tokenStream.matches(STYLE)) {
+    } else if (typeof style === 'undefined' && tokenStream.matches(STYLE)) {
       style = tokenStream.lastValue;
-    } else if (color === undefined && tokenStream.matches(COLOR)) {
+    } else if (typeof color === 'undefined' && tokenStream.matches(COLOR)) {
       color = tokenStream.lastValue;
     } else {
       tokenStream["throw"]();
@@ -49,9 +49,9 @@ var _default = function _default(tokenStream) {
   }
 
   var $merge = {
-    textDecorationLine: line !== undefined ? line : defaultTextDecorationLine,
-    textDecorationColor: color !== undefined ? color : defaultTextDecorationColor,
-    textDecorationStyle: style !== undefined ? style : defaultTextDecorationStyle
+    textDecorationLine: typeof line !== 'undefined' ? line : defaultTextDecorationLine,
+    textDecorationColor: typeof color !== 'undefined' ? color : defaultTextDecorationColor,
+    textDecorationStyle: typeof style !== 'undefined' ? style : defaultTextDecorationStyle
   };
   return {
     $merge: $merge

package/dist/css-to-react-native/transforms/transform.js

@@ -36,7 +36,7 @@ var xyTransformFactory = function xyTransformFactory(tokenType) {
       if (functionStream.hasTokens()) {
         functionStream.expect(COMMA);
         y = functionStream.expect(tokenType);
-      } else if (valueIfOmitted !== undefined) {
+      } else if (typeof valueIfOmitted !== 'undefined') {
         y = valueIfOmitted;
       } else {
         // Assumption, if x === y, then we can omit XY

package/dist/css-to-react-native/transforms/util.js

@@ -76,7 +76,7 @@ var anyOrderFactory = function anyOrderFactory(properties) {
   return function (tokenStream) {
     var propertyNames = Object.keys(properties);
     var values = propertyNames.reduce(function (accum, propertyName) {
-      accum[propertyName] === undefined; // eslint-disable-line
+      typeof accum[propertyName] === 'undefined'; // eslint-disable-line
 
       return accum;
     }, {});
@@ -85,7 +85,7 @@ var anyOrderFactory = function anyOrderFactory(properties) {
     while (numParsed < propertyNames.length && tokenStream.hasTokens()) {
       if (numParsed) tokenStream.expect(delim);
       var matchedPropertyName = propertyNames.find(function (propertyName) {
-        return values[propertyName] === undefined && properties[propertyName].tokens.some(function (token) {
+        return typeof values[propertyName] === 'undefined' && properties[propertyName].tokens.some(function (token) {
           return tokenStream.matches(token);
         });
       });
@@ -101,7 +101,7 @@ var anyOrderFactory = function anyOrderFactory(properties) {
 
     tokenStream.expectEmpty();
     propertyNames.forEach(function (propertyName) {
-      if (values[propertyName] === undefined) {
+      if (typeof values[propertyName] === 'undefined') {
         values[propertyName] = properties[propertyName]["default"];
       }
     });
@@ -150,18 +150,33 @@ var parseShadow = function parseShadow(tokenStream) {
   while (tokenStream.hasTokens()) {
     if (didParseFirst) tokenStream.expect(SPACE);
 
-    if (offsetX === undefined && tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)) {
+    if (typeof offsetX === 'undefined' && tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)) {
       offsetX = tokenStream.lastValue;
-      tokenStream.expect(SPACE);
-      offsetY = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT);
+
+      if (tokenStream.matches(SPACE) && tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)) {
+        offsetY = tokenStream.lastValue;
+      } else {
+        offsetY = offsetX;
+        tokenStream.rewind();
+      }
+
       tokenStream.saveRewindPoint();
 
       if (tokenStream.matches(SPACE) && tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)) {
+        // blur-radius
         radius = tokenStream.lastValue;
       } else {
         tokenStream.rewind();
       }
-    } else if (color === undefined && tokenStream.matches(COLOR)) {
+
+      tokenStream.saveRewindPoint();
+
+      if (tokenStream.matches(SPACE) && tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)) {// spread-radius
+        // 兼容web写法，防止报错
+      } else {
+        tokenStream.rewind();
+      }
+    } else if (typeof color === 'undefined' && tokenStream.matches(COLOR)) {
       color = tokenStream.lastValue;
     } else {
       tokenStream["throw"]();
@@ -170,14 +185,14 @@ var parseShadow = function parseShadow(tokenStream) {
     didParseFirst = true;
   }
 
-  if (offsetX === undefined) tokenStream["throw"]();
+  if (typeof offsetX === 'undefined') tokenStream["throw"]();
   return {
     offset: {
       width: offsetX,
       height: offsetY
     },
-    radius: radius !== undefined ? radius : 0,
-    color: color !== undefined ? color : 'black'
+    radius: typeof radius !== 'undefined' ? radius : 0,
+    color: typeof color !== 'undefined' ? color : 'black'
   };
 };
 

package/dist/index.js

@@ -39,7 +39,9 @@ var percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/;
 var unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|cm|mm|in|pc|pt))$/;
 var shorthandBorderProps = ['border-radius', 'border-width', 'border-color', 'border-style'];
 
-var transformDecls = function transformDecls(styles, declarations, result, options) {
+var transformDecls = function transformDecls(styles, declarations, result) {
+  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
   for (var d in declarations) {
     var declaration = declarations[d];
     if (declaration.type !== 'declaration') continue;
@@ -60,8 +62,8 @@ var transformDecls = function transformDecls(styles, declarations, result, optio
     // do not be wrapped by scalePx2dp function
 
 
-    if (!options.scalable && isLengthUnit && /px/.test(value)) {
-      value = value.replace(/px/g, 'PX');
+    if (isLengthUnit && typeof options.scalable === 'boolean' && !options.scalable && /(\d+)px/.test(value)) {
+      value = value.replace(/(\d+)px/, '$1PX');
     }
 
     if (shorthandBorderProps.indexOf(property) > -1) {
@@ -102,7 +104,7 @@ var transform = function transform(css, options) {
         rule.declarations.forEach(function (_ref) {
           var property = _ref.property,
               value = _ref.value;
-          var isAlreadyDefinedAsClass = result[property] !== undefined && result.__exportProps[property] === undefined;
+          var isAlreadyDefinedAsClass = typeof result[property] !== 'undefined' && typeof result.__exportProps[property] === 'undefined';
 
           if (isAlreadyDefinedAsClass) {
             throw new Error("Failed to parse :export block because a CSS class in the same file is already using the name \"".concat(property, "\""));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "taro-css-to-react-native",
   "description": "Convert CSS text to a React Native stylesheet object",
-  "version": "3.3.11",
+  "version": "3.3.15",
   "main": "dist/index.js",
   "license": "MIT",
   "dependencies": {
@@ -63,5 +63,5 @@
     "CHANGELOG.md",
     "README.md"
   ],
-  "gitHead": "dad3664e58bb1fe7ab752365d9cc0d0dd444c40a"
+  "gitHead": "4a11ab9a8950f6a580e1278c160f6b4aaa8ac4f2"
 }

package/src/css-to-react-native/TokenStream.js

@@ -9,14 +9,22 @@ export default class TokenStream {
     this.rewindIndex = -1
   }
 
+  get node () {
+    return this.nodes[this.index]
+  }
+
+  get length () {
+    return this.nodes.length
+  }
+
   hasTokens () {
-    return this.index <= this.nodes.length - 1
+    return this.index <= this.length - 1
   }
 
   [SYMBOL_MATCH] (...tokenDescriptors) {
     if (!this.hasTokens()) return null
 
-    const node = this.nodes[this.index]
+    const node = this.node
 
     for (let i = 0; i < tokenDescriptors.length; i += 1) {
       const tokenDescriptor = tokenDescriptors[i]
@@ -41,7 +49,7 @@ export default class TokenStream {
   }
 
   matchesFunction () {
-    const node = this.nodes[this.index]
+    const node = this.node
     if (node.type !== 'function') return null
     const value = new TokenStream(node.nodes, node)
     this.index += 1
@@ -59,7 +67,7 @@ export default class TokenStream {
   }
 
   throw () {
-    throw new Error(`Unexpected token type: ${this.nodes[this.index].type}`)
+    throw new Error(`Unexpected token type: ${this.node?.type}`)
   }
 
   saveRewindPoint () {

package/src/css-to-react-native/index.js

@@ -17,7 +17,7 @@ export const transformRawValue = input => {
   const numberMatch = value.match(numberOrLengthRe)
   if (numberMatch !== null) {
     const num = Number(numberMatch[1])
-    if (/px/.test(value)) {
+    if (/(\d+)px/.test(value)) {
       return `scalePx2dp(${num})`
     } else {
       return num

package/src/css-to-react-native/tokenTypes.js

@@ -45,7 +45,7 @@ export const regExpToken = (regExp, transform = String) => node => {
   if (match === null) return null
 
   const value = transform(match[1])
-  if (/px/.test(node.value)) {
+  if (/(\d+)px/.test(node.value)) {
     return `scalePx2dp(${value})`
   } else {
     return value

package/src/css-to-react-native/transforms/flex.js

@@ -26,7 +26,7 @@ export default tokenStream => {
   while (partsParsed < 2 && tokenStream.hasTokens()) {
     if (partsParsed !== 0) tokenStream.expect(SPACE)
 
-    if (flexGrow === undefined && tokenStream.matches(NUMBER)) {
+    if (typeof flexGrow === 'undefined' && tokenStream.matches(NUMBER)) {
       flexGrow = tokenStream.lastValue
 
       tokenStream.saveRewindPoint()
@@ -35,9 +35,9 @@ export default tokenStream => {
       } else {
         tokenStream.rewind()
       }
-    } else if (flexBasis === undefined && tokenStream.matches(LENGTH)) {
+    } else if (typeof flexBasis === 'undefined' && tokenStream.matches(LENGTH)) {
       flexBasis = tokenStream.lastValue
-    } else if (flexBasis === undefined && tokenStream.matches(AUTO)) {
+    } else if (typeof flexBasis === 'undefined' && tokenStream.matches(AUTO)) {
       flexBasis = 'auto'
     } else {
       tokenStream.throw()
@@ -48,9 +48,9 @@ export default tokenStream => {
 
   tokenStream.expectEmpty()
 
-  if (flexGrow === undefined) flexGrow = defaultFlexGrow
-  if (flexShrink === undefined) flexShrink = defaultFlexShrink
-  if (flexBasis === undefined) flexBasis = defaultFlexBasis
+  if (typeof flexGrow === 'undefined') flexGrow = defaultFlexGrow
+  if (typeof flexShrink === 'undefined') flexShrink = defaultFlexShrink
+  if (typeof flexBasis === 'undefined') flexBasis = defaultFlexBasis
 
   return { $merge: { flexGrow, flexShrink, flexBasis } }
 }

package/src/css-to-react-native/transforms/font.js

@@ -23,11 +23,11 @@ export default tokenStream => {
   while (numStyleWeightVariantMatched < 3 && tokenStream.hasTokens()) {
     if (tokenStream.matches(NORMAL)) {
       /* pass */
-    } else if (fontStyle === undefined && tokenStream.matches(STYLE)) {
+    } else if (typeof fontStyle === 'undefined' && tokenStream.matches(STYLE)) {
       fontStyle = tokenStream.lastValue
-    } else if (fontWeight === undefined && tokenStream.matches(WEIGHT)) {
+    } else if (typeof fontWeight === 'undefined' && tokenStream.matches(WEIGHT)) {
       fontWeight = tokenStream.lastValue
-    } else if (fontVariant === undefined && tokenStream.matches(VARIANT)) {
+    } else if (typeof fontVariant === 'undefined' && tokenStream.matches(VARIANT)) {
       fontVariant = [tokenStream.lastValue]
     } else {
       break
@@ -41,7 +41,8 @@ export default tokenStream => {
 
   if (tokenStream.matches(SLASH)) {
     if (tokenStream.matches(NUMBER)) {
-      lineHeight = fontSize * tokenStream.lastValue
+      const size = typeof fontSize === 'string' ? fontSize.replace(/scalePx2dp\((\d+)\)/, '$1') : fontSize
+      lineHeight = size * tokenStream.lastValue
     } else {
       lineHeight = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
     }
@@ -51,12 +52,12 @@ export default tokenStream => {
 
   const fontFamily = parseFontFamily(tokenStream)
 
-  if (fontStyle === undefined) fontStyle = defaultFontStyle
-  if (fontWeight === undefined) fontWeight = defaultFontWeight
-  if (fontVariant === undefined) fontVariant = defaultFontVariant
+  if (typeof fontStyle === 'undefined') fontStyle = defaultFontStyle
+  if (typeof fontWeight === 'undefined') fontWeight = defaultFontWeight
+  if (typeof fontVariant === 'undefined') fontVariant = defaultFontVariant
 
   const out = { fontStyle, fontWeight, fontVariant, fontSize, fontFamily }
-  if (lineHeight !== undefined) out.lineHeight = lineHeight
+  if (typeof lineHeight !== 'undefined') out.lineHeight = lineHeight
 
   return { $merge: out }
 }

package/src/css-to-react-native/transforms/textDecoration.js

@@ -17,7 +17,7 @@ export default tokenStream => {
   while (tokenStream.hasTokens()) {
     if (didParseFirst) tokenStream.expect(SPACE)
 
-    if (line === undefined && tokenStream.matches(LINE)) {
+    if (typeof line === 'undefined' && tokenStream.matches(LINE)) {
       const lines = [tokenStream.lastValue.toLowerCase()]
 
       tokenStream.saveRewindPoint()
@@ -34,9 +34,9 @@ export default tokenStream => {
       }
 
       line = lines.join(' ')
-    } else if (style === undefined && tokenStream.matches(STYLE)) {
+    } else if (typeof style === 'undefined' && tokenStream.matches(STYLE)) {
       style = tokenStream.lastValue
-    } else if (color === undefined && tokenStream.matches(COLOR)) {
+    } else if (typeof color === 'undefined' && tokenStream.matches(COLOR)) {
       color = tokenStream.lastValue
     } else {
       tokenStream.throw()
@@ -46,11 +46,11 @@ export default tokenStream => {
   }
 
   const $merge = {
-    textDecorationLine: line !== undefined ? line : defaultTextDecorationLine,
+    textDecorationLine: typeof line !== 'undefined' ? line : defaultTextDecorationLine,
     textDecorationColor:
-      color !== undefined ? color : defaultTextDecorationColor,
+      typeof color !== 'undefined' ? color : defaultTextDecorationColor,
     textDecorationStyle:
-      style !== undefined ? style : defaultTextDecorationStyle
+      typeof style !== 'undefined' ? style : defaultTextDecorationStyle
   }
   return { $merge }
 }

package/src/css-to-react-native/transforms/transform.js

@@ -21,7 +21,7 @@ const xyTransformFactory = tokenType => (
   if (functionStream.hasTokens()) {
     functionStream.expect(COMMA)
     y = functionStream.expect(tokenType)
-  } else if (valueIfOmitted !== undefined) {
+  } else if (typeof valueIfOmitted !== 'undefined') {
     y = valueIfOmitted
   } else {
     // Assumption, if x === y, then we can omit XY

package/src/css-to-react-native/transforms/util.js

@@ -37,7 +37,7 @@ export const directionFactory = ({
 export const anyOrderFactory = (properties, delim = SPACE) => tokenStream => {
   const propertyNames = Object.keys(properties)
   const values = propertyNames.reduce((accum, propertyName) => {
-    accum[propertyName] === undefined; // eslint-disable-line
+    typeof accum[propertyName] === 'undefined'; // eslint-disable-line
     return accum
   }, {})
 
@@ -47,7 +47,7 @@ export const anyOrderFactory = (properties, delim = SPACE) => tokenStream => {
 
     const matchedPropertyName = propertyNames.find(
       propertyName =>
-        values[propertyName] === undefined &&
+        typeof values[propertyName] === 'undefined' &&
         properties[propertyName].tokens.some(token =>
           tokenStream.matches(token)
         )
@@ -65,7 +65,9 @@ export const anyOrderFactory = (properties, delim = SPACE) => tokenStream => {
   tokenStream.expectEmpty()
 
   propertyNames.forEach(propertyName => {
-    if (values[propertyName] === undefined) { values[propertyName] = properties[propertyName].default }
+    if (typeof values[propertyName] === 'undefined') {
+      values[propertyName] = properties[propertyName].default
+    }
   })
 
   return { $merge: values }
@@ -100,23 +102,41 @@ export const parseShadow = tokenStream => {
     if (didParseFirst) tokenStream.expect(SPACE)
 
     if (
-      offsetX === undefined &&
+      typeof offsetX === 'undefined' &&
       tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
     ) {
       offsetX = tokenStream.lastValue
-      tokenStream.expect(SPACE)
-      offsetY = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
+      if (
+        tokenStream.matches(SPACE) &&
+        tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
+      ) {
+        offsetY = tokenStream.lastValue
+      } else {
+        offsetY = offsetX
+        tokenStream.rewind()
+      }
 
       tokenStream.saveRewindPoint()
       if (
         tokenStream.matches(SPACE) &&
         tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
       ) {
+        // blur-radius
         radius = tokenStream.lastValue
       } else {
         tokenStream.rewind()
       }
-    } else if (color === undefined && tokenStream.matches(COLOR)) {
+      tokenStream.saveRewindPoint()
+      if (
+        tokenStream.matches(SPACE) &&
+        tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
+      ) {
+        // spread-radius
+        // 兼容web写法，防止报错
+      } else {
+        tokenStream.rewind()
+      }
+    } else if (typeof color === 'undefined' && tokenStream.matches(COLOR)) {
       color = tokenStream.lastValue
     } else {
       tokenStream.throw()
@@ -125,11 +145,11 @@ export const parseShadow = tokenStream => {
     didParseFirst = true
   }
 
-  if (offsetX === undefined) tokenStream.throw()
+  if (typeof offsetX === 'undefined') tokenStream.throw()
 
   return {
     offset: { width: offsetX, height: offsetY },
-    radius: radius !== undefined ? radius : 0,
-    color: color !== undefined ? color : 'black'
+    radius: typeof radius !== 'undefined' ? radius : 0,
+    color: typeof color !== 'undefined' ? color : 'black'
   }
 }

package/src/index.js

@@ -23,7 +23,7 @@ const shorthandBorderProps = [
   'border-style'
 ]
 
-const transformDecls = (styles, declarations, result, options) => {
+const transformDecls = (styles, declarations, result, options = {}) => {
   for (const d in declarations) {
     const declaration = declarations[d]
     if (declaration.type !== 'declaration') continue
@@ -52,11 +52,12 @@ const transformDecls = (styles, declarations, result, options) => {
     // scalable option, when it is false, transform single value 'px' unit to 'PX'
     // do not be wrapped by scalePx2dp function
     if (
-      !options.scalable &&
       isLengthUnit &&
-      /px/.test(value)
+      typeof options.scalable === 'boolean' &&
+      !options.scalable &&
+      /(\d+)px/.test(value)
     ) {
-      value = value.replace(/px/g, 'PX')
+      value = value.replace(/(\d+)px/, '$1PX')
     }
 
     if (shorthandBorderProps.indexOf(property) > -1) {
@@ -93,8 +94,8 @@ const transform = (css, options) => {
 
         rule.declarations.forEach(({ property, value }) => {
           const isAlreadyDefinedAsClass =
-            result[property] !== undefined &&
-            result.__exportProps[property] === undefined
+            typeof result[property] !== 'undefined' &&
+            typeof result.__exportProps[property] === 'undefined'
 
           if (isAlreadyDefinedAsClass) {
             throw new Error(