rn-css 1.6.5 → 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,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,19 +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(() => convertCSS(css, true).style);
+            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 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);
-                };
+                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,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.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,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,18 +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>(() => convertCSS(css, true).style)
+      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 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)
-        }
+        const style = cssToStyle(css)
+        setRNStyle(style)
       }, [css])
 
       const { needsLayout, needsHover } = React.useMemo(() => ({

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;
-  };
-}