taro-css-to-react-native 3.5.0-theta.1 → 3.5.1-aplha.1

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

@@ -18,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 // Note if this is wrong, you'll need to change tokenTypes.js too
-var numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?:px)?$/i;
+var numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?:px)|(?:vw$)|(?:vh$)|(?:vmin$)|(?:vmax$))?$/i;
 var boolRe = /^true|false$/i;
 var nullRe = /^null$/i;
 var undefinedRe = /^undefined$/i; // Undocumented export
@@ -29,8 +29,12 @@ var transformRawValue = function transformRawValue(input) {
 
   if (numberMatch !== null) {
     var num = Number(numberMatch[1]);
+    var unit = numberMatch[2];
+    var isViewportUnit = ['vw', 'vh', 'vmin', 'vmax'].includes(unit);
 
-    if (/(\d+)px/.test(value)) {
+    if (isViewportUnit) {
+      return "scaleVu2dp(".concat(num, ", '").concat(unit, "')");
+    } else if (/(\d+)px/.test(value)) {
       return "scalePx2dp(".concat(num, ")");
     } else {
       return num;
@@ -38,7 +42,7 @@ var transformRawValue = function transformRawValue(input) {
   }
 
   var boolMatch = input.match(boolRe);
-  if (boolMatch !== null) return boolMatch[0].toLowerCase() === "true";
+  if (boolMatch !== null) return boolMatch[0].toLowerCase() === 'true';
   var nullMatch = input.match(nullRe);
   if (nullMatch !== null) return null;
   var undefinedMatch = input.match(undefinedRe);
@@ -63,7 +67,7 @@ var checkBaseTransformShorthandValue = function checkBaseTransformShorthandValue
   }
 };
 
-var transformShorthandValue = process.env.NODE_ENV === "production" ? baseTransformShorthandValue : checkBaseTransformShorthandValue;
+var transformShorthandValue = process.env.NODE_ENV === 'production' ? baseTransformShorthandValue : checkBaseTransformShorthandValue;
 
 var getStylesForProperty = function getStylesForProperty(propName, inputValue, allowShorthand) {
   var isRawValue = allowShorthand === false || !(propName in _index["default"]);

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

@@ -11,20 +11,21 @@ var _postcssValueParser = require("postcss-value-parser");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint-disable react/display-name */
 var matchString = function matchString(node) {
-  if (node.type !== "string") return null;
+  if (node.type !== 'string') return null;
   return node.value.replace(/\\([0-9a-f]{1,6})(?:\s|$)/gi, function (match, charCode) {
     return String.fromCharCode(parseInt(charCode, 16));
-  }).replace(/\\/g, "");
+  }).replace(/\\/g, '');
 };
 
 var hexColorRe = /^(#(?:[0-9a-f]{3,4}){1,2})$/i;
 var cssFunctionNameRe = /^(rgba?|hsla?|hwb|lab|lch|gray|color)$/;
 
 var matchColor = function matchColor(node) {
-  if (node.type === "word" && (hexColorRe.test(node.value) || node.value in _cssColorKeywords["default"] || node.value === "transparent")) {
+  if (node.type === 'word' && (hexColorRe.test(node.value) || node.value in _cssColorKeywords["default"] || node.value === 'transparent')) {
     return node.value;
-  } else if (node.type === "function" && cssFunctionNameRe.test(node.value)) {
+  } else if (node.type === 'function' && cssFunctionNameRe.test(node.value)) {
     return (0, _postcssValueParser.stringify)(node);
   }
 
@@ -37,14 +38,15 @@ var identRe = /(^-?[_a-z][_a-z0-9-]*$)/i; // Note if these are wrong, you'll nee
 
 var numberRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)$/; // Note lengthRe is sneaky: you can omit units for 0
 
-var lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?=px$)|(?=Px$)|(?=PX$)|(?=pX$)))/;
-var unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|rem|vh|vw|vmin|vmax|cm|mm|in|pc|pt))$/;
+var lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?=px$)|(?=Px$)|(?=PX$)|(?=pX$)|(?=vw$)|(?=vh$)|(?=vmin$)|(?=vmax$)))/;
+var unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|rem|cm|mm|in|pc|pt))$/;
 var angleRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(?:deg|rad))$/;
 var percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/;
+var viewportUnitRe = /(\d+)(vw|vh|vmin|vmax)/;
 
 var noopToken = function noopToken(predicate) {
   return function (node) {
-    return predicate(node) ? "<token>" : null;
+    return predicate(node) ? '<token>' : null;
   };
 };
 
@@ -60,11 +62,11 @@ var functionValueForTypeToken = function functionValueForTypeToken(type) {
       // handle rgb(a) function value
       if (/^rgba?$/i.test(node.value)) {
         var result = node.nodes.filter(function (token) {
-          return token.type === "word";
+          return token.type === 'word';
         }).map(function (token) {
           return token.value;
         });
-        return "".concat(node.value, "(").concat(result.join(", "), ")");
+        return "".concat(node.value, "(").concat(result.join(', '), ")");
       }
     }
 
@@ -75,12 +77,18 @@ var functionValueForTypeToken = function functionValueForTypeToken(type) {
 var regExpToken = function regExpToken(regExp) {
   var transform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : String;
   return function (node) {
-    if (node.type !== "word") return null;
+    var _node$value$match;
+
+    if (node.type !== 'word') return null;
     var match = node.value.match(regExp);
     if (match === null) return null;
     var value = transform(match[1]);
+    var unit = (_node$value$match = node.value.match(viewportUnitRe)) === null || _node$value$match === void 0 ? void 0 : _node$value$match[2];
+    var isViewportUnit = ['vh', 'vw', 'vmin', 'vmax'].includes(unit);
 
-    if (/(\d+)px/.test(node.value)) {
+    if (isViewportUnit) {
+      return "scaleVu2dp(".concat(value, ", '").concat(unit, "')");
+    } else if (/(\d+)px/.test(node.value)) {
       return "scalePx2dp(".concat(value, ")");
     } else {
       return value;
@@ -91,16 +99,16 @@ var regExpToken = function regExpToken(regExp) {
 exports.regExpToken = regExpToken;
 var tokens = {
   SPACE: noopToken(function (node) {
-    return node.type === "space";
+    return node.type === 'space';
   }),
   SLASH: noopToken(function (node) {
-    return node.type === "div" && node.value === "/";
+    return node.type === 'div' && node.value === '/';
   }),
   COMMA: noopToken(function (node) {
-    return node.type === "div" && node.value === ",";
+    return node.type === 'div' && node.value === ',';
   }),
-  WORD: valueForTypeToken("word"),
-  FUNC: functionValueForTypeToken("function"),
+  WORD: valueForTypeToken('word'),
+  FUNC: functionValueForTypeToken('function'),
   NONE: regExpToken(noneRe),
   AUTO: regExpToken(autoRe),
   NUMBER: regExpToken(numberRe, Number),

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

@@ -20,44 +20,44 @@ var WORD = _tokenTypes.tokens.WORD,
 function borderDirectionFactory() {
   var _anyOrderFactory;
 
-  var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var prefix = "border".concat(direction);
   return (0, _util.anyOrderFactory)((_anyOrderFactory = {}, _defineProperty(_anyOrderFactory, "".concat(prefix, "Width"), {
     tokens: [LENGTH, UNSUPPORTED_LENGTH_UNIT],
     "default": 1
   }), _defineProperty(_anyOrderFactory, "".concat(prefix, "Color"), {
     tokens: [COLOR],
-    "default": "black"
+    "default": 'black'
   }), _defineProperty(_anyOrderFactory, "".concat(prefix, "Style"), {
     tokens: [(0, _tokenTypes.regExpToken)(/^(solid|dashed|dotted)$/)],
-    "default": "solid"
+    "default": 'solid'
   }), _anyOrderFactory));
 }
 
 var border = borderDirectionFactory();
 exports.border = border;
-var borderTop = borderDirectionFactory("Top");
+var borderTop = borderDirectionFactory('Top');
 exports.borderTop = borderTop;
-var borderRight = borderDirectionFactory("Right");
+var borderRight = borderDirectionFactory('Right');
 exports.borderRight = borderRight;
-var borderBottom = borderDirectionFactory("Bottom");
+var borderBottom = borderDirectionFactory('Bottom');
 exports.borderBottom = borderBottom;
-var borderLeft = borderDirectionFactory("Left");
+var borderLeft = borderDirectionFactory('Left');
 exports.borderLeft = borderLeft;
 var borderColor = (0, _util.directionFactory)({
   types: [WORD, FUNC],
-  prefix: "border",
-  suffix: "Color"
+  prefix: 'border',
+  suffix: 'Color'
 });
 exports.borderColor = borderColor;
 var borderRadius = (0, _util.directionFactory)({
-  directions: ["TopLeft", "TopRight", "BottomRight", "BottomLeft"],
-  prefix: "border",
-  suffix: "Radius"
+  directions: ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'],
+  prefix: 'border',
+  suffix: 'Radius'
 });
 exports.borderRadius = borderRadius;
 var borderWidth = (0, _util.directionFactory)({
-  prefix: "border",
-  suffix: "Width"
+  prefix: 'border',
+  suffix: 'Width'
 });
 exports.borderWidth = borderWidth;

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

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

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

@@ -47,19 +47,19 @@ var background = function background(tokenStream) {
 
 var margin = (0, _util.directionFactory)({
   types: [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO],
-  prefix: "margin"
+  prefix: 'margin'
 });
 var padding = (0, _util.directionFactory)({
-  prefix: "padding"
+  prefix: 'padding'
 });
 var flexFlow = (0, _util.anyOrderFactory)({
   flexWrap: {
     tokens: [(0, _tokenTypes.regExpToken)(/(nowrap|wrap|wrap-reverse)/)],
-    "default": "nowrap"
+    "default": 'nowrap'
   },
   flexDirection: {
     tokens: [(0, _tokenTypes.regExpToken)(/(row|row-reverse|column|column-reverse)/)],
-    "default": "row"
+    "default": 'row'
   }
 });
 

package/dist/index.js

@@ -37,14 +37,14 @@ var lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?=px|rem$))/;
 var viewportUnitRe = /^([+-]?[0-9.]+)(vh|vw|vmin|vmax)$/;
 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 shorthandBorderProps = ['border-radius', 'border-width', 'border-color', 'border-style'];
 
 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;
+    if (declaration.type !== 'declaration') continue;
     var property = declaration.property;
     var value = (0, _rem.remToPx)(declaration.value);
     var isLengthUnit = lengthRe.test(value);
@@ -52,7 +52,7 @@ var transformDecls = function transformDecls(styles, declarations, result) {
     var isPercent = percentRe.test(value);
     var isUnsupportedUnit = unsupportedUnitRe.test(value);
 
-    if (property === "line-height" && !isLengthUnit && !isViewportUnit && !isPercent && !isUnsupportedUnit) {
+    if (property === 'line-height' && !isLengthUnit && !isViewportUnit && !isPercent && !isUnsupportedUnit) {
       // ignore invalid value avoid throw error cause app crash
       continue;
     }
@@ -63,13 +63,13 @@ var transformDecls = function transformDecls(styles, declarations, result) {
     // do not be wrapped by scalePx2dp function
 
 
-    if (typeof options.scalable === "boolean" && !options.scalable && /(\d+)px/.test(value)) {
-      value = value.replace(/(\d+)px/g, "$1PX");
+    if (typeof options.scalable === 'boolean' && !options.scalable && /(\d+)px/.test(value)) {
+      value = value.replace(/(\d+)px/g, '$1PX');
     } // expect value is legal so that remove !import
 
 
     if (/!import/i.test(value)) {
-      value = value.replace(/!import/, "");
+      value = value.replace(/!import/, '');
     }
 
     if (shorthandBorderProps.indexOf(property) > -1) {
@@ -102,7 +102,7 @@ var transform = function transform(css, options) {
     var rule = rules[r];
 
     for (var s in rule.selectors) {
-      if (rule.selectors[s] === ":export") {
+      if (rule.selectors[s] === ':export') {
         if (!result.__exportProps) {
           result.__exportProps = {};
         }
@@ -110,7 +110,7 @@ var transform = function transform(css, options) {
         rule.declarations.forEach(function (_ref) {
           var property = _ref.property,
               value = _ref.value;
-          var isAlreadyDefinedAsClass = typeof result[property] !== "undefined" && typeof 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, "\""));
@@ -121,16 +121,16 @@ var transform = function transform(css, options) {
         continue;
       }
 
-      if (rule.selectors[s].indexOf(".") !== 0 || rule.selectors[s].indexOf(":") !== -1 || rule.selectors[s].indexOf("[") !== -1 || rule.selectors[s].indexOf("~") !== -1 || rule.selectors[s].indexOf(">") !== -1 || rule.selectors[s].indexOf("+") !== -1 || rule.selectors[s].indexOf(" ") !== -1) {
+      if (rule.selectors[s].indexOf('.') !== 0 || rule.selectors[s].indexOf(':') !== -1 || rule.selectors[s].indexOf('[') !== -1 || rule.selectors[s].indexOf('~') !== -1 || rule.selectors[s].indexOf('>') !== -1 || rule.selectors[s].indexOf('+') !== -1 || rule.selectors[s].indexOf(' ') !== -1) {
         continue;
       }
 
-      var selector = rule.selectors[s].replace(/^\./, "");
+      var selector = rule.selectors[s].replace(/^\./, '');
       var styles = result[selector] = result[selector] || {};
       transformDecls(styles, rule.declarations, result, options);
     }
 
-    if (rule.type === "media" && options != null && options.parseMediaQueries === true) {
+    if (rule.type === 'media' && options != null && options.parseMediaQueries === true) {
       var parsed = _cssMediaquery["default"].parse(rule.media);
 
       parsed.forEach(function (mq) {
@@ -140,7 +140,7 @@ var transform = function transform(css, options) {
 
         mq.expressions.forEach(function (e) {
           var mf = e.modifier ? "".concat(e.modifier, "-").concat(e.feature) : e.feature;
-          var val = e.value ? ": ".concat(e.value) : "";
+          var val = e.value ? ": ".concat(e.value) : '';
 
           if (_features.mediaQueryFeatures.indexOf(e.feature) === -1) {
             throw new Error("Failed to parse media query feature \"".concat(mf, "\""));
@@ -151,7 +151,7 @@ var transform = function transform(css, options) {
           }
         });
       });
-      var media = "@media " + rule.media;
+      var media = '@media ' + rule.media;
       result.__mediaQueries = result.__mediaQueries || {};
       result.__mediaQueries[media] = parsed;
 
@@ -161,7 +161,7 @@ var transform = function transform(css, options) {
         for (var _s in ruleRule.selectors) {
           result[media] = result[media] || {};
 
-          var _selector = ruleRule.selectors[_s].replace(/^\./, "");
+          var _selector = ruleRule.selectors[_s].replace(/^\./, '');
 
           var mediaStyles = result[media][_selector] = result[media][_selector] || {};
           transformDecls(mediaStyles, ruleRule.declarations, result, options);

package/dist/utils/camelCase.js

@@ -9,7 +9,7 @@ function camelCase(str) {
   // Lower cases the string
   return str.toLowerCase() // Replaces any - or _ characters with a space
   .replace(/[-_]+/g, ' ') // Removes any non alphanumeric characters
-  .replace(/[^\w\s]/g, '') // Uppercases the first character in each group immediately following a space
+  .replace(/[^\w\s]/g, '') // Uppercase the first character in each group immediately following a space
   // (delimited by spaces)
   .replace(/ (.)/g, function ($1) {
     return $1.toUpperCase();

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "taro-css-to-react-native",
   "description": "Convert CSS text to a React Native stylesheet object",
-  "version": "3.5.0-theta.1",
+  "version": "3.5.1-aplha.1",
   "main": "dist/index.js",
   "license": "MIT",
   "dependencies": {
     "camelize": "^1.0.0",
-    "css": "^2.2.4",
+    "css": "^3.0.0",
     "css-color-keywords": "^1.0.0",
     "css-mediaquery": "^0.1.2",
     "postcss-value-parser": "^3.3.0"
@@ -43,15 +43,6 @@
       "<rootDir>/node_modules"
     ]
   },
-  "lint-staged": {
-    "*.{js,json,md}": [
-      "prettier --write",
-      "git add"
-    ]
-  },
-  "prettier": {
-    "trailingComma": "all"
-  },
   "files": [
     "dist",
     "src",

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

@@ -1,89 +1,94 @@
 /* eslint-disable no-param-reassign */
-import camelizeStyleName from "camelize";
-import parse from "postcss-value-parser";
+import camelizeStyleName from 'camelize'
+import parse from 'postcss-value-parser'
 
-import TokenStream from "./TokenStream";
-import transforms from "./transforms/index";
+import TokenStream from './TokenStream'
+import transforms from './transforms/index'
 
 // Note if this is wrong, you'll need to change tokenTypes.js too
-const numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?:px)?$/i;
-const boolRe = /^true|false$/i;
-const nullRe = /^null$/i;
-const undefinedRe = /^undefined$/i;
+const numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?:px)|(?:vw$)|(?:vh$)|(?:vmin$)|(?:vmax$))?$/i
+const boolRe = /^true|false$/i
+const nullRe = /^null$/i
+const undefinedRe = /^undefined$/i
 
 // Undocumented export
-export const transformRawValue = input => {
-  const value = input.trim();
+export const transformRawValue = (input) => {
+  const value = input.trim()
 
-  const numberMatch = value.match(numberOrLengthRe);
+  const numberMatch = value.match(numberOrLengthRe)
   if (numberMatch !== null) {
-    const num = Number(numberMatch[1]);
-    if (/(\d+)px/.test(value)) {
-      return `scalePx2dp(${num})`;
+    const num = Number(numberMatch[1])
+    const unit = numberMatch[2]
+    const isViewportUnit = ['vw', 'vh', 'vmin', 'vmax'].includes(unit)
+
+    if (isViewportUnit) {
+      return `scaleVu2dp(${num}, '${unit}')`
+    } else if (/(\d+)px/.test(value)) {
+      return `scalePx2dp(${num})`
     } else {
-      return num;
+      return num
     }
   }
 
-  const boolMatch = input.match(boolRe);
-  if (boolMatch !== null) return boolMatch[0].toLowerCase() === "true";
+  const boolMatch = input.match(boolRe)
+  if (boolMatch !== null) return boolMatch[0].toLowerCase() === 'true'
 
-  const nullMatch = input.match(nullRe);
-  if (nullMatch !== null) return null;
+  const nullMatch = input.match(nullRe)
+  if (nullMatch !== null) return null
 
-  const undefinedMatch = input.match(undefinedRe);
-  if (undefinedMatch !== null) return undefined;
+  const undefinedMatch = input.match(undefinedRe)
+  if (undefinedMatch !== null) return undefined
 
-  return value;
-};
+  return value
+}
 
 const baseTransformShorthandValue = (propName, inputValue) => {
   // const ast = parse(inputValue.trim().replace(/PX|Px|pX$/g, ""));
-  const ast = parse(inputValue);
-  const tokenStream = new TokenStream(ast.nodes);
-  return transforms[propName](tokenStream);
-};
+  const ast = parse(inputValue)
+  const tokenStream = new TokenStream(ast.nodes)
+  return transforms[propName](tokenStream)
+}
 
 const checkBaseTransformShorthandValue = (propName, inputValue) => {
   try {
-    return baseTransformShorthandValue(propName, inputValue);
+    return baseTransformShorthandValue(propName, inputValue)
   } catch (e) {
     throw new Error(
       `${e.message} Failed to parse declaration "${propName}: ${inputValue}"`,
-    );
+    )
   }
-};
+}
 
 const transformShorthandValue =
-  process.env.NODE_ENV === "production"
+  process.env.NODE_ENV === 'production'
     ? baseTransformShorthandValue
-    : checkBaseTransformShorthandValue;
+    : checkBaseTransformShorthandValue
 
 export const getStylesForProperty = (propName, inputValue, allowShorthand) => {
-  const isRawValue = allowShorthand === false || !(propName in transforms);
+  const isRawValue = allowShorthand === false || !(propName in transforms)
   const propValue = isRawValue
     ? transformRawValue(inputValue)
-    : transformShorthandValue(propName, inputValue.trim());
+    : transformShorthandValue(propName, inputValue.trim())
   return propValue && propValue.$merge
     ? propValue.$merge
-    : { [propName]: propValue };
-};
+    : { [propName]: propValue }
+}
 
-export const getPropertyName = propName => {
-  const isCustomProp = /^--\w+/.test(propName);
+export const getPropertyName = (propName) => {
+  const isCustomProp = /^--\w+/.test(propName)
   if (isCustomProp) {
-    return propName;
+    return propName
   }
-  return camelizeStyleName(propName);
-};
+  return camelizeStyleName(propName)
+}
 
 export default (rules, shorthandBlacklist = []) =>
   rules.reduce((accum, rule) => {
-    const propertyName = getPropertyName(rule[0]);
-    const value = rule[1];
-    const allowShorthand = shorthandBlacklist.indexOf(propertyName) === -1;
+    const propertyName = getPropertyName(rule[0])
+    const value = rule[1]
+    const allowShorthand = shorthandBlacklist.indexOf(propertyName) === -1
     return Object.assign(
       accum,
       getStylesForProperty(propertyName, value, allowShorthand),
-    );
-  }, {});
+    )
+  }, {})

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

@@ -1,82 +1,91 @@
-import cssColorKeywords from "css-color-keywords";
-import { stringify } from "postcss-value-parser";
+/* eslint-disable react/display-name */
+import cssColorKeywords from 'css-color-keywords'
+import { stringify } from 'postcss-value-parser'
 
-const matchString = node => {
-  if (node.type !== "string") return null;
+const matchString = (node) => {
+  if (node.type !== 'string') return null
   return node.value
     .replace(/\\([0-9a-f]{1,6})(?:\s|$)/gi, (match, charCode) =>
       String.fromCharCode(parseInt(charCode, 16)),
     )
-    .replace(/\\/g, "");
-};
+    .replace(/\\/g, '')
+}
 
-const hexColorRe = /^(#(?:[0-9a-f]{3,4}){1,2})$/i;
-const cssFunctionNameRe = /^(rgba?|hsla?|hwb|lab|lch|gray|color)$/;
+const hexColorRe = /^(#(?:[0-9a-f]{3,4}){1,2})$/i
+const cssFunctionNameRe = /^(rgba?|hsla?|hwb|lab|lch|gray|color)$/
 
-const matchColor = node => {
+const matchColor = (node) => {
   if (
-    node.type === "word" &&
+    node.type === 'word' &&
     (hexColorRe.test(node.value) ||
       node.value in cssColorKeywords ||
-      node.value === "transparent")
+      node.value === 'transparent')
   ) {
-    return node.value;
-  } else if (node.type === "function" && cssFunctionNameRe.test(node.value)) {
-    return stringify(node);
+    return node.value
+  } else if (node.type === 'function' && cssFunctionNameRe.test(node.value)) {
+    return stringify(node)
   }
-  return null;
-};
+  return null
+}
 
-const noneRe = /^(none)$/i;
-const autoRe = /^(auto)$/i;
-const identRe = /(^-?[_a-z][_a-z0-9-]*$)/i;
+const noneRe = /^(none)$/i
+const autoRe = /^(auto)$/i
+const identRe = /(^-?[_a-z][_a-z0-9-]*$)/i
 // Note if these are wrong, you'll need to change index.js too
-const numberRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)$/;
+const numberRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)$/
 // Note lengthRe is sneaky: you can omit units for 0
-const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?=px$)|(?=Px$)|(?=PX$)|(?=pX$)))/;
-const unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|rem|vh|vw|vmin|vmax|cm|mm|in|pc|pt))$/;
-const angleRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(?:deg|rad))$/;
-const percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/;
+const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?=px$)|(?=Px$)|(?=PX$)|(?=pX$)|(?=vw$)|(?=vh$)|(?=vmin$)|(?=vmax$)))/
+const unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|rem|cm|mm|in|pc|pt))$/
+const angleRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(?:deg|rad))$/
+const percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/
+const viewportUnitRe = /(\d+)(vw|vh|vmin|vmax)/
 
-const noopToken = predicate => node => (predicate(node) ? "<token>" : null);
+const noopToken = (predicate) => (node) => predicate(node) ? '<token>' : null
 
-const valueForTypeToken = type => node =>
-  node.type === type ? node.value : null;
+const valueForTypeToken = (type) => (node) =>
+  node.type === type ? node.value : null
 
-const functionValueForTypeToken = type => node => {
+const functionValueForTypeToken = (type) => (node) => {
   if (node.type === type) {
     // handle rgb(a) function value
     if (/^rgba?$/i.test(node.value)) {
       const result = node.nodes
-        .filter(token => token.type === "word")
-        .map(token => token.value);
+        .filter((token) => token.type === 'word')
+        .map((token) => token.value)
 
-      return `${node.value}(${result.join(", ")})`;
+      return `${node.value}(${result.join(', ')})`
     }
   }
-  return null;
-};
+  return null
+}
 
-export const regExpToken = (regExp, transform = String) => node => {
-  if (node.type !== "word") return null;
+export const regExpToken =
+  (regExp, transform = String) =>
+    (node) => {
+      if (node.type !== 'word') return null
 
-  const match = node.value.match(regExp);
-  if (match === null) return null;
+      const match = node.value.match(regExp)
+      if (match === null) return null
 
-  const value = transform(match[1]);
-  if (/(\d+)px/.test(node.value)) {
-    return `scalePx2dp(${value})`;
-  } else {
-    return value;
-  }
-};
+      const value = transform(match[1])
+      const unit = node.value.match(viewportUnitRe)?.[2]
+      const isViewportUnit = ['vh', 'vw', 'vmin', 'vmax'].includes(unit)
+
+      if (isViewportUnit) {
+        return `scaleVu2dp(${value}, '${unit}')`
+      } else if (/(\d+)px/.test(node.value)) {
+        return `scalePx2dp(${value})`
+      } else {
+        return value
+      }
+    }
 
 export const tokens = {
-  SPACE: noopToken(node => node.type === "space"),
-  SLASH: noopToken(node => node.type === "div" && node.value === "/"),
-  COMMA: noopToken(node => node.type === "div" && node.value === ","),
-  WORD: valueForTypeToken("word"),
-  FUNC: functionValueForTypeToken("function"),
+  SPACE: noopToken((node) => node.type === 'space'),
+  SLASH: noopToken((node) => node.type === 'div' && node.value === '/'),
+  COMMA: noopToken((node) => node.type === 'div' && node.value === ','),
+  WORD: valueForTypeToken('word'),
+  FUNC: functionValueForTypeToken('function'),
   NONE: regExpToken(noneRe),
   AUTO: regExpToken(autoRe),
   NUMBER: regExpToken(numberRe, Number),
@@ -88,4 +97,4 @@ export const tokens = {
   STRING: matchString,
   COLOR: matchColor,
   LINE: regExpToken(/^(none|underline|line-through)$/i),
-};
+}

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

@@ -1,10 +1,10 @@
-import { regExpToken, tokens } from "../tokenTypes";
-import { anyOrderFactory, directionFactory } from "./util";
+import { regExpToken, tokens } from '../tokenTypes'
+import { anyOrderFactory, directionFactory } from './util'
 
-const { WORD, FUNC, COLOR, LENGTH, UNSUPPORTED_LENGTH_UNIT } = tokens;
+const { WORD, FUNC, COLOR, LENGTH, UNSUPPORTED_LENGTH_UNIT } = tokens
 
-function borderDirectionFactory(direction = "") {
-  const prefix = `border${direction}`;
+function borderDirectionFactory (direction = '') {
+  const prefix = `border${direction}`
   return anyOrderFactory({
     [`${prefix}Width`]: {
       tokens: [LENGTH, UNSUPPORTED_LENGTH_UNIT],
@@ -12,35 +12,35 @@ function borderDirectionFactory(direction = "") {
     },
     [`${prefix}Color`]: {
       tokens: [COLOR],
-      default: "black",
+      default: 'black',
     },
     [`${prefix}Style`]: {
       tokens: [regExpToken(/^(solid|dashed|dotted)$/)],
-      default: "solid",
+      default: 'solid',
     },
-  });
+  })
 }
 
-export const border = borderDirectionFactory();
+export const border = borderDirectionFactory()
 
-export const borderTop = borderDirectionFactory("Top");
-export const borderRight = borderDirectionFactory("Right");
-export const borderBottom = borderDirectionFactory("Bottom");
-export const borderLeft = borderDirectionFactory("Left");
+export const borderTop = borderDirectionFactory('Top')
+export const borderRight = borderDirectionFactory('Right')
+export const borderBottom = borderDirectionFactory('Bottom')
+export const borderLeft = borderDirectionFactory('Left')
 
 export const borderColor = directionFactory({
   types: [WORD, FUNC],
-  prefix: "border",
-  suffix: "Color",
-});
+  prefix: 'border',
+  suffix: 'Color',
+})
 
 export const borderRadius = directionFactory({
-  directions: ["TopLeft", "TopRight", "BottomRight", "BottomLeft"],
-  prefix: "border",
-  suffix: "Radius",
-});
+  directions: ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'],
+  prefix: 'border',
+  suffix: 'Radius',
+})
 
 export const borderWidth = directionFactory({
-  prefix: "border",
-  suffix: "Width",
-});
+  prefix: 'border',
+  suffix: 'Width',
+})

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

@@ -1,72 +1,72 @@
-import { regExpToken, tokens } from "../tokenTypes";
-import parseFontFamily from "./fontFamily";
+import { regExpToken, tokens } from '../tokenTypes'
+import parseFontFamily from './fontFamily'
 
-const { SPACE, LENGTH, UNSUPPORTED_LENGTH_UNIT, NUMBER, SLASH } = tokens;
-const NORMAL = regExpToken(/^(normal)$/);
-const STYLE = regExpToken(/^(italic)$/);
-const WEIGHT = regExpToken(/^([1-9]00|bold)$/);
-const VARIANT = regExpToken(/^(small-caps)$/);
+const { SPACE, LENGTH, UNSUPPORTED_LENGTH_UNIT, NUMBER, SLASH } = tokens
+const NORMAL = regExpToken(/^(normal)$/)
+const STYLE = regExpToken(/^(italic)$/)
+const WEIGHT = regExpToken(/^([1-9]00|bold)$/)
+const VARIANT = regExpToken(/^(small-caps)$/)
 
-const defaultFontStyle = "normal";
-const defaultFontWeight = "normal";
-const defaultFontVariant = [];
+const defaultFontStyle = 'normal'
+const defaultFontWeight = 'normal'
+const defaultFontVariant = []
 
-export default tokenStream => {
-  let fontStyle;
-  let fontWeight;
-  let fontVariant;
+export default (tokenStream) => {
+  let fontStyle
+  let fontWeight
+  let fontVariant
   // let fontSize;
-  let lineHeight;
+  let lineHeight
   // let fontFamily;
 
-  let numStyleWeightVariantMatched = 0;
+  let numStyleWeightVariantMatched = 0
   while (numStyleWeightVariantMatched < 3 && tokenStream.hasTokens()) {
     if (tokenStream.matches(NORMAL)) {
       /* pass */
-    } else if (typeof fontStyle === "undefined" && tokenStream.matches(STYLE)) {
-      fontStyle = tokenStream.lastValue;
+    } else if (typeof fontStyle === 'undefined' && tokenStream.matches(STYLE)) {
+      fontStyle = tokenStream.lastValue
     } else if (
-      typeof fontWeight === "undefined" &&
+      typeof fontWeight === 'undefined' &&
       tokenStream.matches(WEIGHT)
     ) {
-      fontWeight = tokenStream.lastValue;
+      fontWeight = tokenStream.lastValue
     } else if (
-      typeof fontVariant === "undefined" &&
+      typeof fontVariant === 'undefined' &&
       tokenStream.matches(VARIANT)
     ) {
-      fontVariant = [tokenStream.lastValue];
+      fontVariant = [tokenStream.lastValue]
     } else {
-      break;
+      break
     }
 
-    tokenStream.expect(SPACE);
-    numStyleWeightVariantMatched += 1;
+    tokenStream.expect(SPACE)
+    numStyleWeightVariantMatched += 1
   }
 
-  const fontSize = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT);
+  const fontSize = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
 
   if (tokenStream.matches(SLASH)) {
     if (tokenStream.matches(NUMBER)) {
       const size =
-        typeof fontSize === "string"
-          ? fontSize.replace(/scalePx2dp\((\d+)\)/, "$1")
-          : fontSize;
-      lineHeight = size * tokenStream.lastValue;
+        typeof fontSize === 'string'
+          ? fontSize.replace(/scalePx2dp\((\d+)\)/, '$1')
+          : fontSize
+      lineHeight = size * tokenStream.lastValue
     } else {
-      lineHeight = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT);
+      lineHeight = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)
     }
   }
 
-  tokenStream.expect(SPACE);
+  tokenStream.expect(SPACE)
 
-  const fontFamily = parseFontFamily(tokenStream);
+  const fontFamily = parseFontFamily(tokenStream)
 
-  if (typeof fontStyle === "undefined") fontStyle = defaultFontStyle;
-  if (typeof fontWeight === "undefined") fontWeight = defaultFontWeight;
-  if (typeof 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 (typeof lineHeight !== "undefined") out.lineHeight = lineHeight;
+  const out = { fontStyle, fontWeight, fontVariant, fontSize, fontFamily }
+  if (typeof lineHeight !== 'undefined') out.lineHeight = lineHeight
 
-  return { $merge: out };
-};
+  return { $merge: out }
+}

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

@@ -1,4 +1,4 @@
-import { regExpToken, tokens } from "../tokenTypes";
+import { regExpToken, tokens } from '../tokenTypes'
 import {
   border,
   borderBottom,
@@ -8,49 +8,42 @@ import {
   borderRight,
   borderTop,
   borderWidth,
-} from "./border";
-import boxShadow from "./boxShadow";
-import flex from "./flex";
-import font from "./font";
-import fontFamily from "./fontFamily";
-import textDecoration from "./textDecoration";
-import textDecorationLine from "./textDecorationLine";
-import textShadow from "./textShadow";
-import transform from "./transform";
-import { anyOrderFactory, directionFactory, shadowOffsetFactory } from "./util";
+} from './border'
+import boxShadow from './boxShadow'
+import flex from './flex'
+import font from './font'
+import fontFamily from './fontFamily'
+import textDecoration from './textDecoration'
+import textDecorationLine from './textDecorationLine'
+import textShadow from './textShadow'
+import transform from './transform'
+import { anyOrderFactory, directionFactory, shadowOffsetFactory } from './util'
 
-const {
-  IDENT,
-  WORD,
-  COLOR,
-  LENGTH,
-  UNSUPPORTED_LENGTH_UNIT,
-  PERCENT,
-  AUTO,
-} = tokens;
+const { IDENT, WORD, COLOR, LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO } =
+  tokens
 
-const background = tokenStream => ({
+const background = (tokenStream) => ({
   $merge: { backgroundColor: tokenStream.expect(COLOR) },
-});
+})
 const margin = directionFactory({
   types: [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO],
-  prefix: "margin",
-});
-const padding = directionFactory({ prefix: "padding" });
+  prefix: 'margin',
+})
+const padding = directionFactory({ prefix: 'padding' })
 const flexFlow = anyOrderFactory({
   flexWrap: {
     tokens: [regExpToken(/(nowrap|wrap|wrap-reverse)/)],
-    default: "nowrap",
+    default: 'nowrap',
   },
   flexDirection: {
     tokens: [regExpToken(/(row|row-reverse|column|column-reverse)/)],
-    default: "row",
+    default: 'row',
   },
-});
-const fontVariant = tokenStream => [tokenStream.expect(IDENT)];
-const fontWeight = tokenStream => tokenStream.expect(WORD); // Also match numbers as strings
-const shadowOffset = shadowOffsetFactory();
-const textShadowOffset = shadowOffsetFactory();
+})
+const fontVariant = (tokenStream) => [tokenStream.expect(IDENT)]
+const fontWeight = (tokenStream) => tokenStream.expect(WORD) // Also match numbers as strings
+const shadowOffset = shadowOffsetFactory()
+const textShadowOffset = shadowOffsetFactory()
 
 export default {
   background,
@@ -77,4 +70,4 @@ export default {
   textDecoration,
   textDecorationLine,
   transform,
-};
+}

package/src/index.js

@@ -1,153 +1,154 @@
-import parseCSS from "css/lib/parse";
-import mediaQuery from "css-mediaquery";
+import parseCSS from 'css/lib/parse'
+import mediaQuery from 'css-mediaquery'
 
-import transformCSS from "./css-to-react-native";
+import transformCSS from './css-to-react-native'
 import {
   dimensionFeatures,
   mediaQueryFeatures,
-} from "./transforms/media-queries/features";
-import { mediaQueryTypes } from "./transforms/media-queries/types";
-import { remToPx } from "./transforms/rem";
-import { allEqual } from "./utils/allEqual";
-import { camelCase } from "./utils/camelCase";
-import { sortRules } from "./utils/sortRules";
-import { values } from "./utils/values";
-
-const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?=px|rem$))/;
-const viewportUnitRe = /^([+-]?[0-9.]+)(vh|vw|vmin|vmax)$/;
-const percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/;
-const unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|cm|mm|in|pc|pt))$/;
+} from './transforms/media-queries/features'
+import { mediaQueryTypes } from './transforms/media-queries/types'
+import { remToPx } from './transforms/rem'
+import { allEqual } from './utils/allEqual'
+import { camelCase } from './utils/camelCase'
+import { sortRules } from './utils/sortRules'
+import { values } from './utils/values'
+
+const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?=px|rem$))/
+const viewportUnitRe = /^([+-]?[0-9.]+)(vh|vw|vmin|vmax)$/
+const percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/
+const unsupportedUnitRe =
+  /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|cm|mm|in|pc|pt))$/
 const shorthandBorderProps = [
-  "border-radius",
-  "border-width",
-  "border-color",
-  "border-style",
-];
+  'border-radius',
+  'border-width',
+  'border-color',
+  'border-style',
+]
 
 const transformDecls = (styles, declarations, result, options = {}) => {
   for (const d in declarations) {
-    const declaration = declarations[d];
-    if (declaration.type !== "declaration") continue;
+    const declaration = declarations[d]
+    if (declaration.type !== 'declaration') continue
 
-    const property = declaration.property;
-    let value = remToPx(declaration.value);
+    const property = declaration.property
+    let value = remToPx(declaration.value)
 
-    const isLengthUnit = lengthRe.test(value);
-    const isViewportUnit = viewportUnitRe.test(value);
-    const isPercent = percentRe.test(value);
-    const isUnsupportedUnit = unsupportedUnitRe.test(value);
+    const isLengthUnit = lengthRe.test(value)
+    const isViewportUnit = viewportUnitRe.test(value)
+    const isPercent = percentRe.test(value)
+    const isUnsupportedUnit = unsupportedUnitRe.test(value)
 
     if (
-      property === "line-height" &&
+      property === 'line-height' &&
       !isLengthUnit &&
       !isViewportUnit &&
       !isPercent &&
       !isUnsupportedUnit
     ) {
       // ignore invalid value avoid throw error cause app crash
-      continue;
+      continue
     }
 
     if (!result.__viewportUnits && isViewportUnit) {
-      result.__viewportUnits = true;
+      result.__viewportUnits = true
     }
     // scalable option, when it is false, transform single value 'px' unit to 'PX'
     // do not be wrapped by scalePx2dp function
     if (
-      typeof options.scalable === "boolean" &&
+      typeof options.scalable === 'boolean' &&
       !options.scalable &&
       /(\d+)px/.test(value)
     ) {
-      value = value.replace(/(\d+)px/g, "$1PX");
+      value = value.replace(/(\d+)px/g, '$1PX')
     }
     // expect value is legal so that remove !import
     if (/!import/i.test(value)) {
-      value = value.replace(/!import/, "");
+      value = value.replace(/!import/, '')
     }
 
     if (shorthandBorderProps.indexOf(property) > -1) {
       // transform single value shorthand border properties back to
       // shorthand form to support styling `Image`.
-      const transformed = transformCSS([[property, value]]);
-      const vals = values(transformed);
+      const transformed = transformCSS([[property, value]])
+      const vals = values(transformed)
       if (allEqual(vals)) {
-        const replacement = {};
-        replacement[camelCase(property)] = vals[0];
-        Object.assign(styles, replacement);
+        const replacement = {}
+        replacement[camelCase(property)] = vals[0]
+        Object.assign(styles, replacement)
       } else {
-        Object.assign(styles, transformed);
+        Object.assign(styles, transformed)
       }
     } else {
-      Object.assign(styles, transformCSS([[property, value]]));
+      Object.assign(styles, transformCSS([[property, value]]))
     }
   }
-};
+}
 
 const transform = (css, options) => {
-  const { stylesheet } = parseCSS(css);
-  const rules = sortRules(stylesheet.rules);
+  const { stylesheet } = parseCSS(css)
+  const rules = sortRules(stylesheet.rules)
 
-  const result = {};
+  const result = {}
 
   for (const r in rules) {
-    const rule = rules[r];
+    const rule = rules[r]
     for (const s in rule.selectors) {
-      if (rule.selectors[s] === ":export") {
+      if (rule.selectors[s] === ':export') {
         if (!result.__exportProps) {
-          result.__exportProps = {};
+          result.__exportProps = {}
         }
 
         rule.declarations.forEach(({ property, value }) => {
           const isAlreadyDefinedAsClass =
-            typeof result[property] !== "undefined" &&
-            typeof result.__exportProps[property] === "undefined";
+            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 "${property}"`,
-            );
+            )
           }
 
-          result.__exportProps[property] = value;
-        });
-        continue;
+          result.__exportProps[property] = value
+        })
+        continue
       }
 
       if (
-        rule.selectors[s].indexOf(".") !== 0 ||
-        rule.selectors[s].indexOf(":") !== -1 ||
-        rule.selectors[s].indexOf("[") !== -1 ||
-        rule.selectors[s].indexOf("~") !== -1 ||
-        rule.selectors[s].indexOf(">") !== -1 ||
-        rule.selectors[s].indexOf("+") !== -1 ||
-        rule.selectors[s].indexOf(" ") !== -1
+        rule.selectors[s].indexOf('.') !== 0 ||
+        rule.selectors[s].indexOf(':') !== -1 ||
+        rule.selectors[s].indexOf('[') !== -1 ||
+        rule.selectors[s].indexOf('~') !== -1 ||
+        rule.selectors[s].indexOf('>') !== -1 ||
+        rule.selectors[s].indexOf('+') !== -1 ||
+        rule.selectors[s].indexOf(' ') !== -1
       ) {
-        continue;
+        continue
       }
 
-      const selector = rule.selectors[s].replace(/^\./, "");
-      const styles = (result[selector] = result[selector] || {});
-      transformDecls(styles, rule.declarations, result, options);
+      const selector = rule.selectors[s].replace(/^\./, '')
+      const styles = (result[selector] = result[selector] || {})
+      transformDecls(styles, rule.declarations, result, options)
     }
 
     if (
-      rule.type === "media" &&
+      rule.type === 'media' &&
       options != null &&
       options.parseMediaQueries === true
     ) {
-      const parsed = mediaQuery.parse(rule.media);
+      const parsed = mediaQuery.parse(rule.media)
 
-      parsed.forEach(mq => {
+      parsed.forEach((mq) => {
         if (mediaQueryTypes.indexOf(mq.type) === -1) {
-          throw new Error(`Failed to parse media query type "${mq.type}"`);
+          throw new Error(`Failed to parse media query type "${mq.type}"`)
         }
 
-        mq.expressions.forEach(e => {
-          const mf = e.modifier ? `${e.modifier}-${e.feature}` : e.feature;
-          const val = e.value ? `: ${e.value}` : "";
+        mq.expressions.forEach((e) => {
+          const mf = e.modifier ? `${e.modifier}-${e.feature}` : e.feature
+          const val = e.value ? `: ${e.value}` : ''
 
           if (mediaQueryFeatures.indexOf(e.feature) === -1) {
-            throw new Error(`Failed to parse media query feature "${mf}"`);
+            throw new Error(`Failed to parse media query feature "${mf}"`)
           }
 
           if (
@@ -156,37 +157,37 @@ const transform = (css, options) => {
           ) {
             throw new Error(
               `Failed to parse media query expression "(${mf}${val})"`,
-            );
+            )
           }
-        });
-      });
+        })
+      })
 
-      const media = "@media " + rule.media;
+      const media = '@media ' + rule.media
 
-      result.__mediaQueries = result.__mediaQueries || {};
-      result.__mediaQueries[media] = parsed;
+      result.__mediaQueries = result.__mediaQueries || {}
+      result.__mediaQueries[media] = parsed
 
       for (const r in rule.rules) {
-        const ruleRule = rule.rules[r];
+        const ruleRule = rule.rules[r]
         for (const s in ruleRule.selectors) {
-          result[media] = result[media] || {};
-          const selector = ruleRule.selectors[s].replace(/^\./, "");
+          result[media] = result[media] || {}
+          const selector = ruleRule.selectors[s].replace(/^\./, '')
           const mediaStyles = (result[media][selector] =
-            result[media][selector] || {});
-          transformDecls(mediaStyles, ruleRule.declarations, result, options);
+            result[media][selector] || {})
+          transformDecls(mediaStyles, ruleRule.declarations, result, options)
         }
       }
     }
   }
 
   if (result.__exportProps) {
-    Object.assign(result, result.__exportProps);
-    delete result.__exportProps;
+    Object.assign(result, result.__exportProps)
+    delete result.__exportProps
   }
 
-  return result;
-};
+  return result
+}
 
-export { transformCSS };
+export { transformCSS }
 
-export default transform;
+export default transform

package/src/utils/camelCase.js

@@ -7,7 +7,7 @@ export function camelCase (str) {
       .replace(/[-_]+/g, ' ')
       // Removes any non alphanumeric characters
       .replace(/[^\w\s]/g, '')
-      // Uppercases the first character in each group immediately following a space
+      // Uppercase the first character in each group immediately following a space
       // (delimited by spaces)
       .replace(/ (.)/g, function ($1) {
         return $1.toUpperCase()