taro-css-to-react-native 3.4.11 → 3.4.14

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;

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

@@ -11,6 +11,7 @@ var _cssColorKeywords = _interopRequireDefault(require("css-color-keywords"));
 
 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

@@ -12,6 +12,7 @@ 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;
@@ -44,7 +45,7 @@ exports.borderBottom = borderBottom;
 var borderLeft = borderDirectionFactory('Left');
 exports.borderLeft = borderLeft;
 var borderColor = (0, _util.directionFactory)({
-  types: [WORD],
+  types: [WORD, FUNC],
   prefix: 'border',
   suffix: 'Color'
 });

package/dist/index.js

@@ -65,6 +65,11 @@ var transformDecls = function transformDecls(styles, declarations, result) {
 
     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/package.json

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

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

@@ -5,7 +5,7 @@ import transforms from './transforms/index'
 import TokenStream from './TokenStream'
 
 // 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
@@ -17,7 +17,12 @@ export const transformRawValue = input => {
   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

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import { stringify } from 'postcss-value-parser'
 import cssColorKeywords from 'css-color-keywords'
 
@@ -29,15 +30,30 @@ 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 valueForTypeToken = type => node => (node.type === type ? node.value : 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)
+
+      return `${node.value}(${result.join(', ')})`
+    }
+  }
+  return null
+}
+
 export const regExpToken = (regExp, transform = String) => node => {
   if (node.type !== 'word') return null
 
@@ -45,7 +61,12 @@ export const regExpToken = (regExp, transform = String) => node => {
   if (match === null) return null
 
   const value = transform(match[1])
-  if (/(\d+)px/.test(node.value)) {
+  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
@@ -57,6 +78,7 @@ export const tokens = {
   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),

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

@@ -3,6 +3,7 @@ import { directionFactory, anyOrderFactory } from './util'
 
 const {
   WORD,
+  FUNC,
   COLOR,
   LENGTH,
   UNSUPPORTED_LENGTH_UNIT
@@ -34,7 +35,7 @@ export const borderBottom = borderDirectionFactory('Bottom')
 export const borderLeft = borderDirectionFactory('Left')
 
 export const borderColor = directionFactory({
-  types: [WORD],
+  types: [WORD, FUNC],
   prefix: 'border',
   suffix: 'Color'
 })

package/src/index.js

@@ -59,6 +59,10 @@ const transformDecls = (styles, declarations, result, options = {}) => {
     ) {
       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) {
       // transform single value shorthand border properties back to