taro-css-to-react-native 3.4.0 → 3.4.3

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

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.borderWidth = exports.borderRadius = exports.borderColor = exports.borderLeft = exports.borderBottom = exports.borderRight = exports.borderTop = 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,
+    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],
+  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/index.js

@@ -62,8 +62,8 @@ 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');
     }
 
     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.0",
+  "version": "3.4.3",
   "main": "dist/index.js",
   "license": "MIT",
   "dependencies": {
@@ -63,5 +63,5 @@
     "CHANGELOG.md",
     "README.md"
   ],
-  "gitHead": "a0e97bc937f878cc059f54748c9a3829fa3f4664"
+  "gitHead": "de55da7a845e9c09ba65528e74c7310e5082c2d5"
 }

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

@@ -0,0 +1,48 @@
+import { regExpToken, tokens } from '../tokenTypes'
+import { directionFactory, anyOrderFactory } from './util'
+
+const {
+  WORD,
+  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],
+  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

@@ -52,12 +52,11 @@ 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')
     }
 
     if (shorthandBorderProps.indexOf(property) > -1) {