rn-css 1.6.8 → 1.6.11

package/README.md

@@ -180,6 +180,14 @@ if(width < 70 * em) { /* Do something when width is lesser than 70em */ }
 return <View onLayout={event => setWidth(event.nativeEvent.layout.width)}>...</View>
 ```
 
+Default value for `rem` units is 16. If you want to declare another value, you can use `RemContext`:
+
+```javascript
+import { RemContext } from 'rn-css'
+...
+return <RemContext.Provider value={10}>{children}</RemContext.Provider>
+```
+
 ---
 
 ## Convert a CSS string to React-Native Style

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): {

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

package/dist/styleComponent.js

@@ -11,6 +11,7 @@ const react_native_1 = require("react-native");
 const convertStyle_1 = __importDefault(require("./convertStyle"));
 const cssToRN_1 = __importDefault(require("./cssToRN"));
 const features_1 = require("./features");
+const generateHash_1 = __importDefault(require("./generateHash"));
 exports.defaultUnits = { em: 16, vw: 1, vh: 1, vmin: 1, vmax: 1, rem: 16, px: 1, pt: 72 / 96, in: 96, pc: 9, cm: 96 / 2.54, mm: 96 / 25.4 };
 exports.RemContext = react_1.default.createContext(exports.defaultUnits.rem);
 exports.FontSizeContext = react_1.default.createContext(exports.defaultUnits.em);
@@ -22,6 +23,23 @@ function buildCSSString(chunks, functs, props, shared) {
         computedString += props.rnCSS.replace(/=/gm, ':') + ';';
     return computedString;
 }
+const styleMap = {};
+function getStyle(hash, style) {
+    const styleInfo = styleMap[hash];
+    if (styleInfo) {
+        styleInfo.usage++;
+        return styleInfo.style;
+    }
+    else {
+        const sheet = react_native_1.StyleSheet.create({ [hash]: style });
+        return (styleMap[hash] = { style: sheet[hash], usage: 1 }).style;
+    }
+}
+function removeStyle(hash) {
+    styleMap[hash].usage--;
+    if (styleMap[hash].usage <= 0)
+        delete styleMap[hash];
+}
 const styled = (Component) => {
     const styledComponent = (chunks, ...functs) => {
         const ForwardRefComponent = react_1.default.forwardRef((props, ref) => {
@@ -33,7 +51,7 @@ const styled = (Component) => {
             const rnStyle = react_1.default.useMemo(() => (0, cssToRN_1.default)(css), [css]);
             const { needsLayout, needsHover } = react_1.default.useMemo(() => ({
                 // needsFontSize: !!css.match(/\b(\d+)(\.\d+)?em\b/)
-                // needsScreenSize: !!cssString.current.match(/\b(\d+)(\.\d+)?v([hw]|min|max)\b/) || !!rnStyle.media,
+                // needsScreenSize: !!css.match(/\b(\d+)(\.\d*)?v([hw]|min|max)\b/) || !!rnStyle.media,
                 needsLayout: !!css.match(/\d%/),
                 needsHover: !!rnStyle.hover
             }), [css, rnStyle.hover]);
@@ -77,19 +95,22 @@ const styled = (Component) => {
                 return style;
             }, [em, mediaQuery, tempStyle]);
             const units = react_1.default.useMemo(() => ({ ...baseUnits, em }), [baseUnits, em]);
-            const styleConvertedFromCSS = react_1.default.useMemo(() => (0, convertStyle_1.default)(finalStyle, units), [finalStyle, units]);
-            const style = react_1.default.useMemo(() => [styleConvertedFromCSS, props.style], [props.style, styleConvertedFromCSS]);
-            const flatStyle = react_1.default.useMemo(() => react_native_1.StyleSheet.flatten(style), [style]);
+            const { style: styleConvertedFromCSS, hash } = react_1.default.useMemo(() => {
+                const style = (0, convertStyle_1.default)(finalStyle, units);
+                delete style.textOverflow;
+                const hash = (0, generateHash_1.default)(JSON.stringify(style));
+                return { style: getStyle(hash, style), hash };
+            }, [finalStyle, units]);
             const newProps = react_1.default.useMemo(() => {
-                const newProps = { style, onMouseEnter, onMouseLeave, onLayout };
-                if (flatStyle.textOverflow === 'ellipsis')
+                const newProps = { style: [styleConvertedFromCSS, props.style], onMouseEnter, onMouseLeave, onLayout };
+                if (finalStyle.textOverflow === 'ellipsis') {
                     Object.assign(newProps, { numberOfLines: 1 });
+                }
                 return newProps;
-            }, [flatStyle.textOverflow, onLayout, onMouseEnter, onMouseLeave, style]);
-            // 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 (flatStyle.fontSize) {
+            }, [finalStyle.textOverflow, onLayout, onMouseEnter, onMouseLeave, props.style, styleConvertedFromCSS]);
+            react_1.default.useEffect(() => () => removeStyle(hash), [hash]);
+            // 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/dist/types.d.ts

@@ -60,6 +60,7 @@ export declare type PartialStyle = Partial<Record<keyof ViewStyle | keyof TextSt
         width: string;
         height: string;
     };
+    textOverflow?: 'ellipsis';
     transform?: Transform[];
 };
 export declare type Style = PartialStyle & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.6.8",
+  "version": "1.6.11",
   "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',

package/src/cssToRN/index.ts

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

package/src/styleComponent.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import React, { MouseEvent } from 'react'
-import { FlatList, FlatListProps, LayoutChangeEvent, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, VirtualizedList, VirtualizedListProps } from 'react-native'
+import { FlatList, FlatListProps, LayoutChangeEvent, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, TextStyle, ViewStyle, VirtualizedList, VirtualizedListProps } from 'react-native'
 import convertStyle from './convertStyle'
 import cssToStyle from './cssToRN'
 import { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery } from './features'
 import type { Style, Units } from './types'
+import generateHash from './generateHash'
 
 export const defaultUnits: Units = { em: 16, vw: 1, vh: 1, vmin: 1, vmax: 1, rem: 16, px: 1, pt: 72 / 96, in: 96, pc: 9, cm: 96 / 2.54, mm: 96 / 25.4 }
 export const RemContext = React.createContext<number>(defaultUnits.rem)
@@ -29,6 +30,22 @@ function buildCSSString<T extends { rnCSS?: string }> (chunks: TemplateStringsAr
   if (props.rnCSS) computedString += props.rnCSS.replace(/=/gm, ':') + ';'
   return computedString
 }
+const styleMap: Record<string, { style: ViewStyle & TextStyle, usage: number }> = {}
+function getStyle (hash: string, style: ViewStyle & TextStyle) {
+  const styleInfo = styleMap[hash]
+  if (styleInfo) {
+    styleInfo.usage++
+    return styleInfo.style
+  }
+  else {
+    const sheet = StyleSheet.create({ [hash]: style })
+    return (styleMap[hash] = { style: sheet[hash], usage: 1 }).style
+  }
+}
+function removeStyle (hash: string) {
+  styleMap[hash].usage--
+  if (styleMap[hash].usage <= 0) delete styleMap[hash]
+}
 const styled = <Props, >(Component: React.ComponentType<Props>) => {
   const styledComponent = <S, >(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]) => {
     const ForwardRefComponent = React.forwardRef<React.ComponentType<S & Props & OptionalProps>, S & Props & OptionalProps>((props: S & Props & OptionalProps, ref) => {
@@ -41,7 +58,7 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
 
       const { needsLayout, needsHover } = React.useMemo(() => ({
         // needsFontSize: !!css.match(/\b(\d+)(\.\d+)?em\b/)
-        // needsScreenSize: !!cssString.current.match(/\b(\d+)(\.\d+)?v([hw]|min|max)\b/) || !!rnStyle.media,
+        // needsScreenSize: !!css.match(/\b(\d+)(\.\d*)?v([hw]|min|max)\b/) || !!rnStyle.media,
         needsLayout: !!css.match(/\d%/),
         needsHover: !!rnStyle.hover
       }), [css, rnStyle.hover])
@@ -89,19 +106,24 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
 
       const units = React.useMemo<Units>(() => ({ ...baseUnits, em }), [baseUnits, em])
 
-      const styleConvertedFromCSS = React.useMemo(() => convertStyle(finalStyle, units), [finalStyle, units])
-      const style: StyleProp<any> = React.useMemo(() => [styleConvertedFromCSS, props.style], [props.style, styleConvertedFromCSS])
-      const flatStyle = React.useMemo(() => StyleSheet.flatten(style), [style])
+      const { style: styleConvertedFromCSS, hash } = React.useMemo(() => {
+        const style = convertStyle(finalStyle, units)
+        delete (style as Style).textOverflow
+        const hash = generateHash(JSON.stringify(style))
+        return { style: getStyle(hash, style), hash }
+      }, [finalStyle, units])
       const newProps = React.useMemo(() => {
-        const newProps: OptionalProps = { style, onMouseEnter, onMouseLeave, onLayout }
-        if (flatStyle.textOverflow === 'ellipsis') Object.assign(newProps, { numberOfLines: 1 })
+        const newProps: OptionalProps = { style: [styleConvertedFromCSS, props.style], onMouseEnter, onMouseLeave, onLayout }
+        if (finalStyle.textOverflow === 'ellipsis') {
+          Object.assign(newProps, { numberOfLines: 1 })
+        }
         return newProps
-      }, [flatStyle.textOverflow, onLayout, onMouseEnter, onMouseLeave, style])
+      }, [finalStyle.textOverflow, onLayout, onMouseEnter, onMouseLeave, props.style, styleConvertedFromCSS])
+
+      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 (flatStyle.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>

package/src/types.ts

@@ -63,6 +63,7 @@ export type PartialStyle = Partial<Record<keyof ViewStyle | keyof TextStyle, str
     width: string;
     height: string;
   };
+  textOverflow?: 'ellipsis'
   transform?: Transform[];
 }