rn-css 1.6.9 → 1.6.12

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,12 @@ function placeContent(value) {
     return { alignContent, justifyContent };
 }
 exports.placeContent = placeContent;
+function background(value) {
+    const values = value.split(/\s+/mg);
+    // The background-color is the only one that we support and it's the last value
+    return { backgroundColor: values.pop() };
+}
+exports.background = background;
 function textDecoration(value) {
     const values = value.split(/\s+/mg);
     const result = {

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/dist/styleComponent.js

@@ -109,10 +109,8 @@ const styled = (Component) => {
                 return newProps;
             }, [finalStyle.textOverflow, onLayout, onMouseEnter, onMouseLeave, props.style, styleConvertedFromCSS]);
             react_1.default.useEffect(() => () => removeStyle(hash), [hash]);
-            // The lines below can improve perfs, but it causes the component to remount when the font size changes
-            // const currentFontSize = React.useContext(FontSizeContext)
-            // if (em !== currentFontSize) {
-            if (styleConvertedFromCSS.fontSize) {
+            // em !== parentEm alone is a bit dangerous as the component would rerender when the font size change
+            if (em !== parentEm || finalStyle.fontSize !== undefined) {
                 return react_1.default.createElement(exports.FontSizeContext.Provider, { value: em },
                     react_1.default.createElement(Component, { ref: ref, ...props, ...newProps }));
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.6.9",
+  "version": "1.6.12",
   "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,12 @@ export function placeContent (value: string) {
   return { alignContent, justifyContent }
 }
 
+export function background (value: string) {
+  const values = value.split(/\s+/mg)
+  // The background-color is the only one that we support and it's the last value
+  return { backgroundColor: values.pop() }
+}
+
 export function textDecoration (value: string) {
   const values = value.split(/\s+/mg)
   const result = {

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':

package/src/styleComponent.tsx

@@ -122,10 +122,8 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
 
       React.useEffect(() => () => removeStyle(hash), [hash])
 
-      // The lines below can improve perfs, but it causes the component to remount when the font size changes
-      // const currentFontSize = React.useContext(FontSizeContext)
-      // if (em !== currentFontSize) {
-      if (styleConvertedFromCSS.fontSize) {
+      // em !== parentEm alone is a bit dangerous as the component would rerender when the font size change
+      if (em !== parentEm || finalStyle.fontSize !== undefined) {
         return <FontSizeContext.Provider value={em}>
           <Component ref={ref} {...props} {...newProps} />
         </FontSizeContext.Provider>