rn-css 1.8.13 → 1.9.0

package/dist/src/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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.RemContext = exports.FontSizeContext = exports.SharedValue = exports.cssToRNStyle = void 0;
+const RN = __importStar(require("react-native"));
+require("./polyfill");
+const styleComponent_1 = __importStar(require("./styleComponent"));
+var cssToRN_1 = require("./cssToRN");
+Object.defineProperty(exports, "cssToRNStyle", { enumerable: true, get: function () { return cssToRN_1.cssToRNStyle; } });
+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);
+styled.DrawerLayoutAndroid = styled(RN.DrawerLayoutAndroid);
+styled.Image = styled(RN.Image);
+styled.ImageBackground = styled(RN.ImageBackground);
+styled.KeyboardAvoidingView = styled(RN.KeyboardAvoidingView);
+styled.Modal = styled(RN.Modal);
+styled.NavigatorIOS = styled(RN.NavigatorIOS);
+styled.ScrollView = styled(RN.ScrollView);
+styled.SnapshotViewIOS = styled(RN.SnapshotViewIOS);
+styled.Switch = styled(RN.Switch);
+styled.RecyclerViewBackedScrollView = styled(RN.RecyclerViewBackedScrollView);
+styled.RefreshControl = styled(RN.RefreshControl);
+styled.SafeAreaView = styled(RN.SafeAreaView);
+styled.Text = styled(RN.Text);
+styled.TextInput = styled(RN.TextInput);
+styled.TouchableHighlight = styled(RN.TouchableHighlight);
+styled.TouchableNativeFeedback = styled(RN.TouchableNativeFeedback);
+styled.TouchableOpacity = styled(RN.TouchableOpacity);
+styled.TouchableWithoutFeedback = styled(RN.TouchableWithoutFeedback);
+styled.View = styled(RN.View);
+styled.FlatList = styleComponent_1.styledFlatList;
+styled.SectionList = styleComponent_1.styledSectionList;
+styled.VirtualizedList = styleComponent_1.styledVirtualizedList;
+exports.default = styled;

package/dist/src/polyfill.d.ts

@@ -0,0 +1,3 @@
+/** polyfill for Node < 12 */
+declare function flat<A, D extends number = 1>(array: A, depth?: number): FlatArray<A, D>[];
+declare function matchAll(str: string, regex: RegExp): IterableIterator<RegExpMatchArray>;

package/dist/src/polyfill.js

@@ -0,0 +1,23 @@
+"use strict";
+/** polyfill for Node < 12 */
+// eslint-disable-next-line no-extend-native
+if (!Array.prototype.flat)
+    Array.prototype.flat = function (depth) { return flat(this, depth); };
+// eslint-disable-next-line no-extend-native
+if (!String.prototype.matchAll)
+    String.prototype.matchAll = function (regex) { return matchAll(this, regex); };
+/** polyfill for Node < 12 */
+function flat(array, depth = 1) {
+    if (!depth || depth < 1 || !Array.isArray(array))
+        return array;
+    return array.reduce((result, current) => result.concat(flat(current, depth - 1)), []);
+}
+function matchAll(str, regex) {
+    const matches = [];
+    let groups;
+    // eslint-disable-next-line no-cond-assign
+    while (groups = regex.exec(str)) {
+        matches.push(groups);
+    }
+    return matches[Symbol.iterator]();
+}

package/dist/src/rnToCss.d.ts

@@ -0,0 +1,3 @@
+import { CompleteStyle } from './types';
+declare const rnToCSS: (rn: Partial<CompleteStyle>) => string;
+export default rnToCSS;

package/dist/src/rnToCss.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const rnToCSS = (rn) => Object.entries(rn)
+    .map(([key, value]) => `${camelToKebab(key)}: ${convertValue(value)};`)
+    .join('\n');
+const camelToKebab = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+const convertValue = (value) => isNaN(value) ? value : (value + 'px');
+exports.default = rnToCSS;

package/dist/src/styleComponent.d.ts

@@ -0,0 +1,45 @@
+import React, { MouseEvent } from 'react';
+import { FlatListProps, LayoutChangeEvent, NativeSyntheticEvent, SectionListProps, StyleProp, TargetedEvent, VirtualizedListProps } from 'react-native';
+import type { CompleteStyle, 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>;
+export interface DefaultTheme {
+}
+declare type Primitive = number | string | null | undefined | boolean | CompleteStyle;
+declare type Functs<T> = (arg: T & {
+    rnCSS?: string;
+    shared: unknown;
+    theme: DefaultTheme;
+}) => Primitive;
+declare type OptionalProps = {
+    rnCSS?: `${string};`;
+    onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onMouseLeave?: (event: MouseEvent) => void;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    children?: React.ReactNode;
+};
+declare const styled: <StyleType, InitialProps extends {
+    style?: StyleProp<StyleType>;
+}, Props extends InitialProps & OptionalProps = InitialProps & OptionalProps>(Component: React.ComponentType<InitialProps>) => {
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]): React.ForwardRefExoticComponent<Props & S & {
+        ref?: React.Ref<any> | undefined;
+    }>;
+    attrs<Part, Result extends Partial<Props & Part> = Partial<Props & Part>>(opts: Result | ((props: Props & Part) => Result)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<Props & Part>)[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<Props, keyof Result> & Part & Partial<Pick<Props, Extract<keyof Props, keyof Result>>>> & React.RefAttributes<any>>;
+};
+export default styled;
+export declare const styledFlatList: {
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & FlatListProps<any> & OptionalProps>)[]): <Type>(props: S & OptionalProps & FlatListProps<Type>) => JSX.Element;
+    attrs<S_1, Result extends Partial<S_1 & FlatListProps<any> & OptionalProps> = {}>(opts: Result | ((props: S_1 & OptionalProps & FlatListProps<any>) => Result)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1>)[]) => <Props>(componentProps: Omit<FlatListProps<Props> & OptionalProps, keyof Result> & S_1 & Partial<Result>) => JSX.Element;
+};
+export declare const styledSectionList: {
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & SectionListProps<any, import("react-native").DefaultSectionT> & OptionalProps>)[]): <Type>(props: S & OptionalProps & SectionListProps<Type, import("react-native").DefaultSectionT>) => JSX.Element;
+    attrs<S_1, Result extends Partial<S_1 & SectionListProps<any, import("react-native").DefaultSectionT> & OptionalProps> = {}>(opts: Result | ((props: S_1 & OptionalProps & SectionListProps<any, import("react-native").DefaultSectionT>) => Result)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1>)[]) => <Props>(componentProps: Omit<SectionListProps<Props, import("react-native").DefaultSectionT> & OptionalProps, keyof Result> & S_1 & Partial<Result>) => JSX.Element;
+};
+export declare const styledVirtualizedList: {
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & VirtualizedListProps<any> & OptionalProps>)[]): <Type>(props: S & OptionalProps & VirtualizedListProps<Type>) => JSX.Element;
+    attrs<S_1, Result extends Partial<S_1 & VirtualizedListProps<any> & OptionalProps> = {}>(opts: Result | ((props: S_1 & OptionalProps & VirtualizedListProps<any>) => Result)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1>)[]) => <Props>(componentProps: Omit<VirtualizedListProps<Props> & OptionalProps, keyof Result> & S_1 & Partial<Result>) => JSX.Element;
+};

package/dist/src/styleComponent.js

@@ -0,0 +1,163 @@
+"use strict";
+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 = exports.FontSizeContext = exports.RemContext = exports.defaultUnits = void 0;
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+const react_1 = __importDefault(require("react"));
+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"));
+const rnToCss_1 = __importDefault(require("./rnToCss"));
+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 share value within the component (Theme, Translation, whatever)
+exports.SharedValue = react_1.default.createContext(undefined);
+/** Converts the tagged template string into a css string */
+function buildCSSString(chunks, functs, props, shared) {
+    let computedString = chunks
+        // Evaluate the chunks from the tagged template
+        .map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? functs[i]({ shared, theme: shared, ...props }) : functs[i]]))
+        .flat()
+        // Convert the objects to string if the result is not a primitive
+        .map(chunk => typeof chunk === 'object' ? (0, rnToCss_1.default)(chunk) : chunk)
+        .join('');
+    if (props.rnCSS)
+        computedString += props.rnCSS.replace(/=/gm, ':') + ';';
+    return computedString;
+}
+const styleMap = {};
+function getStyle(hash, style) {
+    const styleInfo = styleMap[hash];
+    if (styleInfo) {
+        styleInfo.usage++;
+        return styleInfo.style;
+    }
+    else {
+        const sheet = react_native_1.StyleSheet.create({ [hash]: style });
+        return (styleMap[hash] = { style: sheet[hash], usage: 1 }).style;
+    }
+}
+function removeStyle(hash) {
+    styleMap[hash].usage--;
+    if (styleMap[hash].usage <= 0)
+        delete styleMap[hash];
+}
+const styled = (Component) => {
+    const styledComponent = (chunks, ...functs) => {
+        const ForwardRefComponent = react_1.default.forwardRef((props, ref) => {
+            const rem = react_1.default.useContext(exports.RemContext);
+            const shared = react_1.default.useContext(exports.SharedValue);
+            // 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 = react_1.default.useMemo(() => (0, cssToRN_1.default)(css), [css]);
+            const { needsLayout, needsHover, needsFocus } = react_1.default.useMemo(() => ({
+                // needsFontSize: !!css.match(/\b(\d+)(\.\d+)?em\b/)
+                // needsScreenSize: !!css.match(/\b(\d+)(\.\d*)?v([hw]|min|max)\b/) || !!rnStyle.media,
+                needsLayout: !!css.match(/\d%/),
+                needsHover: !!rnStyle.hover,
+                needsFocus: !!rnStyle.active
+            }), [css, rnStyle.active, rnStyle.hover]);
+            // Handle hover
+            const { onMouseEnter, onMouseLeave, hover } = (0, features_1.useHover)(props.onMouseEnter, props.onMouseLeave, needsHover);
+            // Handle active
+            const { onFocus, onBlur, active } = (0, features_1.useActive)(props.onFocus, props.onBlur, needsFocus);
+            const tempStyle = react_1.default.useMemo(() => {
+                const style = { ...rnStyle };
+                delete style.media;
+                delete style.hover;
+                delete style.active;
+                if (hover)
+                    Object.assign(style, rnStyle.hover);
+                if (active)
+                    Object.assign(style, rnStyle.active);
+                return style;
+            }, [active, hover, rnStyle]);
+            // Calculate current em unit for media-queries
+            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, needsLayout);
+            // Handle screen size needed for vw and wh units
+            const screenUnits = (0, features_1.useScreenSize)();
+            /** 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, baseUnits);
+            // Handle em units
+            const fontSize = (mediaQuery && 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 { style: styleConvertedFromCSS, hash } = react_1.default.useMemo(() => {
+                const style = (0, convertStyle_1.default)(finalStyle, units);
+                delete style.textOverflow;
+                const hash = (0, generateHash_1.default)(JSON.stringify(style));
+                return { style: getStyle(hash, style), hash };
+            }, [finalStyle, units]);
+            const newProps = react_1.default.useMemo(() => {
+                const newProps = { style: [styleConvertedFromCSS, props.style], onMouseEnter, onMouseLeave, onLayout, onFocus, onBlur };
+                if (finalStyle.textOverflow === 'ellipsis') {
+                    Object.assign(newProps, { numberOfLines: 1 });
+                }
+                return newProps;
+            }, [finalStyle.textOverflow, onBlur, onFocus, onLayout, onMouseEnter, onMouseLeave, props.style, styleConvertedFromCSS]);
+            react_1.default.useEffect(() => () => removeStyle(hash), [hash]);
+            // em !== parentEm alone is a bit dangerous as the component would rerender when the font size change
+            if (em !== parentEm || finalStyle.fontSize !== undefined) {
+                return react_1.default.createElement(exports.FontSizeContext.Provider, { value: em },
+                    react_1.default.createElement(Component, { ref: ref, ...props, ...newProps }));
+            }
+            else {
+                return react_1.default.createElement(Component, { ref: ref, ...props, ...newProps });
+            }
+        });
+        return ForwardRefComponent;
+    };
+    // provide styled(Comp).attrs({} | () => {}) feature
+    styledComponent.attrs = (opts) => (chunks, ...functs) => {
+        const ComponentWithAttrs = styledComponent(chunks, ...functs);
+        // We need to limit the props control to only Result https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABBATgUwIZTQUQB7ZgAmaRAwnALYAOAPAAopzUDOAfABQU0BciH1Jqz6NmLAJSIAvG0QYwAT0kBvAFCJkCFlET5CJYt2rT+gsSKETpstRo3ooIFEiMDL49YgC+nvWmL+5FTUAHRYUCgsJrQASmgsIAA2OmgEgVH0GCiwGIkMlmyc4ZF8cQnJkjKItnYQWjqMaHVgwDAA5k5YpEYmbua6eBCJICT5YgA0iGVJUGyVNp52iA5OLsEcyiFbZqyTW2FQESxeHks+SyvOiI3NrR0oXUE0nufLaI5XfgGGwao+qqBILAEIgen1hNVENhtHxtCgYGA2pNtApEmhYREEW1vCpPJckDsWH9VM1tNd0Ld2j0pMh0F0viQntQuMFxAcjhsofEoHwAORwADWvJxqhuCDurmUiBRaL50KgwpOQA
+        const ForwardRefComponent = react_1.default.forwardRef((props, ref) => {
+            const attrs = (opts instanceof Function) ? opts(props) : opts;
+            return react_1.default.createElement(ComponentWithAttrs, { ref: ref, ...props, ...attrs });
+        });
+        // TODO : Find a way to remove from the Props the properties affected by opts
+        return ForwardRefComponent;
+    };
+    return styledComponent;
+};
+exports.default = styled;
+const styledFlatList = (chunks, ...functs) => (props) => invoke(styled(react_native_1.FlatList)(chunks, ...functs), props);
+exports.styledFlatList = styledFlatList;
+exports.styledFlatList.attrs = (opts) => (chunks, ...functs) => (componentProps) => invoke(styled(react_native_1.FlatList).attrs(opts)(chunks, ...functs), componentProps);
+const styledSectionList = (chunks, ...functs) => (props) => invoke(styled(react_native_1.SectionList)(chunks, ...functs), props);
+exports.styledSectionList = styledSectionList;
+exports.styledSectionList.attrs = (opts) => (chunks, ...functs) => (componentProps) => invoke(styled(react_native_1.SectionList).attrs(opts)(chunks, ...functs), componentProps);
+const styledVirtualizedList = (chunks, ...functs) => (props) => invoke(styled(react_native_1.VirtualizedList)(chunks, ...functs), props);
+exports.styledVirtualizedList = styledVirtualizedList;
+exports.styledVirtualizedList.attrs = (opts) => (chunks, ...functs) => (componentProps) => invoke(styled(react_native_1.VirtualizedList).attrs(opts)(chunks, ...functs), componentProps);
+function invoke(Component, props) {
+    return react_1.default.createElement(Component, { ...props });
+}

package/dist/src/types.d.ts

@@ -0,0 +1,85 @@
+import { ViewStyle, TextStyle, ImageStyle } from 'react-native';
+export declare type Units = {
+    '%'?: number;
+    vw?: number;
+    vh?: number;
+    vmin?: number;
+    vmax?: number;
+    em: number;
+    rem: number;
+    px: number;
+    pt: number;
+    pc: number;
+    in: number;
+    cm: number;
+    mm: number;
+    width?: number;
+    height?: number;
+};
+export declare type Context = {
+    type: 'all' | 'sprint' | 'speech' | 'screen';
+    width: number;
+    height: number;
+    aspectRatio: number;
+    orientation: 'portrait' | 'landscape';
+    resolution: number;
+    scan: 'interlace' | 'progressive';
+    grid: 0 | 1;
+    update: 'none' | 'slow' | 'fast';
+    overflowBlock: 'none' | 'scroll' | 'paged';
+    overflowInline: 'none' | 'scroll';
+    environmentBlending: 'opaque' | 'additive' | 'subtractive';
+    color: number;
+    colorGamut: 'srgb' | 'p3' | 'rec2020';
+    colorIndex: number;
+    dynamicRange: 'standard' | 'high';
+    monochrome: number;
+    invertedColors: 'none' | 'inverted';
+    pointer: 'none' | 'coarse' | 'fine';
+    hover: 'none' | 'hover';
+    anyPointer: 'none' | 'coarse' | 'fine';
+    anyHover: 'none' | 'hover';
+    prefersReducedMotion: 'no-preference' | 'reduce';
+    prefersReducedTransparency: 'no-preference' | 'reduce';
+    prefersReducedData: 'no-preference' | 'reduce';
+    prefersContrast: 'no-preference' | 'high' | 'low' | 'forced';
+    prefersColorScheme: 'light' | 'dark';
+    forcedColor: 'none' | 'active';
+    scripting: 'none' | 'initial-only' | 'enabled';
+    deviceWidth: number;
+    deviceHeight: number;
+    deviceAspectRatio: number;
+    units: Units;
+};
+export declare type AnyStyle = ViewStyle | TextStyle | ImageStyle;
+export declare type CompleteStyle = ViewStyle & TextStyle & ImageStyle;
+export declare type PartialStyle = Partial<Record<keyof CompleteStyle, string>> & {
+    shadowOffset?: {
+        width: string;
+        height: string;
+    };
+    textShadowOffset?: {
+        width: string;
+        height: string;
+    };
+    textOverflow?: 'ellipsis';
+    transform?: Transform[];
+};
+export declare type Style = PartialStyle & {
+    hover?: PartialStyle;
+    active?: PartialStyle;
+    media?: MediaQuery[];
+};
+export declare type MediaQuery = (context: Context) => false | PartialStyle;
+export declare type Transform = {
+    scaleX?: string;
+    scaleY?: string;
+    translateX?: string;
+    translateY?: string;
+    skewX?: string;
+    skewY?: string;
+    perspective?: string;
+    rotateX?: string;
+    rotateY?: string;
+    rotateZ?: string;
+};

package/dist/src/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/useTheme.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DefaultTheme } from './styleComponent';
+/** Provider for the theme. */
+export declare const ThemeProvider: ({ theme, children }: {
+    theme: DefaultTheme;
+    children: React.ReactNode;
+}) => JSX.Element;
+/**
+ * Returns the Theme
+ * @returns The Theme object
+ */
+export declare const useTheme: () => unknown;
+/**
+ * Adds the theme prop to a non rn-css component
+ * @param Component A non rn-css component
+ * @returns A component with the theme prop
+ */
+export declare const withTheme: <T>(Component: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<T> & React.RefAttributes<React.Component<{}, {}, any>>>;

package/dist/src/useTheme.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withTheme = exports.useTheme = exports.ThemeProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const styleComponent_1 = require("./styleComponent");
+/** Provider for the theme. */
+const ThemeProvider = ({ theme, children }) => {
+    return react_1.default.createElement(styleComponent_1.SharedValue.Provider, { value: theme }, children);
+};
+exports.ThemeProvider = ThemeProvider;
+/**
+ * Returns the Theme
+ * @returns The Theme object
+ */
+const useTheme = () => react_1.default.useContext(styleComponent_1.SharedValue);
+exports.useTheme = useTheme;
+/**
+ * Adds the theme prop to a non rn-css component
+ * @param Component A non rn-css component
+ * @returns A component with the theme prop
+ */
+const withTheme = (Component) => {
+    const ThemedComponent = react_1.default.forwardRef((props, ref) => {
+        const theme = (0, exports.useTheme)();
+        return react_1.default.createElement(Component, { ref: ref, theme: theme, ...props });
+    });
+    ThemedComponent.displayName = 'ThemedComponent';
+    return ThemedComponent;
+};
+exports.withTheme = withTheme;

package/package.json

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

package/src/cssToRN/convert.ts

@@ -1,12 +1,31 @@
 import type { Style, Transform } from '../types'
 
-/** Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min( */
-function isNumber (value: string) {
+/**
+ * Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min(.
+ * Optionally accept "auto" value (for margins)
+ * @param value The value to check
+ * @param acceptAuto true if auto is an accepted value
+ * @returns true if the value is a number
+ */
+function isNumber (value: string, acceptAuto?: boolean) {
+  if (acceptAuto && value === 'auto') return true
   return value.match(/^[+-]?(\.\d|\d|calc\(|max\(|min\()/mg)
 }
 
-/** Split the value into numbers values and non numbers values */
-function findNumbers (value: string) {
+/**
+ * Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min(.
+ * Optionally accept "auto" value (for margins)
+ * @param value The value to check
+ * @param acceptAuto true if auto is an accepted value
+ * @returns true if the value is a number
+ */
+/**
+ * Split the value into numbers values and non numbers values
+ * @param value The value to check
+ * @param acceptAuto true if auto is an accepted value
+ * @returns An object containing the number and non number values as arrays.
+ */
+function findNumbers (value: string, acceptAuto?: boolean) {
   const result = {
     nonNumbers: [] as string[],
     numbers: [] as string[]
@@ -17,7 +36,7 @@ function findNumbers (value: string) {
     if (val.startsWith('"') || val.startsWith("'")) group = val.charAt(0)
     if (group && val.endsWith(group)) group = ''
     if (group) result.nonNumbers.push(val)
-    else result[isNumber(val) ? 'numbers' : 'nonNumbers'].push(val)
+    else result[isNumber(val, acceptAuto) ? 'numbers' : 'nonNumbers'].push(val)
   })
   return result
 }
@@ -188,7 +207,7 @@ export function font (value: string) {
 /** Parses a css value for the side of an element (border-width, margin, padding) */
 export function sideValue <T extends 'padding' | 'margin' | 'border'> (prefixKey: T, value: string, postFix: T extends 'border' ? 'Width' | 'Style' | 'Color' | '' : '' = ''): { [x: string]: string} {
   if (value === 'none') return sideValue(prefixKey, '0', postFix)
-  const [top = value, right = top, bottom = top, left = right] = findNumbers(value).numbers
+  const [top = value, right = top, bottom = top, left = right] = findNumbers(value, prefixKey === 'margin').numbers
   return {
     [prefixKey + 'Top' + postFix]: top,
     [prefixKey + 'Left' + postFix]: left,

package/src/cssToRN/index.ts

@@ -29,7 +29,13 @@ function cssToStyle (css: string) {
     result.hover = cssChunkToStyle(hoverInstructions)
     return ''
   })
-  Object.assign(result, cssChunkToStyle(cssWithoutHover))
+  // Find active (we don't support active within media queries) (We use [\s\S] instead of . because dotall flag (s) is not supported by react-native-windows)
+  const cssWithoutActive = cssWithoutHover.replace(/&:active\s*{([\s\S]*?)}/gmi, res => {
+    const activeInstructions = res.substring(0, res.length - 1).replace(/&:active\s*{/mi, '')// We remove the `&:active {` and `}`
+    result.active = cssChunkToStyle(activeInstructions)
+    return ''
+  })
+  Object.assign(result, cssChunkToStyle(cssWithoutActive))
   return result
 }
 

package/src/features.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import React, { MouseEvent } from 'react'
 import type { Style, Units, MediaQuery, PartialStyle } from './types'
-import { useWindowDimensions, LayoutChangeEvent } from 'react-native'
+import { useWindowDimensions, LayoutChangeEvent, NativeSyntheticEvent, TargetedEvent } from 'react-native'
 import { parseValue } from './convertUnits'
 import { createContext } from './cssToRN/mediaQueries'
 
@@ -27,6 +27,20 @@ export const useHover = (onMouseEnter: undefined | ((event: MouseEvent) => void)
   return { hover, onMouseEnter: hoverStart || onMouseEnter, onMouseLeave: hoverStop || onMouseLeave }
 }
 
+/** Hook that will apply the style reserved for active state if needed */
+export const useActive = (onFocus: undefined | ((event: NativeSyntheticEvent<TargetedEvent>) => void), onBlur: undefined | ((event: NativeSyntheticEvent<TargetedEvent>) => void | undefined), needsFocus: boolean) => {
+  const [active, setActive] = React.useState(false)
+  const focusStart = React.useMemo(() => needsFocus ? (event: NativeSyntheticEvent<TargetedEvent>) => {
+    if (onFocus) onFocus(event)
+    setActive(true)
+  } : undefined, [needsFocus, onFocus])
+  const focusStop = React.useMemo(() => needsFocus ? (event: NativeSyntheticEvent<TargetedEvent>) => {
+    if (onBlur) onBlur(event)
+    setActive(false)
+  } : undefined, [needsFocus, onBlur])
+  return { active, onFocus: focusStart || onFocus, onBlur: focusStop || onBlur }
+}
+
 /** Hook that will apply the style provided in the media queries */
 export const useMediaQuery = (media: undefined | MediaQuery[], units: Units): Style | undefined => {
   const mediaStyle = React.useMemo(() => {

package/src/styleComponent.tsx

@@ -2,10 +2,10 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import React, { MouseEvent } from 'react'
-import { FlatList, FlatListProps, LayoutChangeEvent, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, ViewStyle, VirtualizedList, VirtualizedListProps } from 'react-native'
+import { FlatList, FlatListProps, LayoutChangeEvent, NativeSyntheticEvent, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, TargetedEvent, ViewStyle, VirtualizedList, VirtualizedListProps } from 'react-native'
 import convertStyle from './convertStyle'
 import cssToStyle from './cssToRN'
-import { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery } from './features'
+import { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery, useActive } from './features'
 import type { AnyStyle, CompleteStyle, Style, Units } from './types'
 import generateHash from './generateHash'
 import rnToCSS from './rnToCss'
@@ -24,6 +24,8 @@ type Primitive = number | string | null | undefined | boolean | CompleteStyle
 type Functs<T> = (arg: T & { rnCSS?: string; shared: unknown, theme: DefaultTheme }) => Primitive
 type OptionalProps = {
   rnCSS?: `${string};`;
+  onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+  onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
   onMouseEnter?: (event: MouseEvent) => void;
   onMouseLeave?: (event: MouseEvent) => void;
   onLayout?: (event: LayoutChangeEvent) => void
@@ -70,22 +72,27 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
       // Store the style in RN format
       const rnStyle = React.useMemo(() => cssToStyle(css), [css])
 
-      const { needsLayout, needsHover } = React.useMemo(() => ({
+      const { needsLayout, needsHover, needsFocus } = React.useMemo(() => ({
         // needsFontSize: !!css.match(/\b(\d+)(\.\d+)?em\b/)
         // needsScreenSize: !!css.match(/\b(\d+)(\.\d*)?v([hw]|min|max)\b/) || !!rnStyle.media,
         needsLayout: !!css.match(/\d%/),
-        needsHover: !!rnStyle.hover
-      }), [css, rnStyle.hover])
+        needsHover: !!rnStyle.hover,
+        needsFocus: !!rnStyle.active
+      }), [css, rnStyle.active, rnStyle.hover])
 
       // Handle hover
       const { onMouseEnter, onMouseLeave, hover } = useHover(props.onMouseEnter, props.onMouseLeave, needsHover)
+      // Handle active
+      const { onFocus, onBlur, active } = useActive(props.onFocus, props.onBlur, needsFocus)
       const tempStyle = React.useMemo<Style>(() => {
         const style = { ...rnStyle }
         delete style.media
         delete style.hover
+        delete style.active
         if (hover) Object.assign(style, rnStyle.hover)
+        if (active) Object.assign(style, rnStyle.active)
         return style
-      }, [hover, rnStyle])
+      }, [active, hover, rnStyle])
 
       // Calculate current em unit for media-queries
       const parentEm = React.useContext(FontSizeContext)
@@ -127,12 +134,12 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
         return { style: getStyle<CompleteStyle>(hash, style), hash }
       }, [finalStyle, units])
       const newProps = React.useMemo(() => {
-        const newProps = { style: [styleConvertedFromCSS as StyleType, props.style], onMouseEnter, onMouseLeave, onLayout }
+        const newProps = { style: [styleConvertedFromCSS as StyleType, props.style], onMouseEnter, onMouseLeave, onLayout, onFocus, onBlur }
         if (finalStyle.textOverflow === 'ellipsis') {
           Object.assign(newProps, { numberOfLines: 1 })
         }
         return newProps
-      }, [finalStyle.textOverflow, onLayout, onMouseEnter, onMouseLeave, props.style, styleConvertedFromCSS])
+      }, [finalStyle.textOverflow, onBlur, onFocus, onLayout, onMouseEnter, onMouseLeave, props.style, styleConvertedFromCSS])
 
       React.useEffect(() => () => removeStyle(hash), [hash])
 

package/src/types.ts

@@ -73,6 +73,7 @@ export type PartialStyle = Partial<Record<keyof CompleteStyle, string>> & {
 
 export type Style = PartialStyle & {
   hover?: PartialStyle;
+  active?: PartialStyle;
   media?: MediaQuery[];
 }