rn-css 1.6.5 → 1.6.8

package/dist/features.js

@@ -68,7 +68,7 @@ const useLayout = (onLayout, needsLayout) => {
 exports.useLayout = useLayout;
 /** Apply the new fontSize to the component before we can calculate em units */
 const useFontSize = (fontSizeTarget, rem, em) => {
-    const [fontSize, fontUnit] = react_1.default.useMemo(() => fontSizeTarget === undefined ? [fontSizeTarget] : (0, convertUnits_1.parseValue)(fontSizeTarget), [fontSizeTarget]);
+    const [fontSize, fontUnit] = react_1.default.useMemo(() => fontSizeTarget === undefined ? [] : (0, convertUnits_1.parseValue)(fontSizeTarget), [fontSizeTarget]);
     const isRelative = fontUnit && ['rem', 'em', '%'].includes(fontUnit);
     const newSize = react_1.default.useMemo(() => {
         if (fontSize && isRelative) {

package/dist/styleComponent.js

@@ -11,12 +11,9 @@ 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);
-// We use this to cache the computed styles
-const styleMap = {};
 // We use this to share value within the component (Theme, Translation, whatever)
 exports.SharedValue = react_1.default.createContext(undefined);
 function buildCSSString(chunks, functs, props, shared) {
@@ -25,20 +22,6 @@ function buildCSSString(chunks, functs, props, shared) {
         computedString += props.rnCSS.replace(/=/gm, ':') + ';';
     return computedString;
 }
-function convertCSS(css, init) {
-    (0, cssToRN_1.default)(css);
-    const hash = (0, generateHash_1.default)(css);
-    const style = styleMap[hash];
-    if (style) {
-        style.usages++;
-        return style;
-    }
-    else {
-        const rns = (0, cssToRN_1.default)(css);
-        styleMap[hash] = { style: rns, usages: init ? 0 : 1, hash };
-        return styleMap[hash];
-    }
-}
 const styled = (Component) => {
     const styledComponent = (chunks, ...functs) => {
         const ForwardRefComponent = react_1.default.forwardRef((props, ref) => {
@@ -47,20 +30,7 @@ const styled = (Component) => {
             // Build the css string with the context
             const css = react_1.default.useMemo(() => buildCSSString(chunks, functs, props, shared), [props, shared]);
             // Store the style in RN format
-            const [rnStyle, setRNStyle] = react_1.default.useState(() => convertCSS(css, true).style);
-            react_1.default.useEffect(() => {
-                // Try to load an existing style from the style map or save it for next time
-                const style = convertCSS(css, false);
-                setRNStyle(style.style);
-                // When the style is not used anymore, we destroy it
-                return () => {
-                    setTimeout(() => {
-                        style.usages--;
-                        if (style.usages <= 0)
-                            delete styleMap[style.hash];
-                    }, 300);
-                };
-            }, [css]);
+            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,
@@ -108,17 +78,18 @@ const styled = (Component) => {
             }, [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(() => react_native_1.StyleSheet.flatten([styleConvertedFromCSS, props.style]), [props.style, styleConvertedFromCSS]);
+            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 newProps = react_1.default.useMemo(() => {
                 const newProps = { style, onMouseEnter, onMouseLeave, onLayout };
-                if (style.textOverflow === 'ellipsis')
+                if (flatStyle.textOverflow === 'ellipsis')
                     Object.assign(newProps, { numberOfLines: 1 });
                 return newProps;
-            }, [onLayout, onMouseEnter, onMouseLeave, style]);
+            }, [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 (style.fontSize) {
+            if (flatStyle.fontSize) {
                 return react_1.default.createElement(exports.FontSizeContext.Provider, { value: em },
                     react_1.default.createElement(Component, { ref: ref, ...props, ...newProps }));
             }

package/dist/types.d.ts

@@ -79,10 +79,3 @@ export declare type Transform = {
     rotateY?: string;
     rotateZ?: string;
 };
-export declare type StyleMap = {
-    [key: string]: {
-        usages: number;
-        style: Style;
-        hash: string;
-    };
-};

package/package.json

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

package/src/features.tsx

@@ -59,7 +59,7 @@ export const useLayout = (onLayout: undefined | ((event: LayoutChangeEvent) => v
 
 /** Apply the new fontSize to the component before we can calculate em units */
 export const useFontSize = (fontSizeTarget: string | undefined, rem: number, em: number): { em: number } => {
-  const [fontSize, fontUnit] = React.useMemo(() => fontSizeTarget === undefined ? [fontSizeTarget] : parseValue(fontSizeTarget), [fontSizeTarget])
+  const [fontSize, fontUnit] = React.useMemo(() => fontSizeTarget === undefined ? [] : parseValue(fontSizeTarget), [fontSizeTarget])
   const isRelative = fontUnit && ['rem', 'em', '%'].includes(fontUnit)
   const newSize = React.useMemo(() => {
     if (fontSize && isRelative) {

package/src/styleComponent.tsx

@@ -5,16 +5,12 @@ import { FlatList, FlatListProps, LayoutChangeEvent, Platform, SectionList, Sect
 import convertStyle from './convertStyle'
 import cssToStyle from './cssToRN'
 import { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery } from './features'
-import calculHash from './generateHash'
-import type { Style, StyleMap, Units } from './types'
+import type { Style, Units } from './types'
 
 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)
 export const FontSizeContext = React.createContext(defaultUnits.em)
 
-// We use this to cache the computed styles
-const styleMap: StyleMap = {}
-
 // We use this to share value within the component (Theme, Translation, whatever)
 export const SharedValue = React.createContext<unknown>(undefined)
 
@@ -33,20 +29,6 @@ function buildCSSString<T extends { rnCSS?: string }> (chunks: TemplateStringsAr
   if (props.rnCSS) computedString += props.rnCSS.replace(/=/gm, ':') + ';'
   return computedString
 }
-function convertCSS (css: string, init?: boolean) {
-  cssToStyle(css)
-  const hash = calculHash(css)
-  const style = styleMap[hash]
-  if (style) {
-    style.usages++
-    return style
-  }
-  else {
-    const rns = cssToStyle(css)
-    styleMap[hash] = { style: rns, usages: init ? 0 : 1, hash }
-    return 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) => {
@@ -55,19 +37,7 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
       // Build the css string with the context
       const css = React.useMemo(() => buildCSSString(chunks, functs, props, shared), [props, shared])
       // Store the style in RN format
-      const [rnStyle, setRNStyle] = React.useState<Style>(() => convertCSS(css, true).style)
-      React.useEffect(() => {
-        // Try to load an existing style from the style map or save it for next time
-        const style = convertCSS(css, false)
-        setRNStyle(style.style)
-        // When the style is not used anymore, we destroy it
-        return () => {
-          setTimeout(() => {
-            style.usages--
-            if (style.usages <= 0) delete styleMap[style.hash]
-          }, 300)
-        }
-      }, [css])
+      const rnStyle = React.useMemo(() => cssToStyle(css), [css])
 
       const { needsLayout, needsHover } = React.useMemo(() => ({
         // needsFontSize: !!css.match(/\b(\d+)(\.\d+)?em\b/)
@@ -120,17 +90,18 @@ 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(() => StyleSheet.flatten([styleConvertedFromCSS, props.style]), [props.style, styleConvertedFromCSS])
+      const style: StyleProp<any> = React.useMemo(() => [styleConvertedFromCSS, props.style], [props.style, styleConvertedFromCSS])
+      const flatStyle = React.useMemo(() => StyleSheet.flatten(style), [style])
       const newProps = React.useMemo(() => {
         const newProps: OptionalProps = { style, onMouseEnter, onMouseLeave, onLayout }
-        if (style.textOverflow === 'ellipsis') Object.assign(newProps, { numberOfLines: 1 })
+        if (flatStyle.textOverflow === 'ellipsis') Object.assign(newProps, { numberOfLines: 1 })
         return newProps
-      }, [onLayout, onMouseEnter, onMouseLeave, style])
+      }, [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 (style.fontSize) {
+      if (flatStyle.fontSize) {
         return <FontSizeContext.Provider value={em}>
           <Component ref={ref} {...props} {...newProps} />
         </FontSizeContext.Provider>

package/src/types.ts

@@ -85,11 +85,3 @@ export type Transform = {
   rotateY?: string;
   rotateZ?: string;
 }
-
-export type StyleMap = {
-  [key: string]: {
-    usages: number;
-    style: Style;
-    hash: string;
-  };
-}