rn-css 1.5.2 → 1.5.5

package/dist/convertUnits.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertValue = exports.parseValue = void 0;
 const maths_1 = require("./cssToRN/maths");
+const react_native_1 = require("react-native");
 /** Take a css value like 12em and return [12, 'em'] */
 function parseValue(value) {
     // Match a single unit
-    const unit = value.match(/([+-]?\b\d+(\.\d+)?)([a-z]+\b|%)/i);
+    const unit = value.match(/([+-]?\b\d+(\.\d+)?)([a-z]+\b|%)?/i);
     return [parseFloat(unit[1]), unit[3]];
 }
 exports.parseValue = parseValue;
@@ -21,6 +22,8 @@ function convertValue(key, value, units) {
     // Percentage values need to rely on an other unit as reference
     const finalUnits = { ...units };
     if (value.includes('%')) {
+        if (react_native_1.Platform.OS === 'web')
+            return value;
         if (['marginTop', 'marginBottom', 'translateY'].includes(key))
             finalUnits['%'] = units.height / 100;
         else if (['marginLeft', 'marginRight', 'translateX'].includes(key))

package/dist/styleComponent.js

@@ -17,7 +17,7 @@ const styleMap = {};
 // We use this to share value within the component (Theme, Translation, whatever)
 exports.SharedValue = react_1.default.createContext(undefined);
 function buildCSSString(chunks, functs, props, shared) {
-    let computedString = chunks.map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? functs[i]({ ...props, shared, theme: shared }) : functs[i]])).flat().join('');
+    let computedString = chunks.map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? functs[i]({ shared, theme: shared, ...props }) : functs[i]])).flat().join('');
     if (props.rnCSS)
         computedString += props.rnCSS.replace(/=/gm, ':') + ';';
     return computedString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.5.2",
+  "version": "1.5.5",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",
@@ -39,14 +39,14 @@
     "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
-    "jest": "^27.4.5",
+    "jest": "^27.5.1",
     "lint-staged": "^12.1.2",
-    "metro-react-native-babel-preset": "^0.66.2",
+    "metro-react-native-babel-preset": "^0.70.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-native": "^0.66.4",
+    "react-native": "^0.68.0",
     "react-native-typescript-transformer": "^1.2.13",
-    "react-native-web": "^0.17.5",
+    "react-native-web": "^0.17.7",
     "react-test-renderer": "17.0.2",
     "release-it": "^14.11.8",
     "ts-jest": "^27.1.1",

package/src/convertUnits.ts

@@ -1,10 +1,11 @@
 import type { PartialStyle, Transform, Units } from './types'
 import { calculate, min, max } from './cssToRN/maths'
+import { Platform } from 'react-native'
 
 /** Take a css value like 12em and return [12, 'em'] */
 export function parseValue (value: string): [number, string | undefined] {
   // Match a single unit
-  const unit = value.match(/([+-]?\b\d+(\.\d+)?)([a-z]+\b|%)/i)
+  const unit = value.match(/([+-]?\b\d+(\.\d+)?)([a-z]+\b|%)?/i)
   return [parseFloat(unit![1]), unit![3] as (string | undefined)]
 }
 
@@ -20,6 +21,7 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
   // Percentage values need to rely on an other unit as reference
   const finalUnits = { ...units }
   if (value.includes('%')) {
+    if (Platform.OS === 'web') return value
     if (['marginTop', 'marginBottom', 'translateY'].includes(key)) finalUnits['%'] = units.height! / 100
     else if (['marginLeft', 'marginRight', 'translateX'].includes(key)) finalUnits['%'] = units.width! / 100
     else if (key.startsWith('border') && key.endsWith('Radius')) finalUnits['%'] = (units.width! + units.height!) / 200

package/src/styleComponent.tsx

@@ -25,7 +25,7 @@ type OptionalProps = {
   style?: StyleProp<any>;
 }
 function buildCSSString<T extends { rnCSS?: string }> (chunks: TemplateStringsArray, functs: (Primitive | Functs<T>)[], props: T, shared: unknown) {
-  let computedString = chunks.map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? (functs[i] as Functs<T>)({ ...props, shared, theme: shared }) : functs[i]])).flat().join('')
+  let computedString = chunks.map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? (functs[i] as Functs<T>)({ shared, theme: shared, ...props }) : functs[i]])).flat().join('')
   if (props.rnCSS) computedString += props.rnCSS.replace(/=/gm, ':') + ';'
   return computedString
 }