rn-css 1.11.6 → 1.11.8

package/dist/cssToRN/convert.d.ts

@@ -34,7 +34,11 @@ export declare function placeContent(value: string): {
     justifyContent: string;
 };
 export declare function background(value: string): {
-    backgroundColor: string | undefined;
+    backgroundColor: string;
+    background: string;
+} | {
+    backgroundColor: string;
+    background?: undefined;
 };
 export declare function textDecoration(value: string): {
     textDecorationLine: string;
@@ -46,7 +50,7 @@ export declare function transform(value: string): {
 };
 export declare function font(value: string): Style;
 /** Parses a css value for the side of an element (border-width, margin, padding) */
-export declare function sideValue<T extends 'padding' | 'margin' | 'border'>(prefixKey: T, value: string, postFix?: T extends 'border' ? 'Width' | 'Style' | 'Color' | '' : ''): {
+export declare function sideValue<T extends 'padding' | 'margin' | 'border' | 'outline'>(prefixKey: T, value: string, postFix?: T extends 'border' | 'outline' ? 'Width' | 'Style' | 'Color' | '' : ''): {
     [x: string]: string;
 };
 /** Parses a css value for the corner of an element (border-radius) */

package/dist/cssToRN/convert.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cornerValue = exports.sideValue = exports.font = exports.transform = exports.textDecoration = exports.background = exports.placeContent = exports.flexFlow = exports.flex = exports.shadow = exports.borderLike = exports.border = void 0;
+const react_native_1 = require("../react-native");
 /**
  * Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min(.
  * Optionally accept "auto" value (for margins)
@@ -134,10 +135,10 @@ function placeContent(value) {
 }
 exports.placeContent = placeContent;
 function background(value) {
-    const values = value.split(/\s+/mg);
-    const color = values.pop();
-    // The background-color is the only one that we support and it's the last value
-    return { backgroundColor: isColor(color) ? color : 'transparent' };
+    const values = value.match(/(linear-gradient\(|url\().*?\)|[^\s]+/mg) || [];
+    const backgroundColor = values.reverse().find(isColor) || 'transparent';
+    // We support everything on web
+    return react_native_1.Platform.OS === 'web' ? { backgroundColor, background: value } : { backgroundColor };
 }
 exports.background = background;
 function textDecoration(value) {
@@ -264,6 +265,8 @@ function isColor(value) {
         return false;
     if (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl'))
         return true;
+    if (react_native_1.Platform.OS === 'web' && value.match(/^\s*linear-gradient\(.*\)/s))
+        return true;
     const CSS_COLOR_NAMES = [
         'aliceblue',
         'antiquewhite',

package/dist/cssToRN/index.js

@@ -96,6 +96,11 @@ function cssChunkToStyle(css) {
             case 'borderWidth':
                 Object.assign(result, (0, convert_1.sideValue)('border', value, key.split('border').pop()));
                 break;
+            case 'outlineStyle':
+            case 'outlineColor':
+            case 'outlineWidth':
+                Object.assign(result, (0, convert_1.sideValue)('outline', value, key.split('outline').pop()));
+                break;
             case 'background':
                 Object.assign(result, (0, convert_1.background)(value));
                 break;
@@ -133,6 +138,9 @@ function cssChunkToStyle(css) {
                 else
                     Object.assign(result, (0, convert_1.shadow)(key === 'boxShadow' ? 'shadow' : key, value));
                 break;
+            case 'userSelect':
+                Object.assign(result, { userSelect: value, WebkitUserSelect: value });
+                break;
             // Other keys don't require any special treatment
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore

package/package.json

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

package/src/cssToRN/convert.ts

@@ -1,3 +1,4 @@
+import { Platform } from '../react-native'
 import type { Style, Transform } from '../types'
 
 /**
@@ -117,10 +118,10 @@ export function placeContent (value: string) {
 }
 
 export function background (value: string) {
-  const values = value.split(/\s+/mg)
-  const color = values.pop()
-  // The background-color is the only one that we support and it's the last value
-  return { backgroundColor: isColor(color) ? color : 'transparent' }
+  const values = value.match(/(linear-gradient\(|url\().*?\)|[^\s]+/mg) || []
+  const backgroundColor = values.reverse().find(isColor) || 'transparent'
+  // We support everything on web
+  return Platform.OS === 'web' ? { backgroundColor, background: value } : { backgroundColor }
 }
 
 export function textDecoration (value: string) {
@@ -205,7 +206,7 @@ export function font (value: string) {
 }
 
 /** Parses a css value for the side of an element (border-width, margin, padding) */
-export function sideValue <T extends 'padding' | 'margin' | 'border'> (prefixKey: T, value: string, postFix: T extends 'border' ? 'Width' | 'Style' | 'Color' | '' : '' = ''): { [x: string]: string} {
+export function sideValue <T extends 'padding' | 'margin' | 'border' | 'outline'> (prefixKey: T, value: string, postFix: T extends 'border' | 'outline' ? 'Width' | 'Style' | 'Color' | '' : '' = ''): { [x: string]: string} {
   if (value === 'none') return sideValue(prefixKey, '0', postFix)
   const [top = value, right = top, bottom = top, left = right] = findNumbers(value, prefixKey === 'margin').numbers
   return {
@@ -230,6 +231,7 @@ export function cornerValue (prefixKey: 'border', value: string, postFix: 'Radiu
 function isColor (value?: string) {
   if (!value) return false
   if (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl')) return true
+  if (Platform.OS === 'web' && value.match(/^\s*linear-gradient\(.*\)/s)) return true
   const CSS_COLOR_NAMES = [
     'aliceblue',
     'antiquewhite',

package/src/cssToRN/index.ts

@@ -93,6 +93,11 @@ function cssChunkToStyle (css: string) {
       case 'borderWidth':
         Object.assign(result, sideValue('border', value, key.split('border').pop() as '' | 'Width' | 'Style' | 'Color'))
         break
+      case 'outlineStyle':
+      case 'outlineColor':
+      case 'outlineWidth':
+        Object.assign(result, sideValue('outline', value, key.split('outline').pop() as '' | 'Width' | 'Style' | 'Color'))
+        break
       case 'background':
         Object.assign(result, background(value))
         break
@@ -128,6 +133,9 @@ function cssChunkToStyle (css: string) {
         // We need to replace boxShadow by shadow
         else Object.assign(result, shadow(key === 'boxShadow' ? 'shadow' : key, value))
         break
+      case 'userSelect':
+        Object.assign(result, { userSelect: value, WebkitUserSelect: value })
+        break
       // Other keys don't require any special treatment
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore