rn-css 1.6.3 → 1.6.6

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,29 +30,11 @@ 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));
+            const [rnStyle, setRNStyle] = react_1.default.useState(() => (0, cssToRN_1.default)(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];
-                    style.usages--;
-                    setTimeout(() => {
-                        if (style.usages <= 0)
-                            delete styleMap[hash];
-                    }, 3000);
-                };
+                const style = (0, cssToRN_1.default)(css);
+                setRNStyle(style);
             }, [css]);
             const { needsLayout, needsHover } = react_1.default.useMemo(() => ({
                 // needsFontSize: !!css.match(/\b(\d+)(\.\d+)?em\b/)

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.3",
+  "version": "1.6.6",
   "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,28 +37,11 @@ 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))
+      const [rnStyle, setRNStyle] = React.useState<Style>(() => cssToStyle(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]
-          style.usages--
-          setTimeout(() => {
-            if (style.usages <= 0) delete styleMap[hash]
-          }, 3000)
-        }
+        const style = cssToStyle(css)
+        setRNStyle(style)
       }, [css])
 
       const { needsLayout, needsHover } = React.useMemo(() => ({

package/src/types.ts

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