taro-css-to-react-native 3.5.0-canary.1 → 3.5.0

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

@@ -9,7 +9,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
 var SYMBOL_MATCH = 'SYMBOL_MATCH';
 

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

@@ -3,22 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.getPropertyName = exports.getStylesForProperty = exports.transformRawValue = void 0;
-
-var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+exports.transformRawValue = exports.getStylesForProperty = exports.getPropertyName = exports["default"] = void 0;
 
 var _camelize = _interopRequireDefault(require("camelize"));
 
-var _index = _interopRequireDefault(require("./transforms/index"));
+var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
 
 var _TokenStream = _interopRequireDefault(require("./TokenStream"));
 
+var _index = _interopRequireDefault(require("./transforms/index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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;

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

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tokens = exports.regExpToken = void 0;
 
-var _postcssValueParser = require("postcss-value-parser");
-
 var _cssColorKeywords = _interopRequireDefault(require("css-color-keywords"));
 
+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;
   return node.value.replace(/\\([0-9a-f]{1,6})(?:\s|$)/gi, function (match, charCode) {
@@ -37,10 +38,11 @@ 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) {
@@ -54,15 +56,39 @@ var valueForTypeToken = function valueForTypeToken(type) {
   };
 };
 
+var functionValueForTypeToken = function functionValueForTypeToken(type) {
+  return function (node) {
+    if (node.type === type) {
+      // handle rgb(a) function value
+      if (/^rgba?$/i.test(node.value)) {
+        var result = node.nodes.filter(function (token) {
+          return token.type === 'word';
+        }).map(function (token) {
+          return token.value;
+        });
+        return "".concat(node.value, "(").concat(result.join(', '), ")");
+      }
+    }
+
+    return null;
+  };
+};
+
 var regExpToken = function regExpToken(regExp) {
   var transform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : String;
   return function (node) {
+    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;
@@ -82,6 +108,7 @@ var tokens = {
     return node.type === 'div' && node.value === ',';
   }),
   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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.borderWidth = exports.borderTop = exports.borderRight = exports.borderRadius = exports.borderLeft = exports.borderColor = exports.borderBottom = exports.border = void 0;
+
+var _tokenTypes = require("../tokenTypes");
+
+var _util = require("./util");
+
+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; }
+
+var WORD = _tokenTypes.tokens.WORD,
+    FUNC = _tokenTypes.tokens.FUNC,
+    COLOR = _tokenTypes.tokens.COLOR,
+    LENGTH = _tokenTypes.tokens.LENGTH,
+    UNSUPPORTED_LENGTH_UNIT = _tokenTypes.tokens.UNSUPPORTED_LENGTH_UNIT;
+
+function borderDirectionFactory() {
+  var _anyOrderFactory;
+
+  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'
+  }), _defineProperty(_anyOrderFactory, "".concat(prefix, "Style"), {
+    tokens: [(0, _tokenTypes.regExpToken)(/^(solid|dashed|dotted)$/)],
+    "default": 'solid'
+  }), _anyOrderFactory));
+}
+
+var border = borderDirectionFactory();
+exports.border = border;
+var borderTop = borderDirectionFactory('Top');
+exports.borderTop = borderTop;
+var borderRight = borderDirectionFactory('Right');
+exports.borderRight = borderRight;
+var borderBottom = borderDirectionFactory('Bottom');
+exports.borderBottom = borderBottom;
+var borderLeft = borderDirectionFactory('Left');
+exports.borderLeft = borderLeft;
+var borderColor = (0, _util.directionFactory)({
+  types: [WORD, FUNC],
+  prefix: 'border',
+  suffix: 'Color'
+});
+exports.borderColor = borderColor;
+var borderRadius = (0, _util.directionFactory)({
+  directions: ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'],
+  prefix: 'border',
+  suffix: 'Radius'
+});
+exports.borderRadius = borderRadius;
+var borderWidth = (0, _util.directionFactory)({
+  prefix: 'border',
+  suffix: 'Width'
+});
+exports.borderWidth = borderWidth;

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

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _fontFamily = _interopRequireDefault(require("./fontFamily"));
-
 var _tokenTypes = require("../tokenTypes");
 
+var _fontFamily = _interopRequireDefault(require("./fontFamily"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var SPACE = _tokenTypes.tokens.SPACE,

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

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _tokenTypes = require("../tokenTypes");
 
+var _border = require("./border");
+
 var _boxShadow = _interopRequireDefault(require("./boxShadow"));
 
 var _flex = _interopRequireDefault(require("./flex"));
@@ -15,12 +17,12 @@ var _font = _interopRequireDefault(require("./font"));
 
 var _fontFamily = _interopRequireDefault(require("./fontFamily"));
 
-var _textShadow = _interopRequireDefault(require("./textShadow"));
-
 var _textDecoration = _interopRequireDefault(require("./textDecoration"));
 
 var _textDecorationLine = _interopRequireDefault(require("./textDecorationLine"));
 
+var _textShadow = _interopRequireDefault(require("./textShadow"));
+
 var _transform = _interopRequireDefault(require("./transform"));
 
 var _util = require("./util");
@@ -43,34 +45,6 @@ var background = function background(tokenStream) {
   };
 };
 
-var border = (0, _util.anyOrderFactory)({
-  borderWidth: {
-    tokens: [LENGTH, UNSUPPORTED_LENGTH_UNIT],
-    "default": 1
-  },
-  borderColor: {
-    tokens: [COLOR],
-    "default": 'black'
-  },
-  borderStyle: {
-    tokens: [(0, _tokenTypes.regExpToken)(/^(solid|dashed|dotted)$/)],
-    "default": 'solid'
-  }
-});
-var borderColor = (0, _util.directionFactory)({
-  types: [WORD],
-  prefix: 'border',
-  suffix: 'Color'
-});
-var borderRadius = (0, _util.directionFactory)({
-  directions: ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'],
-  prefix: 'border',
-  suffix: 'Radius'
-});
-var borderWidth = (0, _util.directionFactory)({
-  prefix: 'border',
-  suffix: 'Width'
-});
 var margin = (0, _util.directionFactory)({
   types: [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO],
   prefix: 'margin'
@@ -102,10 +76,14 @@ var shadowOffset = (0, _util.shadowOffsetFactory)();
 var textShadowOffset = (0, _util.shadowOffsetFactory)();
 var _default = {
   background: background,
-  border: border,
-  borderColor: borderColor,
-  borderRadius: borderRadius,
-  borderWidth: borderWidth,
+  border: _border.border,
+  borderTop: _border.borderTop,
+  borderRight: _border.borderRight,
+  borderBottom: _border.borderBottom,
+  borderLeft: _border.borderLeft,
+  borderColor: _border.borderColor,
+  borderRadius: _border.borderRadius,
+  borderWidth: _border.borderWidth,
   boxShadow: _boxShadow["default"],
   flex: _flex["default"],
   flexFlow: flexFlow,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.parseShadow = exports.shadowOffsetFactory = exports.anyOrderFactory = exports.directionFactory = void 0;
+exports.shadowOffsetFactory = exports.parseShadow = exports.directionFactory = exports.anyOrderFactory = void 0;
 
 var _tokenTypes = require("../tokenTypes");
 

package/dist/index.js

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports["default"] = void 0;
 Object.defineProperty(exports, "transformCSS", {
   enumerable: true,
   get: function get() {
     return _cssToReactNative["default"];
   }
 });
-exports["default"] = void 0;
+
+var _parse = _interopRequireDefault(require("css/lib/parse"));
 
 var _cssMediaquery = _interopRequireDefault(require("css-mediaquery"));
 
 var _cssToReactNative = _interopRequireDefault(require("./css-to-react-native"));
 
-var _parse = _interopRequireDefault(require("css/lib/parse"));
-
 var _features = require("./transforms/media-queries/features");
 
 var _types = require("./transforms/media-queries/types");
@@ -53,7 +53,8 @@ var transformDecls = function transformDecls(styles, declarations, result) {
     var isUnsupportedUnit = unsupportedUnitRe.test(value);
 
     if (property === 'line-height' && !isLengthUnit && !isViewportUnit && !isPercent && !isUnsupportedUnit) {
-      throw new Error("Failed to parse declaration \"".concat(property, ": ").concat(value, "\""));
+      // ignore invalid value avoid throw error cause app crash
+      continue;
     }
 
     if (!result.__viewportUnits && isViewportUnit) {
@@ -62,8 +63,13 @@ var transformDecls = function transformDecls(styles, declarations, result) {
     // do not be wrapped by scalePx2dp function
 
 
-    if (isLengthUnit && typeof options.scalable === 'boolean' && !options.scalable && /(\d+)px/.test(value)) {
-      value = value.replace(/(\d+)px/, '$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/, '');
     }
 
     if (shorthandBorderProps.indexOf(property) > -1) {

package/dist/transforms/media-queries/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mediaQueryTypes = exports.reactNativeMediaQueryTypes = exports.cssnextMediaQueryTypes = exports.defaultTypes = void 0;
+exports.reactNativeMediaQueryTypes = exports.mediaQueryTypes = exports.defaultTypes = exports.cssnextMediaQueryTypes = void 0;
 var defaultTypes = ['all', 'braille', 'embossed', 'handheld', 'print', 'projection', 'screen', 'speech', 'tty', 'tv'];
 exports.defaultTypes = defaultTypes;
 var cssnextMediaQueryTypes = ['pointer', 'hover', 'block-overflow'];

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,20 +1,16 @@
 {
   "name": "taro-css-to-react-native",
   "description": "Convert CSS text to a React Native stylesheet object",
-  "version": "3.5.0-canary.1",
+  "version": "3.5.0",
   "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"
   },
-  "scripts": {
-    "build": "babel src --ignore *.spec.js --out-dir ./dist",
-    "test": "jest"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NervJS/taro.git"
@@ -47,15 +43,6 @@
       "<rootDir>/node_modules"
     ]
   },
-  "lint-staged": {
-    "*.{js,json,md}": [
-      "prettier --write",
-      "git add"
-    ]
-  },
-  "prettier": {
-    "trailingComma": "all"
-  },
   "files": [
     "dist",
     "src",
@@ -63,5 +50,8 @@
     "CHANGELOG.md",
     "README.md"
   ],
-  "gitHead": "c61624d2f763e6d31e67d6cf9c564efc8b0d0887"
-}
+  "scripts": {
+    "build": "babel src --ignore *.spec.js --out-dir ./dist",
+    "test": "jest"
+  }
+}

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

@@ -1,23 +1,29 @@
 /* eslint-disable no-param-reassign */
-import parse from 'postcss-value-parser'
 import camelizeStyleName from 'camelize'
-import transforms from './transforms/index'
+import parse from 'postcss-value-parser'
+
 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 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 => {
+export const transformRawValue = (input) => {
   const value = input.trim()
 
   const numberMatch = value.match(numberOrLengthRe)
   if (numberMatch !== null) {
     const num = Number(numberMatch[1])
-    if (/(\d+)px/.test(value)) {
+    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
@@ -47,7 +53,9 @@ const checkBaseTransformShorthandValue = (propName, inputValue) => {
   try {
     return baseTransformShorthandValue(propName, inputValue)
   } catch (e) {
-    throw new Error(`${e.message} Failed to parse declaration "${propName}: ${inputValue}"`)
+    throw new Error(
+      `${e.message} Failed to parse declaration "${propName}: ${inputValue}"`,
+    )
   }
 }
 
@@ -58,11 +66,15 @@ const transformShorthandValue =
 
 export const getStylesForProperty = (propName, inputValue, allowShorthand) => {
   const isRawValue = allowShorthand === false || !(propName in transforms)
-  const propValue = isRawValue ? transformRawValue(inputValue) : transformShorthandValue(propName, inputValue.trim())
-  return propValue && propValue.$merge ? propValue.$merge : { [propName]: propValue }
+  const propValue = isRawValue
+    ? transformRawValue(inputValue)
+    : transformShorthandValue(propName, inputValue.trim())
+  return propValue && propValue.$merge
+    ? propValue.$merge
+    : { [propName]: propValue }
 }
 
-export const getPropertyName = propName => {
+export const getPropertyName = (propName) => {
   const isCustomProp = /^--\w+/.test(propName)
   if (isCustomProp) {
     return propName
@@ -75,5 +87,8 @@ export default (rules, shorthandBlacklist = []) =>
     const propertyName = getPropertyName(rule[0])
     const value = rule[1]
     const allowShorthand = shorthandBlacklist.indexOf(propertyName) === -1
-    return Object.assign(accum, getStylesForProperty(propertyName, value, allowShorthand))
+    return Object.assign(
+      accum,
+      getStylesForProperty(propertyName, value, allowShorthand),
+    )
   }, {})

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

@@ -1,20 +1,25 @@
-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 => {
+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(/\\([0-9a-f]{1,6})(?:\s|$)/gi, (match, charCode) =>
+      String.fromCharCode(parseInt(charCode, 16)),
+    )
     .replace(/\\/g, '')
 }
 
 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' &&
-    (hexColorRe.test(node.value) || node.value in cssColorKeywords || node.value === 'transparent')
+    (hexColorRe.test(node.value) ||
+      node.value in cssColorKeywords ||
+      node.value === 'transparent')
   ) {
     return node.value
   } else if (node.type === 'function' && cssFunctionNameRe.test(node.value)) {
@@ -29,34 +34,58 @@ 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+)?)$/
 // 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 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
 
-export const regExpToken = (regExp, transform = String) => node => {
-  if (node.type !== 'word') return null
+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)
 
-  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
+      return `${node.value}(${result.join(', ')})`
+    }
   }
+  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 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 === ','),
+  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),
@@ -67,5 +96,5 @@ export const tokens = {
   IDENT: regExpToken(identRe),
   STRING: matchString,
   COLOR: matchColor,
-  LINE: regExpToken(/^(none|underline|line-through)$/i)
+  LINE: regExpToken(/^(none|underline|line-through)$/i),
 }

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

@@ -0,0 +1,46 @@
+import { regExpToken, tokens } from '../tokenTypes'
+import { anyOrderFactory, directionFactory } from './util'
+
+const { WORD, FUNC, COLOR, LENGTH, UNSUPPORTED_LENGTH_UNIT } = tokens
+
+function borderDirectionFactory (direction = '') {
+  const prefix = `border${direction}`
+  return anyOrderFactory({
+    [`${prefix}Width`]: {
+      tokens: [LENGTH, UNSUPPORTED_LENGTH_UNIT],
+      default: 1,
+    },
+    [`${prefix}Color`]: {
+      tokens: [COLOR],
+      default: 'black',
+    },
+    [`${prefix}Style`]: {
+      tokens: [regExpToken(/^(solid|dashed|dotted)$/)],
+      default: 'solid',
+    },
+  })
+}
+
+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 borderColor = directionFactory({
+  types: [WORD, FUNC],
+  prefix: 'border',
+  suffix: 'Color',
+})
+
+export const borderRadius = directionFactory({
+  directions: ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'],
+  prefix: 'border',
+  suffix: 'Radius',
+})
+
+export const borderWidth = directionFactory({
+  prefix: 'border',
+  suffix: 'Width',
+})

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

@@ -1,5 +1,5 @@
-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)$/)
@@ -11,7 +11,7 @@ const defaultFontStyle = 'normal'
 const defaultFontWeight = 'normal'
 const defaultFontVariant = []
 
-export default tokenStream => {
+export default (tokenStream) => {
   let fontStyle
   let fontWeight
   let fontVariant
@@ -25,9 +25,15 @@ export default tokenStream => {
       /* pass */
     } 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
@@ -41,7 +47,10 @@ export default tokenStream => {
 
   if (tokenStream.matches(SLASH)) {
     if (tokenStream.matches(NUMBER)) {
-      const size = typeof fontSize === 'string' ? fontSize.replace(/scalePx2dp\((\d+)\)/, '$1') : fontSize
+      const size =
+        typeof fontSize === 'string'
+          ? fontSize.replace(/scalePx2dp\((\d+)\)/, '$1')
+          : fontSize
       lineHeight = size * tokenStream.lastValue
     } else {
       lineHeight = tokenStream.expect(LENGTH, UNSUPPORTED_LENGTH_UNIT)

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

@@ -1,75 +1,57 @@
 import { regExpToken, tokens } from '../tokenTypes'
+import {
+  border,
+  borderBottom,
+  borderColor,
+  borderLeft,
+  borderRadius,
+  borderRight,
+  borderTop,
+  borderWidth,
+} from './border'
 import boxShadow from './boxShadow'
 import flex from './flex'
 import font from './font'
 import fontFamily from './fontFamily'
-import textShadow from './textShadow'
 import textDecoration from './textDecoration'
 import textDecorationLine from './textDecorationLine'
+import textShadow from './textShadow'
 import transform from './transform'
-import { directionFactory, anyOrderFactory, shadowOffsetFactory } from './util'
+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 => ({
-  $merge: { backgroundColor: tokenStream.expect(COLOR) }
+const background = (tokenStream) => ({
+  $merge: { backgroundColor: tokenStream.expect(COLOR) },
 })
-const border = anyOrderFactory({
-  borderWidth: {
-    tokens: [LENGTH, UNSUPPORTED_LENGTH_UNIT],
-    default: 1
-  },
-  borderColor: {
-    tokens: [COLOR],
-    default: 'black'
-  },
-  borderStyle: {
-    tokens: [regExpToken(/^(solid|dashed|dotted)$/)],
-    default: 'solid'
-  }
-})
-const borderColor = directionFactory({
-  types: [WORD],
-  prefix: 'border',
-  suffix: 'Color'
-})
-const borderRadius = directionFactory({
-  directions: ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'],
-  prefix: 'border',
-  suffix: 'Radius'
-})
-const borderWidth = directionFactory({ prefix: 'border', suffix: 'Width' })
 const margin = directionFactory({
   types: [LENGTH, UNSUPPORTED_LENGTH_UNIT, PERCENT, AUTO],
-  prefix: 'margin'
+  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 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,
   border,
+  borderTop,
+  borderRight,
+  borderBottom,
+  borderLeft,
   borderColor,
   borderRadius,
   borderWidth,
@@ -87,5 +69,5 @@ export default {
   textShadowOffset,
   textDecoration,
   textDecorationLine,
-  transform
+  transform,
 }

package/src/index.js

@@ -1,9 +1,10 @@
+import parseCSS from 'css/lib/parse'
 import mediaQuery from 'css-mediaquery'
+
 import transformCSS from './css-to-react-native'
-import parseCSS from 'css/lib/parse'
 import {
   dimensionFeatures,
-  mediaQueryFeatures
+  mediaQueryFeatures,
 } from './transforms/media-queries/features'
 import { mediaQueryTypes } from './transforms/media-queries/types'
 import { remToPx } from './transforms/rem'
@@ -15,12 +16,13 @@ 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 unsupportedUnitRe =
+  /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|cm|mm|in|pc|pt))$/
 const shorthandBorderProps = [
   'border-radius',
   'border-width',
   'border-color',
-  'border-style'
+  'border-style',
 ]
 
 const transformDecls = (styles, declarations, result, options = {}) => {
@@ -43,7 +45,8 @@ const transformDecls = (styles, declarations, result, options = {}) => {
       !isPercent &&
       !isUnsupportedUnit
     ) {
-      throw new Error(`Failed to parse declaration "${property}: ${value}"`)
+      // ignore invalid value avoid throw error cause app crash
+      continue
     }
 
     if (!result.__viewportUnits && isViewportUnit) {
@@ -52,12 +55,15 @@ 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 (
-      isLengthUnit &&
       typeof options.scalable === 'boolean' &&
       !options.scalable &&
       /(\d+)px/.test(value)
     ) {
-      value = value.replace(/(\d+)px/, '$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/, '')
     }
 
     if (shorthandBorderProps.indexOf(property) > -1) {
@@ -99,7 +105,7 @@ const transform = (css, options) => {
 
           if (isAlreadyDefinedAsClass) {
             throw new Error(
-              `Failed to parse :export block because a CSS class in the same file is already using the name "${property}"`
+              `Failed to parse :export block because a CSS class in the same file is already using the name "${property}"`,
             )
           }
 
@@ -132,12 +138,12 @@ const transform = (css, options) => {
     ) {
       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}"`)
         }
 
-        mq.expressions.forEach(e => {
+        mq.expressions.forEach((e) => {
           const mf = e.modifier ? `${e.modifier}-${e.feature}` : e.feature
           const val = e.value ? `: ${e.value}` : ''
 
@@ -150,7 +156,7 @@ const transform = (css, options) => {
             lengthRe.test(e.value) === false
           ) {
             throw new Error(
-              `Failed to parse media query expression "(${mf}${val})"`
+              `Failed to parse media query expression "(${mf}${val})"`,
             )
           }
         })
@@ -182,8 +188,6 @@ const transform = (css, options) => {
   return result
 }
 
-export {
-  transformCSS
-}
+export { transformCSS }
 
 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()