rn-css 1.6.10 → 1.6.13

package/dist/cssToRN/convert.d.ts

@@ -1,6 +1,6 @@
 import type { Style, Transform } from '../types';
 /** Parse a css value for border */
-export declare function border(prefixKey: 'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom', value: string): {
+export declare function border(prefixKey: 'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'outline', value: string): {
     [x: string]: string;
 };
 export declare function shadow(prefix: 'textShadow' | 'shadow', value: string): {
@@ -29,6 +29,9 @@ export declare function placeContent(value: string): {
     alignContent: string;
     justifyContent: string;
 };
+export declare function background(value: string): {
+    backgroundColor: string | undefined;
+};
 export declare function textDecoration(value: string): {
     textDecorationLine: string;
     textDecorationStyle: string;

package/dist/cssToRN/convert.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cornerValue = exports.sideValue = exports.font = exports.transform = exports.textDecoration = exports.placeContent = exports.flexFlow = exports.flex = exports.shadow = exports.border = void 0;
+exports.cornerValue = exports.sideValue = exports.font = exports.transform = exports.textDecoration = exports.background = exports.placeContent = exports.flexFlow = exports.flex = exports.shadow = exports.border = void 0;
 /** Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min( */
 function isNumber(value) {
     return value.match(/^[+-]?(\.\d|\d|calc\(|max\(|min\()/mg);
@@ -87,6 +87,13 @@ function placeContent(value) {
     return { alignContent, justifyContent };
 }
 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' };
+}
+exports.background = background;
 function textDecoration(value) {
     const values = value.split(/\s+/mg);
     const result = {
@@ -206,3 +213,160 @@ function cornerValue(prefixKey, value, postFix) {
     };
 }
 exports.cornerValue = cornerValue;
+function isColor(value) {
+    if (!value)
+        return false;
+    if (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl'))
+        return true;
+    const CSS_COLOR_NAMES = [
+        'aliceblue',
+        'antiquewhite',
+        'aqua',
+        'aquamarine',
+        'azure',
+        'beige',
+        'bisque',
+        'black',
+        'blanchedalmond',
+        'blue',
+        'blueviolet',
+        'brown',
+        'burlywood',
+        'cadetblue',
+        'chartreuse',
+        'chocolate',
+        'coral',
+        'cornflowerblue',
+        'cornsilk',
+        'crimson',
+        'cyan',
+        'darkblue',
+        'darkcyan',
+        'darkgoldenrod',
+        'darkgray',
+        'darkgrey',
+        'darkgreen',
+        'darkkhaki',
+        'darkmagenta',
+        'darkolivegreen',
+        'darkorange',
+        'darkorchid',
+        'darkred',
+        'darksalmon',
+        'darkseagreen',
+        'darkslateblue',
+        'darkslategray',
+        'darkslategrey',
+        'darkturquoise',
+        'darkviolet',
+        'deeppink',
+        'deepskyblue',
+        'dimgray',
+        'dimgrey',
+        'dodgerblue',
+        'firebrick',
+        'floralwhite',
+        'forestgreen',
+        'fuchsia',
+        'gainsboro',
+        'ghostwhite',
+        'gold',
+        'goldenrod',
+        'gray',
+        'grey',
+        'green',
+        'greenyellow',
+        'honeydew',
+        'hotpink',
+        'indianred',
+        'indigo',
+        'ivory',
+        'khaki',
+        'lavender',
+        'lavenderblush',
+        'lawngreen',
+        'lemonchiffon',
+        'lightblue',
+        'lightcoral',
+        'lightcyan',
+        'lightgoldenrodyellow',
+        'lightgray',
+        'lightgrey',
+        'lightgreen',
+        'lightpink',
+        'lightsalmon',
+        'lightseagreen',
+        'lightskyblue',
+        'lightslategray',
+        'lightslategrey',
+        'lightsteelblue',
+        'lightyellow',
+        'lime',
+        'limegreen',
+        'linen',
+        'magenta',
+        'maroon',
+        'mediumaquamarine',
+        'mediumblue',
+        'mediumorchid',
+        'mediumpurple',
+        'mediumseagreen',
+        'mediumslateblue',
+        'mediumspringgreen',
+        'mediumturquoise',
+        'mediumvioletred',
+        'midnightblue',
+        'mintcream',
+        'mistyrose',
+        'moccasin',
+        'navajowhite',
+        'navy',
+        'oldlace',
+        'olive',
+        'olivedrab',
+        'orange',
+        'orangered',
+        'orchid',
+        'palegoldenrod',
+        'palegreen',
+        'paleturquoise',
+        'palevioletred',
+        'papayawhip',
+        'peachpuff',
+        'peru',
+        'pink',
+        'plum',
+        'powderblue',
+        'purple',
+        'rebeccapurple',
+        'red',
+        'rosybrown',
+        'royalblue',
+        'saddlebrown',
+        'salmon',
+        'sandybrown',
+        'seagreen',
+        'seashell',
+        'sienna',
+        'silver',
+        'skyblue',
+        'slateblue',
+        'slategray',
+        'slategrey',
+        'snow',
+        'springgreen',
+        'steelblue',
+        'tan',
+        'teal',
+        'thistle',
+        'tomato',
+        'turquoise',
+        'violet',
+        'wheat',
+        'white',
+        'whitesmoke',
+        'yellow',
+        'yellowgreen'
+    ];
+    return CSS_COLOR_NAMES.includes(value);
+}

package/dist/cssToRN/index.js

@@ -69,6 +69,7 @@ function cssChunkToStyle(css) {
         const key = kebab2camel(rawKey.trim());
         const value = stripSpaces(rawValue.trim()); // We need this to correctly read calc() values
         switch (key) {
+            case 'outline':
             case 'border':
             case 'borderTop':
             case 'borderLeft':
@@ -80,7 +81,7 @@ function cssChunkToStyle(css) {
                 Object.assign(result, (0, convert_1.sideValue)('border', value, 'Width'));
                 break;
             case 'background':
-                Object.assign(result, { backgroundColor: value });
+                Object.assign(result, (0, convert_1.background)(value));
                 break;
             case 'padding':
             case 'margin':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.6.10",
+  "version": "1.6.13",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",

package/src/cssToRN/convert.ts

@@ -23,7 +23,7 @@ function findNumbers (value: string) {
 }
 
 /** Parse a css value for border */
-export function border (prefixKey: 'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom', value: string): { [x:string]: string } {
+export function border (prefixKey: 'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'outline', value: string): { [x:string]: string } {
   const values = value.split(/\s+/mg)
   const result = {
     [prefixKey + 'Width']: '0',
@@ -75,6 +75,13 @@ export function placeContent (value: string) {
   return { alignContent, justifyContent }
 }
 
+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' }
+}
+
 export function textDecoration (value: string) {
   const values = value.split(/\s+/mg)
   const result = {
@@ -178,3 +185,159 @@ export function cornerValue (prefixKey: 'border', value: string, postFix: 'Radiu
     [prefixKey + 'BottomRight' + postFix]: bottomRight
   }
 }
+
+function isColor (value?: string) {
+  if (!value) return false
+  if (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl')) return true
+  const CSS_COLOR_NAMES = [
+    'aliceblue',
+    'antiquewhite',
+    'aqua',
+    'aquamarine',
+    'azure',
+    'beige',
+    'bisque',
+    'black',
+    'blanchedalmond',
+    'blue',
+    'blueviolet',
+    'brown',
+    'burlywood',
+    'cadetblue',
+    'chartreuse',
+    'chocolate',
+    'coral',
+    'cornflowerblue',
+    'cornsilk',
+    'crimson',
+    'cyan',
+    'darkblue',
+    'darkcyan',
+    'darkgoldenrod',
+    'darkgray',
+    'darkgrey',
+    'darkgreen',
+    'darkkhaki',
+    'darkmagenta',
+    'darkolivegreen',
+    'darkorange',
+    'darkorchid',
+    'darkred',
+    'darksalmon',
+    'darkseagreen',
+    'darkslateblue',
+    'darkslategray',
+    'darkslategrey',
+    'darkturquoise',
+    'darkviolet',
+    'deeppink',
+    'deepskyblue',
+    'dimgray',
+    'dimgrey',
+    'dodgerblue',
+    'firebrick',
+    'floralwhite',
+    'forestgreen',
+    'fuchsia',
+    'gainsboro',
+    'ghostwhite',
+    'gold',
+    'goldenrod',
+    'gray',
+    'grey',
+    'green',
+    'greenyellow',
+    'honeydew',
+    'hotpink',
+    'indianred',
+    'indigo',
+    'ivory',
+    'khaki',
+    'lavender',
+    'lavenderblush',
+    'lawngreen',
+    'lemonchiffon',
+    'lightblue',
+    'lightcoral',
+    'lightcyan',
+    'lightgoldenrodyellow',
+    'lightgray',
+    'lightgrey',
+    'lightgreen',
+    'lightpink',
+    'lightsalmon',
+    'lightseagreen',
+    'lightskyblue',
+    'lightslategray',
+    'lightslategrey',
+    'lightsteelblue',
+    'lightyellow',
+    'lime',
+    'limegreen',
+    'linen',
+    'magenta',
+    'maroon',
+    'mediumaquamarine',
+    'mediumblue',
+    'mediumorchid',
+    'mediumpurple',
+    'mediumseagreen',
+    'mediumslateblue',
+    'mediumspringgreen',
+    'mediumturquoise',
+    'mediumvioletred',
+    'midnightblue',
+    'mintcream',
+    'mistyrose',
+    'moccasin',
+    'navajowhite',
+    'navy',
+    'oldlace',
+    'olive',
+    'olivedrab',
+    'orange',
+    'orangered',
+    'orchid',
+    'palegoldenrod',
+    'palegreen',
+    'paleturquoise',
+    'palevioletred',
+    'papayawhip',
+    'peachpuff',
+    'peru',
+    'pink',
+    'plum',
+    'powderblue',
+    'purple',
+    'rebeccapurple',
+    'red',
+    'rosybrown',
+    'royalblue',
+    'saddlebrown',
+    'salmon',
+    'sandybrown',
+    'seagreen',
+    'seashell',
+    'sienna',
+    'silver',
+    'skyblue',
+    'slateblue',
+    'slategray',
+    'slategrey',
+    'snow',
+    'springgreen',
+    'steelblue',
+    'tan',
+    'teal',
+    'thistle',
+    'tomato',
+    'turquoise',
+    'violet',
+    'wheat',
+    'white',
+    'whitesmoke',
+    'yellow',
+    'yellowgreen'
+  ]
+  return CSS_COLOR_NAMES.includes(value)
+}

package/src/cssToRN/index.ts

@@ -1,7 +1,7 @@
 import { Dimensions } from 'react-native'
 import convertStyle from '../convertStyle'
 import type { Context, PartialStyle, Style, Units } from '../types'
-import { sideValue, border, cornerValue, font, textDecoration, shadow, placeContent, flex, flexFlow, transform } from './convert'
+import { sideValue, border, cornerValue, font, textDecoration, shadow, placeContent, flex, flexFlow, transform, background } from './convert'
 import { createMedia } from './mediaQueries'
 
 function kebab2camel (string: string) {
@@ -66,6 +66,7 @@ function cssChunkToStyle (css: string) {
     const key = kebab2camel(rawKey.trim())
     const value = stripSpaces(rawValue.trim())// We need this to correctly read calc() values
     switch (key) {
+      case 'outline':
       case 'border':
       case 'borderTop':
       case 'borderLeft':
@@ -77,7 +78,7 @@ function cssChunkToStyle (css: string) {
         Object.assign(result, sideValue('border', value, 'Width'))
         break
       case 'background':
-        Object.assign(result, { backgroundColor: value })
+        Object.assign(result, background(value))
         break
       case 'padding':
       case 'margin':