rn-css 1.5.3 → 1.6.0

package/dist/convertUnits.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertValue = exports.parseValue = void 0;
 const maths_1 = require("./cssToRN/maths");
+const react_native_1 = require("react-native");
 /** Take a css value like 12em and return [12, 'em'] */
 function parseValue(value) {
     // Match a single unit
-    const unit = value.match(/([+-]?\b\d+(\.\d+)?)([a-z]+\b|%)/i);
+    const unit = value.match(/([+-]?\b\d+(\.\d+)?)([a-z]+\b|%)?/i);
     return [parseFloat(unit[1]), unit[3]];
 }
 exports.parseValue = parseValue;
@@ -21,6 +22,8 @@ function convertValue(key, value, units) {
     // Percentage values need to rely on an other unit as reference
     const finalUnits = { ...units };
     if (value.includes('%')) {
+        if (react_native_1.Platform.OS === 'web')
+            return value;
         if (['marginTop', 'marginBottom', 'translateY'].includes(key))
             finalUnits['%'] = units.height / 100;
         else if (['marginLeft', 'marginRight', 'translateX'].includes(key))

package/dist/features.d.ts

@@ -1,31 +1,28 @@
-import React, { MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import type { Style, Units, MediaQuery } from './types';
 import { LayoutChangeEvent } from 'react-native';
-export declare const FontSizeContext: React.Context<number>;
-export declare const zIndexContext: React.Context<(_zIndex: number) => void>;
-/** HOC that will apply the screen size to the styles defined with vmin, vmax, vw, vh units, and handle media queries constraints */
+/** Hook that will apply the screen size to the styles defined with vmin, vmax, vw, vh units, and handle media queries constraints */
 export declare const useScreenSize: () => {
     vw: number;
     vh: number;
     vmin: number;
     vmax: number;
 };
-/** HOC that will apply the style reserved for hover state if needed */
-export declare const useHover: (rnStyle: Style, onMouseEnter?: ((event: MouseEvent) => void) | undefined, onMouseLeave?: ((event: MouseEvent) => void) | undefined) => {
-    style: import("./types").PartialStyle | undefined;
+/** Hook that will apply the style reserved for hover state if needed */
+export declare const useHover: (onMouseEnter: ((event: MouseEvent) => void) | undefined, onMouseLeave: ((event: MouseEvent) => void | undefined) | undefined, needsHover: boolean) => {
+    hover: boolean;
     onMouseEnter: ((event: MouseEvent) => void) | undefined;
-    onMouseLeave: ((event: MouseEvent) => void) | undefined;
+    onMouseLeave: ((event: MouseEvent) => void | undefined) | undefined;
 };
-/** HOC that will apply the style provided in the media queries */
+/** Hook that will apply the style provided in the media queries */
 export declare const useMediaQuery: (media: undefined | MediaQuery[], units: Units) => Style | undefined;
-/** HOC that will measure the layout to handle styles that use % units */
-export declare const useLayout: (onLayout?: ((event: LayoutChangeEvent) => void) | undefined) => {
+/** Hook that will measure the layout to handle styles that use % units */
+export declare const useLayout: (onLayout: ((event: LayoutChangeEvent) => void) | undefined, needsLayout: boolean) => {
     width: number;
     height: number;
-    onLayout: (event: LayoutChangeEvent) => void;
+    onLayout: ((event: LayoutChangeEvent) => void) | undefined;
 };
 /** Apply the new fontSize to the component before we can calculate em units */
-export declare const useFontSize: (setFontSize?: string | undefined, rem?: number) => {
+export declare const useFontSize: (fontSizeTarget: string | undefined, rem: number, em: number) => {
     em: number;
 };
-export declare const useZIndex: (zIndexFromStyle: number) => number | "auto" | undefined;

package/dist/features.js

@@ -3,94 +3,84 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useZIndex = exports.useFontSize = exports.useLayout = exports.useMediaQuery = exports.useHover = exports.useScreenSize = exports.zIndexContext = exports.FontSizeContext = void 0;
+exports.useFontSize = exports.useLayout = exports.useMediaQuery = exports.useHover = exports.useScreenSize = void 0;
 /* eslint-disable react/display-name */
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const convertUnits_1 = require("./convertUnits");
 const mediaQueries_1 = require("./cssToRN/mediaQueries");
-exports.FontSizeContext = react_1.default.createContext(16);
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-exports.zIndexContext = react_1.default.createContext((_zIndex) => { });
-/** HOC that will apply the screen size to the styles defined with vmin, vmax, vw, vh units, and handle media queries constraints */
+/** Hook that will apply the screen size to the styles defined with vmin, vmax, vw, vh units, and handle media queries constraints */
 const useScreenSize = () => {
     const { width, height } = (0, react_native_1.useWindowDimensions)();
-    return { vw: width / 100, vh: height / 100, vmin: Math.min(width, height) / 100, vmax: Math.max(width, height) / 100 };
+    return react_1.default.useMemo(() => ({
+        vw: width / 100, vh: height / 100, vmin: Math.min(width, height) / 100, vmax: Math.max(width, height) / 100
+    }), [height, width]);
 };
 exports.useScreenSize = useScreenSize;
-/** HOC that will apply the style reserved for hover state if needed */
-const useHover = (rnStyle, onMouseEnter, onMouseLeave) => {
+/** Hook that will apply the style reserved for hover state if needed */
+const useHover = (onMouseEnter, onMouseLeave, needsHover) => {
     const [hover, setHover] = react_1.default.useState(false);
-    const hoverStart = react_1.default.useCallback((event) => {
+    const hoverStart = react_1.default.useMemo(() => needsHover ? (event) => {
         if (onMouseEnter)
             onMouseEnter(event);
         setHover(true);
-    }, [onMouseEnter]);
-    const hoverStop = react_1.default.useCallback((event) => {
+    } : undefined, [needsHover, onMouseEnter]);
+    const hoverStop = react_1.default.useMemo(() => needsHover ? (event) => {
         if (onMouseLeave)
             onMouseLeave(event);
         setHover(false);
-    }, [onMouseLeave]);
-    return { style: (hover && rnStyle.hover) ? rnStyle.hover : undefined, onMouseEnter: rnStyle.hover ? hoverStart : onMouseEnter, onMouseLeave: rnStyle.hover ? hoverStop : onMouseLeave };
+    } : undefined, [needsHover, onMouseLeave]);
+    return { hover, onMouseEnter: hoverStart || onMouseEnter, onMouseLeave: hoverStop || onMouseLeave };
 };
 exports.useHover = useHover;
-/** HOC that will apply the style provided in the media queries */
+/** Hook that will apply the style provided in the media queries */
 const useMediaQuery = (media, units) => {
-    if (media) {
-        const context = (0, mediaQueries_1.createContext)(units);
-        const mediaStyles = media.map(m => m(context)).filter(m => m);
-        if (!mediaStyles.length)
-            return;
-        const mq = {};
-        Object.assign(mq, ...mediaStyles);
-        return mq;
-    }
+    const mediaStyle = react_1.default.useMemo(() => {
+        if (media) {
+            const context = (0, mediaQueries_1.createContext)(units);
+            const mediaStyles = media.map(m => m(context)).filter(m => !!m);
+            if (!mediaStyles.length)
+                return;
+            const mq = {};
+            Object.assign(mq, ...mediaStyles);
+            return mq;
+        }
+    }, [media, units]);
+    return mediaStyle;
 };
 exports.useMediaQuery = useMediaQuery;
-/** HOC that will measure the layout to handle styles that use % units */
-const useLayout = (onLayout) => {
+/** Hook that will measure the layout to handle styles that use % units */
+const useLayout = (onLayout, needsLayout) => {
     const [layout, setLayout] = react_1.default.useState({ width: 0, height: 0 });
     // Prevent calling setState if the component is unmounted
     const unmounted = react_1.default.useRef(false);
     react_1.default.useEffect(() => () => { unmounted.current = true; }, []);
-    const updateLayout = react_1.default.useCallback((event) => {
-        if (onLayout)
-            onLayout(event);
+    const updateLayout = react_1.default.useMemo(() => needsLayout ? (event) => {
         if (unmounted.current)
             return;
+        if (onLayout)
+            onLayout(event);
         const { width, height } = event.nativeEvent.layout;
         setLayout(layout => layout.width === width && layout.height === height ? layout : { width, height });
-    }, [onLayout]);
-    return { onLayout: updateLayout, ...layout };
+    } : undefined, [needsLayout, onLayout]);
+    return { onLayout: updateLayout || onLayout, ...layout };
 };
 exports.useLayout = useLayout;
 /** Apply the new fontSize to the component before we can calculate em units */
-const useFontSize = (setFontSize, rem = 16) => {
-    const em = react_1.default.useContext(exports.FontSizeContext);
-    if (!setFontSize)
-        return { em };
-    const [fontSize, fontUnit] = (0, convertUnits_1.parseValue)(setFontSize);
-    const isRelative = ['rem', 'em', '%'].includes(fontUnit || '');
-    if (isRelative) {
-        const newSize = fontUnit === 'em' ? em * fontSize
-            : fontUnit === 'rem' ? fontSize * rem
-                : fontUnit === '%' ? em * (1 + fontSize / 100)
-                    : fontSize;
-        return { em: newSize };
-    }
-    else {
-        return { em: fontSize };
-    }
+const useFontSize = (fontSizeTarget, rem, em) => {
+    const [fontSize, fontUnit] = react_1.default.useMemo(() => fontSizeTarget === undefined ? [fontSizeTarget] : (0, convertUnits_1.parseValue)(fontSizeTarget), [fontSizeTarget]);
+    const isRelative = fontUnit && ['rem', 'em', '%'].includes(fontUnit);
+    const newSize = react_1.default.useMemo(() => {
+        if (fontSize && isRelative) {
+            const newSize = fontUnit === 'em' ? em * fontSize
+                : fontUnit === 'rem' ? fontSize * rem
+                    : fontUnit === '%' ? em * (1 + fontSize / 100)
+                        : fontSize;
+            return newSize;
+        }
+        else
+            return fontSize || em;
+    }, [em, fontSize, fontUnit, isRelative, rem]);
+    return { em: newSize };
 };
 exports.useFontSize = useFontSize;
-const useZIndex = (zIndexFromStyle) => {
-    const [zIndex, setZIndex] = react_1.default.useState();
-    const updateParentZIndex = react_1.default.useContext(exports.zIndexContext);
-    react_1.default.useEffect(() => {
-        setZIndex(zIndexFromStyle);
-        if (react_native_1.Platform.OS === 'ios' && zIndexFromStyle && zIndexFromStyle !== zIndex)
-            updateParentZIndex(zIndexFromStyle);
-    }, [zIndexFromStyle, updateParentZIndex]);
-    return react_native_1.Platform.OS === 'web' ? (zIndex || 'auto') : zIndex;
-};
-exports.useZIndex = useZIndex;

package/dist/index.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import * as RN from 'react-native';
 export { cssToRNStyle } from './cssToRN';
-export { FontSizeContext } from './features';
-export { SharedValue } from './styleComponent';
+export { SharedValue, FontSizeContext, RemContext } from './styleComponent';
 export * from './useTheme';
 declare const styled: {
     <T>(Component: React.ComponentType<T>): {

package/dist/index.js

@@ -22,15 +22,15 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SharedValue = exports.FontSizeContext = exports.cssToRNStyle = void 0;
+exports.RemContext = exports.FontSizeContext = exports.SharedValue = exports.cssToRNStyle = void 0;
 const RN = __importStar(require("react-native"));
 const styleComponent_1 = __importStar(require("./styleComponent"));
 var cssToRN_1 = require("./cssToRN");
 Object.defineProperty(exports, "cssToRNStyle", { enumerable: true, get: function () { return cssToRN_1.cssToRNStyle; } });
-var features_1 = require("./features");
-Object.defineProperty(exports, "FontSizeContext", { enumerable: true, get: function () { return features_1.FontSizeContext; } });
 var styleComponent_2 = require("./styleComponent");
 Object.defineProperty(exports, "SharedValue", { enumerable: true, get: function () { return styleComponent_2.SharedValue; } });
+Object.defineProperty(exports, "FontSizeContext", { enumerable: true, get: function () { return styleComponent_2.FontSizeContext; } });
+Object.defineProperty(exports, "RemContext", { enumerable: true, get: function () { return styleComponent_2.RemContext; } });
 __exportStar(require("./useTheme"), exports);
 const styled = (Component) => (0, styleComponent_1.default)(Component);
 styled.ActivityIndicator = styled(RN.ActivityIndicator);

package/dist/styleComponent.d.ts

@@ -1,5 +1,9 @@
 import React, { MouseEvent } from 'react';
 import { FlatListProps, LayoutChangeEvent, SectionListProps, StyleProp, VirtualizedListProps } from 'react-native';
+import type { Units } from './types';
+export declare const defaultUnits: Units;
+export declare const RemContext: React.Context<number>;
+export declare const FontSizeContext: React.Context<number>;
 export declare const SharedValue: React.Context<unknown>;
 declare type Primitive = number | string | null | undefined | boolean;
 declare type Functs<T> = (arg: T & {

package/dist/styleComponent.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.styledVirtualizedList = exports.styledSectionList = exports.styledFlatList = exports.SharedValue = void 0;
+exports.styledVirtualizedList = exports.styledSectionList = exports.styledFlatList = exports.SharedValue = exports.FontSizeContext = exports.RemContext = exports.defaultUnits = void 0;
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 const react_1 = __importDefault(require("react"));
@@ -12,6 +12,9 @@ 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)
@@ -25,15 +28,13 @@ function buildCSSString(chunks, functs, props, shared) {
 const styled = (Component) => {
     const styledComponent = (chunks, ...functs) => {
         const ForwardRefComponent = react_1.default.forwardRef((props, ref) => {
-            const units = react_1.default.useRef({ 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 });
+            const rem = react_1.default.useContext(exports.RemContext);
             const shared = react_1.default.useContext(exports.SharedValue);
-            // Store the style for mutualization
-            const cssString = react_1.default.useRef(buildCSSString(chunks, functs, props, shared));
-            const [rnStyle, setRNStyle] = react_1.default.useState((0, cssToRN_1.default)(cssString.current));
+            // 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({});
             react_1.default.useEffect(() => {
-                // Build the css string with the context
-                const css = buildCSSString(chunks, functs, props, shared);
-                cssString.current = css;
                 // 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];
@@ -53,75 +54,67 @@ const styled = (Component) => {
                     if (style.usages <= 0)
                         delete styleMap[hash];
                 };
-            }, [props, shared]);
-            // const [needsFontSize, setNeedsFontSize] = React.useState(false)
-            // const [needsScreenSize, setNeedsScreenSize] = React.useState(false)
-            const [needsLayout, setNeedsLayout] = react_1.default.useState(false);
-            // const [needsHover, setNeedsHover] = React.useState(false)
-            react_1.default.useEffect(() => {
-                const css = cssString.current;
-                // setNeedsFontSize(!!css.match(/\b(\d+)(\.\d+)?em\b/)) // Do we need em units
-                // setNeedsScreenSize(!!css.match(/\b(\d+)(\.\d+)?v([hw]|min|max)\b/)) // Do we need vx units
-                setNeedsLayout(!!css.match(/\d%/)); // Do we need % units
-                // setNeedsHover(!!css.match(/&:hover/)) // Do we need to track the mouse
-            }, [cssString.current]);
-            const finalStyle = { ...rnStyle };
-            delete finalStyle.media;
-            delete finalStyle.hover;
-            // Read all the data we might need
+            }, [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,
+                needsLayout: !!css.match(/\d%/),
+                needsHover: !!rnStyle.hover
+            }), [css, rnStyle.hover]);
             // Handle hover
-            const { onMouseEnter, onMouseLeave, style: hoverStyle } = (0, features_1.useHover)(rnStyle, props.onMouseEnter, props.onMouseLeave);
-            if (hoverStyle)
-                Object.assign(finalStyle, hoverStyle);
+            const { onMouseEnter, onMouseLeave, hover } = (0, features_1.useHover)(props.onMouseEnter, props.onMouseLeave, needsHover);
+            const tempStyle = react_1.default.useMemo(() => {
+                const style = { ...rnStyle };
+                delete style.media;
+                delete style.hover;
+                if (hover)
+                    Object.assign(style, rnStyle.hover);
+                return style;
+            }, [hover, rnStyle]);
             // Calculate current em unit for media-queries
-            const { em: tempEm } = (0, features_1.useFontSize)(finalStyle.fontSize, units.current.rem);
-            if (units.current.em !== tempEm)
-                units.current = { ...units.current, em: tempEm };
+            const parentEm = react_1.default.useContext(exports.FontSizeContext);
+            const { em: tempEm } = (0, features_1.useFontSize)(tempStyle.fontSize, rem, parentEm);
             // Handle layout data needed for % units
-            const { width, height, onLayout } = (0, features_1.useLayout)(props.onLayout);
-            if (needsLayout && (units.current.width !== width || units.current.height !== height)) {
-                units.current = { ...units.current, width, height };
-            }
+            const { width, height, onLayout } = (0, features_1.useLayout)(props.onLayout, needsLayout);
             // Handle screen size needed for vw and wh units
             const screenUnits = (0, features_1.useScreenSize)();
-            if ( /* needsScreenSize && */Object.keys(screenUnits).find(key => units.current[key] !== screenUnits[key])) {
-                units.current = { ...units.current, ...screenUnits };
-            }
+            /** The units before re-updating the em */
+            const baseUnits = react_1.default.useMemo(() => ({
+                ...exports.defaultUnits,
+                rem,
+                em: tempEm,
+                width,
+                height,
+                ...screenUnits
+            }), [height, rem, screenUnits, tempEm, width]);
             // apply media queries
-            const mediaQuery = (0, features_1.useMediaQuery)(rnStyle.media, units.current);
-            if (mediaQuery)
-                Object.assign(finalStyle, mediaQuery);
+            const mediaQuery = (0, features_1.useMediaQuery)(rnStyle.media, baseUnits);
             // Handle em units
-            const { em } = (0, features_1.useFontSize)(finalStyle.fontSize, units.current.rem);
-            if (units.current.em !== em)
-                units.current = { ...units.current, em };
-            if (finalStyle.fontSize)
-                finalStyle.fontSize = em + 'px';
-            // We memoïze the style to keep the same reference if possible and change it only if the style changed
-            const calculatedStyle = react_1.default.useRef(finalStyle);
-            if (Object.keys(finalStyle).length !== Object.keys(calculatedStyle.current).length || Object.keys(finalStyle).find(key => calculatedStyle.current[key] !== finalStyle[key])) {
-                calculatedStyle.current = finalStyle;
-            }
-            const styleConvertedFromCSS = react_1.default.useMemo(() => (0, convertStyle_1.default)(calculatedStyle.current, units.current), [calculatedStyle.current, units.current]);
-            const zIndex = (0, features_1.useZIndex)(react_native_1.StyleSheet.flatten([props.style, styleConvertedFromCSS]).zIndex);
-            const style = react_1.default.useMemo(() => {
-                const style = [];
-                style.push(styleConvertedFromCSS);
-                if (props.style)
-                    style.push(props.style);
-                if (zIndex)
-                    style.push({ zIndex });
-                return style.length > 1 ? style : style[0];
-            }, [props.style, styleConvertedFromCSS, zIndex]);
-            const newProps = { style, onMouseEnter, onMouseLeave, onLayout };
-            // Handle ellipsis
-            if (react_native_1.StyleSheet.flatten(style).textOverflow === 'ellipsis')
-                Object.assign(newProps, { numberOfLines: 1 });
+            const fontSize = mediaQuery?.fontSize || tempStyle.fontSize;
+            const { em } = (0, features_1.useFontSize)(fontSize, baseUnits.rem, parentEm);
+            const finalStyle = react_1.default.useMemo(() => {
+                const style = { ...tempStyle, ...mediaQuery };
+                if (style.fontSize)
+                    style.fontSize = em + 'px';
+                if (style.zIndex === undefined && react_native_1.Platform.OS === 'web')
+                    style.zIndex = 'auto';
+                return style;
+            }, [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 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) {
-                return react_1.default.createElement(features_1.FontSizeContext.Provider, { value: em },
+                return react_1.default.createElement(exports.FontSizeContext.Provider, { value: em },
                     react_1.default.createElement(Component, { ref: ref, ...props, ...newProps }));
             }
             else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",
@@ -35,18 +35,19 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.2.0",
     "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "eslint-plugin-standard": "^5.0.0",
     "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
-    "jest": "^27.4.5",
+    "jest": "^27.5.1",
     "lint-staged": "^12.1.2",
-    "metro-react-native-babel-preset": "^0.66.2",
+    "metro-react-native-babel-preset": "^0.70.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-native": "^0.66.4",
+    "react-native": "^0.68.0",
     "react-native-typescript-transformer": "^1.2.13",
-    "react-native-web": "^0.17.5",
+    "react-native-web": "^0.17.7",
     "react-test-renderer": "17.0.2",
     "release-it": "^14.11.8",
     "ts-jest": "^27.1.1",

package/src/convertUnits.ts

@@ -1,10 +1,11 @@
 import type { PartialStyle, Transform, Units } from './types'
 import { calculate, min, max } from './cssToRN/maths'
+import { Platform } from 'react-native'
 
 /** Take a css value like 12em and return [12, 'em'] */
 export function parseValue (value: string): [number, string | undefined] {
   // Match a single unit
-  const unit = value.match(/([+-]?\b\d+(\.\d+)?)([a-z]+\b|%)/i)
+  const unit = value.match(/([+-]?\b\d+(\.\d+)?)([a-z]+\b|%)?/i)
   return [parseFloat(unit![1]), unit![3] as (string | undefined)]
 }
 
@@ -20,6 +21,7 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
   // Percentage values need to rely on an other unit as reference
   const finalUnits = { ...units }
   if (value.includes('%')) {
+    if (Platform.OS === 'web') return value
     if (['marginTop', 'marginBottom', 'translateY'].includes(key)) finalUnits['%'] = units.height! / 100
     else if (['marginLeft', 'marginRight', 'translateX'].includes(key)) finalUnits['%'] = units.width! / 100
     else if (key.startsWith('border') && key.endsWith('Radius')) finalUnits['%'] = (units.width! + units.height!) / 200

package/src/features.tsx

@@ -1,85 +1,75 @@
 /* eslint-disable react/display-name */
 import React, { MouseEvent } from 'react'
-import type { Style, Units, MediaQuery } from './types'
-import { useWindowDimensions, LayoutChangeEvent, Platform } from 'react-native'
+import type { Style, Units, MediaQuery, PartialStyle } from './types'
+import { useWindowDimensions, LayoutChangeEvent } from 'react-native'
 import { parseValue } from './convertUnits'
 import { createContext } from './cssToRN/mediaQueries'
 
-export const FontSizeContext = React.createContext(16)
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-export const zIndexContext = React.createContext((_zIndex: number) => {})
-
-/** HOC that will apply the screen size to the styles defined with vmin, vmax, vw, vh units, and handle media queries constraints */
+/** Hook that will apply the screen size to the styles defined with vmin, vmax, vw, vh units, and handle media queries constraints */
 export const useScreenSize = () => {
   const { width, height } = useWindowDimensions()
-  return { vw: width / 100, vh: height / 100, vmin: Math.min(width, height) / 100, vmax: Math.max(width, height) / 100 }
+  return React.useMemo(() => ({
+    vw: width / 100, vh: height / 100, vmin: Math.min(width, height) / 100, vmax: Math.max(width, height) / 100
+  }), [height, width])
 }
 
-/** HOC that will apply the style reserved for hover state if needed */
-export const useHover = (rnStyle: Style, onMouseEnter?: (event: MouseEvent) => void, onMouseLeave?: (event: MouseEvent) => void) => {
+/** Hook that will apply the style reserved for hover state if needed */
+export const useHover = (onMouseEnter: undefined | ((event: MouseEvent) => void), onMouseLeave: undefined | ((event: MouseEvent) => void | undefined), needsHover: boolean) => {
   const [hover, setHover] = React.useState(false)
-  const hoverStart = React.useCallback((event: MouseEvent) => {
+  const hoverStart = React.useMemo(() => needsHover ? (event: MouseEvent) => {
     if (onMouseEnter) onMouseEnter(event)
     setHover(true)
-  }, [onMouseEnter])
-  const hoverStop = React.useCallback((event: MouseEvent) => {
+  } : undefined, [needsHover, onMouseEnter])
+  const hoverStop = React.useMemo(() => needsHover ? (event: MouseEvent) => {
     if (onMouseLeave) onMouseLeave(event)
     setHover(false)
-  }, [onMouseLeave])
-  return { style: (hover && rnStyle.hover) ? rnStyle.hover : undefined, onMouseEnter: rnStyle.hover ? hoverStart : onMouseEnter, onMouseLeave: rnStyle.hover ? hoverStop : onMouseLeave }
+  } : undefined, [needsHover, onMouseLeave])
+  return { hover, onMouseEnter: hoverStart || onMouseEnter, onMouseLeave: hoverStop || onMouseLeave }
 }
 
-/** HOC that will apply the style provided in the media queries */
+/** Hook that will apply the style provided in the media queries */
 export const useMediaQuery = (media: undefined | MediaQuery[], units: Units): Style | undefined => {
-  if (media) {
-    const context = createContext(units)
-    const mediaStyles = media.map(m => m(context)).filter(m => m)
-    if (!mediaStyles.length) return
-    const mq = {} as Style
-    Object.assign(mq, ...mediaStyles)
-    return mq
-  }
+  const mediaStyle = React.useMemo(() => {
+    if (media) {
+      const context = createContext(units)
+      const mediaStyles = media.map(m => m(context)).filter(m => !!m) as PartialStyle[]
+      if (!mediaStyles.length) return
+      const mq = {} as Style
+      Object.assign(mq, ...mediaStyles)
+      return mq
+    }
+  }, [media, units])
+  return mediaStyle
 }
 
-/** HOC that will measure the layout to handle styles that use % units */
-export const useLayout = (onLayout?: (event: LayoutChangeEvent) => void) => {
+/** Hook that will measure the layout to handle styles that use % units */
+export const useLayout = (onLayout: undefined | ((event: LayoutChangeEvent) => void), needsLayout: boolean) => {
   const [layout, setLayout] = React.useState({ width: 0, height: 0 })
   // Prevent calling setState if the component is unmounted
   const unmounted = React.useRef(false)
   React.useEffect(() => () => { unmounted.current = true }, [])
-  const updateLayout = React.useCallback((event: LayoutChangeEvent) => {
-    if (onLayout) onLayout(event)
+  const updateLayout = React.useMemo(() => needsLayout ? (event: LayoutChangeEvent) => {
     if (unmounted.current) return
+    if (onLayout) onLayout(event)
     const { width, height } = event.nativeEvent.layout
     setLayout(layout => layout.width === width && layout.height === height ? layout : { width, height })
-  }, [onLayout])
-  return { onLayout: updateLayout, ...layout }
+  } : undefined, [needsLayout, onLayout])
+  return { onLayout: updateLayout || onLayout, ...layout }
 }
 
 /** Apply the new fontSize to the component before we can calculate em units */
-export const useFontSize = (setFontSize?: string, rem = 16): { em: number } => {
-  const em = React.useContext(FontSizeContext)
-  if (!setFontSize) return { em }
-  const [fontSize, fontUnit] = parseValue(setFontSize)
-  const isRelative = ['rem', 'em', '%'].includes(fontUnit || '')
-  if (isRelative) {
-    const newSize = fontUnit === 'em' ? em * fontSize
-      : fontUnit === 'rem' ? fontSize * rem
-        : fontUnit === '%' ? em * (1 + fontSize / 100)
-          : fontSize
-    return { em: newSize }
-  }
-  else {
-    return { em: fontSize }
-  }
-}
-
-export const useZIndex = (zIndexFromStyle: number) => {
-  const [zIndex, setZIndex] = React.useState<number>()
-  const updateParentZIndex = React.useContext(zIndexContext)
-  React.useEffect(() => {
-    setZIndex(zIndexFromStyle)
-    if (Platform.OS === 'ios' && zIndexFromStyle && zIndexFromStyle !== zIndex) updateParentZIndex(zIndexFromStyle)
-  }, [zIndexFromStyle, updateParentZIndex])
-  return Platform.OS === 'web' ? (zIndex || 'auto') : zIndex
+export const useFontSize = (fontSizeTarget: string | undefined, rem: number, em: number): { em: number } => {
+  const [fontSize, fontUnit] = React.useMemo(() => fontSizeTarget === undefined ? [fontSizeTarget] : parseValue(fontSizeTarget), [fontSizeTarget])
+  const isRelative = fontUnit && ['rem', 'em', '%'].includes(fontUnit)
+  const newSize = React.useMemo(() => {
+    if (fontSize && isRelative) {
+      const newSize = fontUnit === 'em' ? em * fontSize
+        : fontUnit === 'rem' ? fontSize * rem
+          : fontUnit === '%' ? em * (1 + fontSize / 100)
+            : fontSize
+      return newSize
+    }
+    else return fontSize || em
+  }, [em, fontSize, fontUnit, isRelative, rem])
+  return { em: newSize }
 }

package/src/index.tsx

@@ -2,8 +2,7 @@ import React from 'react'
 import * as RN from 'react-native'
 import styledComponent, { styledFlatList, styledSectionList, styledVirtualizedList } from './styleComponent'
 export { cssToRNStyle } from './cssToRN'
-export { FontSizeContext } from './features'
-export { SharedValue } from './styleComponent'
+export { SharedValue, FontSizeContext, RemContext } from './styleComponent'
 export * from './useTheme'
 
 const styled = <T, >(Component: React.ComponentType<T>) => styledComponent<T>(Component)

package/src/styleComponent.tsx

@@ -1,13 +1,17 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import React, { MouseEvent } from 'react'
-import { FlatList, FlatListProps, LayoutChangeEvent, RecursiveArray, SectionList, SectionListProps, StyleProp, StyleSheet, VirtualizedList, VirtualizedListProps } from 'react-native'
+import { FlatList, FlatListProps, LayoutChangeEvent, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, VirtualizedList, VirtualizedListProps } from 'react-native'
 import convertStyle from './convertStyle'
 import cssToStyle from './cssToRN'
-import { FontSizeContext, useFontSize, useHover, useLayout, useScreenSize, useZIndex, useMediaQuery } from './features'
+import { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery } from './features'
 import calculHash from './generateHash'
 import type { Style, StyleMap, 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 = {}
 
@@ -32,15 +36,13 @@ function buildCSSString<T extends { rnCSS?: string }> (chunks: TemplateStringsAr
 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) => {
-      const units = React.useRef<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 })
+      const rem = React.useContext(RemContext)
       const shared = React.useContext(SharedValue)
-      // Store the style for mutualization
-      const cssString = React.useRef(buildCSSString(chunks, functs, props, shared))
-      const [rnStyle, setRNStyle] = React.useState<Style>(cssToStyle(cssString.current))
-      React.useEffect(() => {
       // Build the css string with the context
-        const css = buildCSSString(chunks, functs, props, shared)
-        cssString.current = css
+      const css = React.useMemo(() => buildCSSString(chunks, functs, props, shared), [props, shared])
+      // Store the style in RN format
+      const [rnStyle, setRNStyle] = React.useState<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]
@@ -59,72 +61,67 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
           style.usages--
           if (style.usages <= 0) delete styleMap[hash]
         }
-      }, [props, shared])
+      }, [css])
 
-      // const [needsFontSize, setNeedsFontSize] = React.useState(false)
-      // const [needsScreenSize, setNeedsScreenSize] = React.useState(false)
-      const [needsLayout, setNeedsLayout] = React.useState(false)
-      // const [needsHover, setNeedsHover] = React.useState(false)
-      React.useEffect(() => {
-        const css = cssString.current
-        // setNeedsFontSize(!!css.match(/\b(\d+)(\.\d+)?em\b/)) // Do we need em units
-        // setNeedsScreenSize(!!css.match(/\b(\d+)(\.\d+)?v([hw]|min|max)\b/)) // Do we need vx units
-        setNeedsLayout(!!css.match(/\d%/)) // Do we need % units
-        // setNeedsHover(!!css.match(/&:hover/)) // Do we need to track the mouse
-      }, [cssString.current])
-
-      const finalStyle = { ...rnStyle }
-      delete finalStyle.media
-      delete finalStyle.hover
-      // Read all the data we might need
+      const { needsLayout, needsHover } = React.useMemo(() => ({
+        // needsFontSize: !!css.match(/\b(\d+)(\.\d+)?em\b/)
+        // needsScreenSize: !!cssString.current.match(/\b(\d+)(\.\d+)?v([hw]|min|max)\b/) || !!rnStyle.media,
+        needsLayout: !!css.match(/\d%/),
+        needsHover: !!rnStyle.hover
+      }), [css, rnStyle.hover])
 
       // Handle hover
-      const { onMouseEnter, onMouseLeave, style: hoverStyle } = useHover(rnStyle, props.onMouseEnter, props.onMouseLeave)
-      if (hoverStyle) Object.assign(finalStyle, hoverStyle)
+      const { onMouseEnter, onMouseLeave, hover } = useHover(props.onMouseEnter, props.onMouseLeave, needsHover)
+      const tempStyle = React.useMemo<Style>(() => {
+        const style = { ...rnStyle }
+        delete style.media
+        delete style.hover
+        if (hover) Object.assign(style, rnStyle.hover)
+        return style
+      }, [hover, rnStyle])
 
       // Calculate current em unit for media-queries
-      const { em: tempEm } = useFontSize(finalStyle.fontSize, units.current.rem)
-      if (units.current.em !== tempEm) units.current = { ...units.current, em: tempEm }
-
+      const parentEm = React.useContext(FontSizeContext)
+      const { em: tempEm } = useFontSize(tempStyle.fontSize, rem, parentEm)
       // Handle layout data needed for % units
-      const { width, height, onLayout } = useLayout(props.onLayout)
-      if (needsLayout && (units.current.width !== width || units.current.height !== height)) {
-        units.current = { ...units.current, width, height }
-      }
-
+      const { width, height, onLayout } = useLayout(props.onLayout, needsLayout)
       // Handle screen size needed for vw and wh units
       const screenUnits = useScreenSize()
-      if (/* needsScreenSize && */(Object.keys(screenUnits) as (keyof typeof screenUnits)[]).find(key => units.current[key] !== screenUnits[key])) {
-        units.current = { ...units.current, ...screenUnits }
-      }
 
-      // apply media queries
-      const mediaQuery = useMediaQuery(rnStyle.media, units.current)
-      if (mediaQuery) Object.assign(finalStyle, mediaQuery)
+      /** The units before re-updating the em */
+      const baseUnits = React.useMemo<Units>(() => ({
+        ...defaultUnits,
+        rem,
+        em: tempEm,
+        width,
+        height,
+        ...screenUnits
+      }), [height, rem, screenUnits, tempEm, width])
 
+      // apply media queries
+      const mediaQuery = useMediaQuery(rnStyle.media, baseUnits)
       // Handle em units
-      const { em } = useFontSize(finalStyle.fontSize, units.current.rem)
-      if (units.current.em !== em) units.current = { ...units.current, em }
-      if (finalStyle.fontSize) finalStyle.fontSize = em + 'px'
-
-      // We memoïze the style to keep the same reference if possible and change it only if the style changed
-      const calculatedStyle = React.useRef(finalStyle)
-      if (Object.keys(finalStyle).length !== Object.keys(calculatedStyle.current).length || (Object.keys(finalStyle) as (keyof typeof finalStyle)[]).find(key => calculatedStyle.current[key] !== finalStyle[key])) {
-        calculatedStyle.current = finalStyle
-      }
-      const styleConvertedFromCSS = React.useMemo(() => convertStyle(calculatedStyle.current, units.current), [calculatedStyle.current, units.current])
-      const zIndex = useZIndex(StyleSheet.flatten([props.style, styleConvertedFromCSS]).zIndex)
-      const style: StyleProp<any> = React.useMemo(() => {
-        const style = [] as RecursiveArray<any>
-        style.push(styleConvertedFromCSS)
-        if (props.style) style.push(props.style)
-        if (zIndex) style.push({ zIndex })
-        return style.length > 1 ? style : style[0]
-      }, [props.style, styleConvertedFromCSS, zIndex])
-      const newProps = { style, onMouseEnter, onMouseLeave, onLayout }
-
-      // Handle ellipsis
-      if (StyleSheet.flatten(style).textOverflow === 'ellipsis') Object.assign(newProps, { numberOfLines: 1 })
+      const fontSize = mediaQuery?.fontSize || tempStyle.fontSize
+      const { em } = useFontSize(fontSize, baseUnits.rem, parentEm)
+
+      const finalStyle = React.useMemo<Style>(() => {
+        const style: Style = { ...tempStyle, ...mediaQuery }
+        if (style.fontSize) style.fontSize = em + 'px'
+        if (style.zIndex === undefined && Platform.OS === 'web') style.zIndex = 'auto'
+        return style
+      }, [em, mediaQuery, tempStyle])
+
+      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 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)