taro-css-to-react-native 3.5.0-canary.1 → 3.5.0-theta.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,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.getPropertyName = exports.getStylesForProperty = exports.transformRawValue = void 0;
+exports.transformRawValue = exports.getStylesForProperty = exports.getPropertyName = exports["default"] = void 0;
 
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
 

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

@@ -54,6 +54,24 @@ 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) {
@@ -82,6 +100,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/index.js

@@ -23,6 +23,8 @@ var _textDecorationLine = _interopRequireDefault(require("./textDecorationLine")
 
 var _transform = _interopRequireDefault(require("./transform"));
 
+var _border = require("./border");
+
 var _util = require("./util");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -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,13 +3,13 @@
 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 _cssMediaquery = _interopRequireDefault(require("css-mediaquery"));
 
@@ -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/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-canary.1",
+  "version": "3.5.0-theta.0",
   "main": "dist/index.js",
   "license": "MIT",
   "dependencies": {
@@ -62,6 +62,5 @@
     "index.d.ts",
     "CHANGELOG.md",
     "README.md"
-  ],
-  "gitHead": "c61624d2f763e6d31e67d6cf9c564efc8b0d0887"
+  ]
 }

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

@@ -38,6 +38,20 @@ 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
 
@@ -57,6 +71,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

@@ -0,0 +1,49 @@
+import { regExpToken, tokens } from '../tokenTypes'
+import { directionFactory, anyOrderFactory } 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/index.js

@@ -7,6 +7,7 @@ import textShadow from './textShadow'
 import textDecoration from './textDecoration'
 import textDecorationLine from './textDecorationLine'
 import transform from './transform'
+import { border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius, borderWidth } from './border'
 import { directionFactory, anyOrderFactory, shadowOffsetFactory } from './util'
 
 const {
@@ -22,31 +23,6 @@ const {
 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'
@@ -70,6 +46,10 @@ const textShadowOffset = shadowOffsetFactory()
 export default {
   background,
   border,
+  borderTop,
+  borderRight,
+  borderBottom,
+  borderLeft,
   borderColor,
   borderRadius,
   borderWidth,

package/src/index.js

@@ -43,7 +43,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 +53,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) {

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.