taro-css-to-react-native 3.5.0-beta.6 → 3.5.0-beta.7

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 _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) {
@@ -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) {
+    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;

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.5.0-beta.6",
+  "version": "3.5.0-beta.7",
   "main": "dist/index.js",
   "license": "MIT",
   "dependencies": {

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

@@ -6,7 +6,7 @@ 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
@@ -18,7 +18,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 cssColorKeywords from 'css-color-keywords'
 import { stringify } from 'postcss-value-parser'
 
@@ -33,12 +34,11 @@ 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
 
@@ -68,7 +68,12 @@ export const regExpToken =
       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