rn-css 1.11.9 → 1.11.11

package/dist/convertUnits.js

@@ -17,7 +17,7 @@ function convertValue(key, value, units) {
         return 0;
     }
     // colors should be left untouched
-    if (value.startsWith('#'))
+    if (value.startsWith('#') || value.startsWith('linear-gradient'))
         return value;
     // Percentage values need to rely on an other unit as reference
     const finalUnits = { ...units };
@@ -26,9 +26,9 @@ function convertValue(key, value, units) {
         if (react_native_1.Platform.OS === 'web' && (!key.toLowerCase().includes('border') || key.toLowerCase().includes('radius')))
             return value;
         if (['marginTop', 'marginBottom', 'translateY'].includes(key) || key.startsWith('borderTop') || key.startsWith('borderBottom'))
-            finalUnits['%'] = units.height / 100;
+            finalUnits['%'] = (units.height || 0) / 100;
         else if (['marginLeft', 'marginRight', 'translateX'].includes(key) || key.startsWith('borderLeft') || key.startsWith('borderRight'))
-            finalUnits['%'] = units.width / 100;
+            finalUnits['%'] = (units.width || 0) / 100;
         else if (key.startsWith('border') && key.endsWith('Radius'))
             finalUnits['%'] = ((units.width || 0) + (units.height || 0)) / 200;
         else if (['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'top', 'left', 'bottom', 'right', 'flexBasis', 'rotate3d'].includes(key)) {
@@ -53,7 +53,7 @@ function convertValue(key, value, units) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         if (['deg', 'rad', 'turn', 's'].includes(unit))
             return occ; // We don't want to convert deg, rad, turn, second units
-        return val * (finalUnits[unit || 'px'] || 1) + '';
+        return val * (finalUnits[unit || 'px'] ?? 1) + '';
     });
     // We handle extra calculations (calc, min, max, parsing...)
     if (convertedValue.startsWith('calc('))

package/dist/cssToRN/convert.js

@@ -136,7 +136,9 @@ function placeContent(value) {
 exports.placeContent = placeContent;
 function background(value) {
     const values = value.match(/(linear-gradient\(|url\().*?\)|[^\s]+/mg) || [];
-    const backgroundColor = values.reverse().find(isColor) || 'transparent';
+    const backgroundColor = values.reverse().find(isColor) ||
+        (values[0]?.startsWith('linear-gradient') && values[0].split(',').map(val => val.trim()).find(isColor)) ||
+        'transparent';
     // We support everything on web
     return react_native_1.Platform.OS === 'web' ? { backgroundColor, background: value } : { backgroundColor };
 }

package/dist/styleComponent.js

@@ -26,7 +26,7 @@ function buildCSSString(chunks, functs, props, shared) {
         .map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? functs[i]({ shared, theme: shared, ...props }) : functs[i]]))
         .flat()
         // Convert the objects to string if the result is not a primitive
-        .map(chunk => typeof chunk === 'object' ? (0, rnToCss_1.default)(chunk) : chunk)
+        .map(chunk => chunk && typeof chunk === 'object' ? (0, rnToCss_1.default)(chunk) : chunk)
         .join('');
     if (props.rnCSS)
         computedString += props.rnCSS.replace(/=/gm, ':') + ';';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.11.9",
+  "version": "1.11.11",
   "exports": {
     ".": {
       "import": "./dist/index.js",

package/src/convertUnits.ts

@@ -16,15 +16,15 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
     return 0
   }
   // colors should be left untouched
-  if (value.startsWith('#')) return value
+  if (value.startsWith('#') || value.startsWith('linear-gradient')) return value
 
   // Percentage values need to rely on an other unit as reference
   const finalUnits = { ...units }
   if (value.includes('%')) {
     // Percentage is not supported on borders in web
     if (Platform.OS === 'web' && (!key.toLowerCase().includes('border') || key.toLowerCase().includes('radius'))) return value
-    if (['marginTop', 'marginBottom', 'translateY'].includes(key) || key.startsWith('borderTop') || key.startsWith('borderBottom')) finalUnits['%'] = units.height! / 100
-    else if (['marginLeft', 'marginRight', 'translateX'].includes(key) || key.startsWith('borderLeft') || key.startsWith('borderRight')) finalUnits['%'] = units.width! / 100
+    if (['marginTop', 'marginBottom', 'translateY'].includes(key) || key.startsWith('borderTop') || key.startsWith('borderBottom')) finalUnits['%'] = (units.height || 0) / 100
+    else if (['marginLeft', 'marginRight', 'translateX'].includes(key) || key.startsWith('borderLeft') || key.startsWith('borderRight')) finalUnits['%'] = (units.width || 0) / 100
     else if (key.startsWith('border') && key.endsWith('Radius')) finalUnits['%'] = ((units.width || 0) + (units.height || 0)) / 200
     else if (['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'top', 'left', 'bottom', 'right', 'flexBasis', 'rotate3d'].includes(key)) {
       if (value.startsWith('calc') || value.startsWith('max') || value.startsWith('min')) {
@@ -43,7 +43,7 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
     const [val, unit] = parseValue(occ)
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     if (['deg', 'rad', 'turn', 's'].includes(unit!)) return occ // We don't want to convert deg, rad, turn, second units
-    return val * (finalUnits[unit as keyof Units || 'px'] || 1) + ''
+    return val * (finalUnits[unit as keyof Units || 'px'] ?? 1) + ''
   })
 
   // We handle extra calculations (calc, min, max, parsing...)

package/src/cssToRN/convert.ts

@@ -119,7 +119,9 @@ export function placeContent (value: string) {
 
 export function background (value: string) {
   const values = value.match(/(linear-gradient\(|url\().*?\)|[^\s]+/mg) || []
-  const backgroundColor = values.reverse().find(isColor) || 'transparent'
+  const backgroundColor = values.reverse().find(isColor) ||
+    (values[0]?.startsWith('linear-gradient') && values[0].split(',').map(val => val.trim()).find(isColor)) ||
+    'transparent'
   // We support everything on web
   return Platform.OS === 'web' ? { backgroundColor, background: value } : { backgroundColor }
 }

package/src/styleComponent.tsx

@@ -44,7 +44,7 @@ function buildCSSString<T extends { rnCSS?: string }> (chunks: TemplateStringsAr
     .map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? (functs[i] as Functs<T>)({ shared, theme: (shared as DefaultTheme), ...props }) : functs[i]]))
     .flat()
     // Convert the objects to string if the result is not a primitive
-    .map(chunk => typeof chunk === 'object' ? rnToCSS(chunk as Partial<CompleteStyle>) : chunk)
+    .map(chunk => chunk && typeof chunk === 'object' ? rnToCSS(chunk as Partial<CompleteStyle>) : chunk)
     .join('')
   if (props.rnCSS) computedString += props.rnCSS.replace(/=/gm, ':') + ';'
   return computedString