rn-css 1.6.2 → 1.6.5

package/dist/styleComponent.js

@@ -25,6 +25,20 @@ 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) => {
@@ -33,26 +47,18 @@ 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({});
+            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 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 };
-                }
+                const style = convertCSS(css, false);
+                setRNStyle(style.style);
                 // When the style is not used anymore, we destroy it
                 return () => {
-                    const style = styleMap[hash];
-                    style.usages--;
-                    if (style.usages <= 0)
-                        delete styleMap[hash];
+                    setTimeout(() => {
+                        style.usages--;
+                        if (style.usages <= 0)
+                            delete styleMap[style.hash];
+                    }, 300);
                 };
             }, [css]);
             const { needsLayout, needsHover } = react_1.default.useMemo(() => ({

package/dist/types.d.ts

@@ -83,5 +83,6 @@ 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.2",
+  "version": "1.6.5",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",

package/src/styleComponent.tsx

@@ -33,6 +33,20 @@ 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) => {
@@ -41,25 +55,17 @@ 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>({})
+      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 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 }
-        }
+        const style = convertCSS(css, false)
+        setRNStyle(style.style)
         // When the style is not used anymore, we destroy it
         return () => {
-          const style = styleMap[hash]
-          style.usages--
-          if (style.usages <= 0) delete styleMap[hash]
+          setTimeout(() => {
+            style.usages--
+            if (style.usages <= 0) delete styleMap[style.hash]
+          }, 300)
         }
       }, [css])
 

package/src/types.ts

@@ -90,5 +90,6 @@ export type StyleMap = {
   [key: string]: {
     usages: number;
     style: Style;
+    hash: string;
   };
 }