rn-css 1.6.1 → 1.6.4

package/dist/styleComponent.js

@@ -25,6 +25,13 @@ 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) => {
@@ -33,7 +40,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({});
+            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);
@@ -50,9 +57,11 @@ const styled = (Component) => {
                 // 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[hash];
+                    }, 3000);
                 };
             }, [css]);
             const { needsLayout, needsHover } = react_1.default.useMemo(() => ({
@@ -102,18 +111,17 @@ 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([props.style, styleConvertedFromCSS]), [props.style, styleConvertedFromCSS]);
+            const style = react_1.default.useMemo(() => react_native_1.StyleSheet.flatten([styleConvertedFromCSS, props.style]), [props.style, styleConvertedFromCSS]);
             const newProps = react_1.default.useMemo(() => {
                 const newProps = { style, onMouseEnter, onMouseLeave, onLayout };
                 if (style.textOverflow === 'ellipsis')
                     Object.assign(newProps, { numberOfLines: 1 });
                 return newProps;
             }, [onLayout, onMouseEnter, onMouseLeave, style]);
-            console.log(style, styleConvertedFromCSS, tempStyle, rnStyle, css);
             // 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 (finalStyle.fontSize) {
+            if (style.fontSize) {
                 return react_1.default.createElement(exports.FontSizeContext.Provider, { value: em },
                     react_1.default.createElement(Component, { ref: ref, ...props, ...newProps }));
             }

package/package.json

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

package/src/styleComponent.tsx

@@ -33,6 +33,13 @@ 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) => {
@@ -41,7 +48,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>({})
+      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)
@@ -58,8 +65,10 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
         // 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[hash]
+          }, 3000)
         }
       }, [css])
 
@@ -114,19 +123,17 @@ 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([props.style, styleConvertedFromCSS]), [props.style, styleConvertedFromCSS])
+      const style: StyleProp<any> = React.useMemo(() => StyleSheet.flatten([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 })
         return newProps
       }, [onLayout, onMouseEnter, onMouseLeave, style])
 
-      console.log(style, styleConvertedFromCSS, tempStyle, rnStyle, css)
-
       // 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 (finalStyle.fontSize) {
+      if (style.fontSize) {
         return <FontSizeContext.Provider value={em}>
           <Component ref={ref} {...props} {...newProps} />
         </FontSizeContext.Provider>