rn-css 1.6.4 → 1.6.7

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,13 +22,6 @@ function buildCSSString(chunks, functs, props, shared) {
         computedString += props.rnCSS.replace(/=/gm, ':') + ';';
     return computedString;
 }
-function initFromCSS(css) {
-    const hash = (0, generateHash_1.default)(css);
-    const rns = (0, cssToRN_1.default)(css);
-    (0, cssToRN_1.default)(css);
-    styleMap[hash] = { style: rns, usages: 0 };
-    return rns;
-}
 const styled = (Component) => {
     const styledComponent = (chunks, ...functs) => {
         const ForwardRefComponent = react_1.default.forwardRef((props, ref) => {
@@ -40,30 +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(() => initFromCSS(css));
-            react_1.default.useEffect(() => {
-                // Try to load an existing style from the style map or save it for next time
-                const hash = (0, generateHash_1.default)(css);
-                const style = styleMap[hash];
-                if (style) {
-                    setRNStyle(style.style);
-                    style.usages++;
-                }
-                else {
-                    const rns = (0, cssToRN_1.default)(css);
-                    setRNStyle(rns);
-                    styleMap[hash] = { style: rns, usages: 1 };
-                }
-                // When the style is not used anymore, we destroy it
-                return () => {
-                    const style = styleMap[hash];
-                    setTimeout(() => {
-                        style.usages--;
-                        if (style.usages <= 0)
-                            delete styleMap[hash];
-                    }, 3000);
-                };
-            }, [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,
@@ -111,10 +78,10 @@ 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 newProps = react_1.default.useMemo(() => {
                 const newProps = { style, onMouseEnter, onMouseLeave, onLayout };
-                if (style.textOverflow === 'ellipsis')
+                if (react_native_1.StyleSheet.flatten(style).textOverflow === 'ellipsis')
                     Object.assign(newProps, { numberOfLines: 1 });
                 return newProps;
             }, [onLayout, onMouseEnter, onMouseLeave, style]);

package/dist/types.d.ts

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

package/package.json

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

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,13 +29,6 @@ function buildCSSString<T extends { rnCSS?: string }> (chunks: TemplateStringsAr
   if (props.rnCSS) computedString += props.rnCSS.replace(/=/gm, ':') + ';'
   return computedString
 }
-function initFromCSS (css: string) {
-  const hash = calculHash(css)
-  const rns = cssToStyle(css)
-  cssToStyle(css)
-  styleMap[hash] = { style: rns, usages: 0 }
-  return rns
-}
 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) => {
@@ -48,29 +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>(() => initFromCSS(css))
-      React.useEffect(() => {
-        // Try to load an existing style from the style map or save it for next time
-        const hash = calculHash(css)
-        const style = styleMap[hash]
-        if (style) {
-          setRNStyle(style.style)
-          style.usages++
-        }
-        else {
-          const rns = cssToStyle(css)
-          setRNStyle(rns)
-          styleMap[hash] = { style: rns, usages: 1 }
-        }
-        // When the style is not used anymore, we destroy it
-        return () => {
-          const style = styleMap[hash]
-          setTimeout(() => {
-            style.usages--
-            if (style.usages <= 0) delete styleMap[hash]
-          }, 3000)
-        }
-      }, [css])
+      const rnStyle = React.useMemo(() => cssToStyle(css), [css])
 
       const { needsLayout, needsHover } = React.useMemo(() => ({
         // needsFontSize: !!css.match(/\b(\d+)(\.\d+)?em\b/)
@@ -123,10 +90,10 @@ 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 newProps = React.useMemo(() => {
         const newProps: OptionalProps = { style, onMouseEnter, onMouseLeave, onLayout }
-        if (style.textOverflow === 'ellipsis') Object.assign(newProps, { numberOfLines: 1 })
+        if (StyleSheet.flatten(style).textOverflow === 'ellipsis') Object.assign(newProps, { numberOfLines: 1 })
         return newProps
       }, [onLayout, onMouseEnter, onMouseLeave, style])
 

package/src/types.ts

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