rn-css 1.9.1 → 1.9.3

package/dist/index.js

@@ -1,176 +1,60 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable react/prop-types */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const app_json_1 = require("./app.json");
-const src_1 = __importDefault(require("./src"));
-const value = 100;
-const View = src_1.default.View `
-  background: green;
-  border-radius: 50%;
-  width: 200px;
-  height: 200px;
-`;
-const Dot = (0, src_1.default)(react_native_1.Animated.View) `
-  width: 5em;
-  height: 5em;
-  margin: 2em;
-  border-radius: 50%;
-  z-index: 10;
-`;
-const StyledText = src_1.default.Text `
-  color: ${props => props.col || 'black'}
-  font-size: 1em;
-  @media (max-width: 40em) {
-    color: blue;
-    font-size: 2em;
-  }
-  @media (max-width: 20em) {
-    color: red;
-    font-size: 3em;
-  }
-`;
-const Box = src_1.default.View `
-  width: ${value}em;
-  max-width: 50vw;
-`;
-const Box2 = src_1.default.View `
-  width: 100vw;
-  height: 2em;
-  background: blue;
-`;
-const Popup = src_1.default.View `
-  z-index: 20;
-  position: absolute;
-  top: calc(100% + 2px);
-  background-color: black;
-`;
-const Hoverable = src_1.default.View `
-  width: 100px;
-  height: 100px;
-  background: red;
-  &:hover {
-    background: blue;
-  }
-`;
-const HoverableText = src_1.default.Text `
-  &:hover {
-    fontSize: 2em
-  }
-`;
-const Options = src_1.default.FlatList.attrs(props => ({ pressed: props.selected || props.pressed })) `
-  position: absolute;
-  top: 100%;
-  z-index: 1;
-`;
-const ColorCircle = src_1.default.TouchableOpacity `
-  background-color: ${props => props.color};
-  width: ${props => props.size || 2}em;
-  height: ${props => props.size || 2}em;
-  opacity: 1;
-  border-radius: 50%;
-  &:hover {
-    background-color: red;
-    opacity: 0.5;
-  }
-`;
-const FlatList = () => {
-    return react_1.default.createElement(Options, { data: ['teset'], selected: true, pressed: true, renderItem: ({ item }) => (react_1.default.createElement(StyledText, { col: 'blue' }, item)) });
-};
-const Comp = ({ style, text }) => {
-    return react_1.default.createElement(View, { style: style },
-        react_1.default.createElement(react_native_1.Text, null, text));
-};
-const ExtendedComp = (0, src_1.default)(Comp).attrs({ text: 'test' }) ``;
-// const ExtendedComp2 = styled(Comp)<{ small: boolean }>`
-//   ${props => props.small ? 'font-size: 0.8em' : ''}
-// `
-const CustomTouchable = src_1.default.TouchableOpacity.attrs({ activeOpacity: 1 }) ``;
-const Touchable = src_1.default.TouchableOpacity `
-  background-color: ${props => props.pressed ? 'blue' : 'red'};
-  &:active {
-    background-color: purple;
-  }
-  &:focus {
-    background-color: pink;
-  }
-  &:hover {
-    background-color: yellow;
-  }
-`;
-// const CustomSelectContainer = styled.TouchableOpacity.attrs({ activeOpacity: 1 })`
-//   padding: 2px;
-//   margin: 0.2em;
-//   border-radius: 0.6em;
-//   width: 8em;
-//   height: 3.6em;
-//   flex-direction: row;
-//   background-color: white;
-//   border-width: 1px;
-//   border-style: solid;
-// `
-const Forward = react_1.default.forwardRef((props, ref) => {
-    return react_1.default.createElement(Touchable, { ref: ref, ...props, pressed: true });
+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;
 });
-Forward.displayName = 'Forward';
-const Button = ({ color, style }) => {
-    const [pressed, setPressed] = react_1.default.useState(false);
-    return react_1.default.createElement(Touchable, { pressed: pressed, onPress: () => setPressed(!pressed) },
-        react_1.default.createElement(StyledText, { style: style, col: color }, "Press Me!"));
+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;
 };
-const StyledButton = (0, src_1.default)(Button).attrs(({ color: 'black' })) ``;
-const StyledButton2 = (0, src_1.default)(Button).attrs(({ color: 'black' })) ``;
-const App = () => {
-    const ref = react_1.default.useRef(null);
-    const ref2 = react_1.default.useRef(null);
-    react_1.default.useLayoutEffect(() => console.log(ref), []);
-    const dotLeft = react_1.default.useRef(new react_native_1.Animated.Value(0));
-    const dotStyle = react_1.default.useMemo(() => ({
-        left: dotLeft.current.interpolate({
-            inputRange: [0, 50],
-            outputRange: ['0%', '50%']
-        })
-    }), []);
-    // const LangDropdownItem = styled.View.attrs<{ label: string; value: number }>(
-    //   ({ label }) => ({
-    //     label: label + 2
-    //   })
-    // )`
-    //   z-index: ${props => props.value + ''};
-    // `
-    const touchableProps = { activeOpacity: 0 };
-    return (react_1.default.createElement(Box, { ref: ref2 },
-        react_1.default.createElement(View, { style: { flexDirection: 'column' } },
-            react_1.default.createElement(StyledText, { ref: ref, col: 'black', numberOfLines: 1, style: { flexGrow: 1, flexBasis: 'auto' } }, "Welcome to ReactNativeStyledComponents")),
-        react_1.default.createElement(Box, null,
-            react_1.default.createElement(Box, null,
-                react_1.default.createElement(Box, null,
-                    react_1.default.createElement(StyledText, { col: 'red' }, "Placeholder"),
-                    react_1.default.createElement(Popup, null,
-                        react_1.default.createElement(StyledText, { col: 'green' }, "Should be over")))),
-            react_1.default.createElement(Box, null,
-                react_1.default.createElement(StyledText, { col: 'red' }, "Placeholder"))),
-        react_1.default.createElement(Hoverable, null,
-            react_1.default.createElement(StyledText, { col: 'white' }, "Hover me !")),
-        react_1.default.createElement(HoverableText, null, "Hover me !"),
-        react_1.default.createElement(StyledButton, { fallbackColor: 'white' }),
-        react_1.default.createElement(StyledButton2, { color: 'white' }),
-        react_1.default.createElement(FlatList, null),
-        react_1.default.createElement(Box2, null),
-        react_1.default.createElement(ColorCircle, { color: "#236AFF", onLayout: (e) => { console.log(e.nativeEvent.layout); } }),
-        react_1.default.createElement(Dot, { style: dotStyle }),
-        react_1.default.createElement(CustomTouchable, { style: {}, ...touchableProps, activeOpacity: 0, extra: 'test' },
-            react_1.default.createElement(ExtendedComp, { style: {}, text: 'notest' }))));
+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);
 };
-react_native_1.AppRegistry.registerComponent(app_json_1.name, () => App);
-if (react_native_1.Platform.OS === 'web') {
-    react_native_1.AppRegistry.runApplication(app_json_1.name, {
-        rootTag: document.getElementsByTagName('body')[0]
-    });
-}
-exports.default = App;
+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/styleComponent.d.ts

@@ -1,5 +1,5 @@
 import React, { MouseEvent } from 'react';
-import { FlatListProps, LayoutChangeEvent, SectionListProps, StyleProp, VirtualizedListProps } from 'react-native';
+import { FlatListProps, SectionListProps, StyleProp, TouchableHighlightProps, ViewProps, VirtualizedListProps } from 'react-native';
 import type { CompleteStyle, Units } from './types';
 export declare const defaultUnits: Units;
 export declare const RemContext: React.Context<number>;
@@ -15,9 +15,16 @@ declare type Functs<T> = (arg: T & {
 }) => Primitive;
 declare type OptionalProps = {
     rnCSS?: `${string};`;
+    onFocus?: TouchableHighlightProps['onFocus'];
+    onBlur?: TouchableHighlightProps['onBlur'];
+    onPressIn?: TouchableHighlightProps['onPressIn'];
+    onPressOut?: TouchableHighlightProps['onPressOut'];
+    onResponderStart?: ViewProps['onResponderStart'];
+    onResponderRelease?: ViewProps['onResponderRelease'];
+    onStartShouldSetResponder?: ViewProps['onStartShouldSetResponder'];
     onMouseEnter?: (event: MouseEvent) => void;
     onMouseLeave?: (event: MouseEvent) => void;
-    onLayout?: (event: LayoutChangeEvent) => void;
+    onLayout?: ViewProps['onLayout'];
     children?: React.ReactNode;
 };
 declare const styled: <StyleType, InitialProps extends {

package/dist/styleComponent.js

@@ -58,22 +58,34 @@ const styled = (Component) => {
             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 } = react_1.default.useMemo(() => ({
+            const { needsLayout, needsHover, needsFocus, needsTouch } = 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
-            }), [css, rnStyle.hover]);
+                needsHover: !!rnStyle.hover,
+                needsTouch: !!rnStyle.active,
+                needsFocus: !!rnStyle.focus
+            }), [css, rnStyle.active, rnStyle.focus, rnStyle.hover]);
             // Handle hover
             const { onMouseEnter, onMouseLeave, hover } = (0, features_1.useHover)(props.onMouseEnter, props.onMouseLeave, needsHover);
+            // Handle active
+            const { onPressIn, onPressOut, onStartShouldSetResponder, onResponderRelease, onResponderStart, active } = (0, features_1.useActive)(props.onPressIn, props.onPressOut, props.onResponderStart, props.onResponderRelease, props.onStartShouldSetResponder, needsTouch);
+            // Handle focus
+            const { onFocus, onBlur, focused } = (0, features_1.useFocus)(props.onFocus, props.onBlur, needsFocus);
             const tempStyle = react_1.default.useMemo(() => {
                 const style = { ...rnStyle };
                 delete style.media;
                 delete style.hover;
+                delete style.active;
+                delete style.focus;
+                if (focused)
+                    Object.assign(style, rnStyle.focus);
                 if (hover)
                     Object.assign(style, rnStyle.hover);
+                if (active)
+                    Object.assign(style, rnStyle.active);
                 return style;
-            }, [hover, rnStyle]);
+            }, [active, focused, 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);
@@ -111,12 +123,24 @@ const styled = (Component) => {
                 return { style: getStyle(hash, style), hash };
             }, [finalStyle, units]);
             const newProps = react_1.default.useMemo(() => {
-                const newProps = { style: [styleConvertedFromCSS, props.style], onMouseEnter, onMouseLeave, onLayout };
+                const newProps = {
+                    style: [styleConvertedFromCSS, props.style],
+                    onMouseEnter,
+                    onMouseLeave,
+                    onLayout,
+                    onFocus,
+                    onBlur,
+                    onPressIn,
+                    onPressOut,
+                    onStartShouldSetResponder,
+                    onResponderStart,
+                    onResponderRelease
+                };
                 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, onPressIn, onPressOut, onStartShouldSetResponder, onResponderRelease, onResponderStart, 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) {

package/dist/types.d.ts

@@ -67,6 +67,8 @@ export declare type PartialStyle = Partial<Record<keyof CompleteStyle, string>>
 };
 export declare type Style = PartialStyle & {
     hover?: PartialStyle;
+    active?: PartialStyle;
+    focus?: PartialStyle;
     media?: MediaQuery[];
 };
 export declare type MediaQuery = (context: Context) => false | PartialStyle;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "rn-css",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "scripts": {
     "test": "jest",
-    "prepare": "tsc",
+    "prepare": "rm -rf dist && tsc",
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "start": "react-native start",

package/src/features.tsx

@@ -33,7 +33,7 @@ export const useActive = (
   onPressOut: undefined | ((event: GestureResponderEvent) => void),
   onResponderStart: undefined | ((event: GestureResponderEvent) => void),
   onResponderRelease: undefined | ((event: GestureResponderEvent) => void),
-  onResponderGrant: undefined | ((event: GestureResponderEvent) => boolean),
+  onStartShouldSetResponder: undefined | ((event: GestureResponderEvent) => void),
   needsTouch: boolean
 ) => {
   const [active, setActive] = React.useState(false)
@@ -48,8 +48,8 @@ export const useActive = (
     setActive(false)
   } : undefined, [needsTouch, onResponderRelease, onPressOut])
   const grantTouch = React.useMemo(() =>
-    needsTouch ? onResponderGrant || (() => true) : undefined
-  , [needsTouch, onResponderGrant]
+    needsTouch ? onStartShouldSetResponder || (() => true) : undefined
+  , [needsTouch, onStartShouldSetResponder]
   )
   return {
     active,
@@ -57,7 +57,7 @@ export const useActive = (
     onPressOut: touchEnd || onPressOut,
     onResponderStart: touchStart || onResponderStart,
     onResponderRelease: touchEnd || onResponderRelease,
-    onResponderGrant: grantTouch || onResponderGrant
+    onStartShouldSetResponder: grantTouch || onStartShouldSetResponder
   }
 }
 

package/src/styleComponent.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import React, { MouseEvent } from 'react'
-import { FlatList, FlatListProps, GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, TargetedEvent, ViewStyle, VirtualizedList, VirtualizedListProps } from 'react-native'
+import { FlatList, FlatListProps, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, TouchableHighlightProps, ViewProps, ViewStyle, VirtualizedList, VirtualizedListProps } from 'react-native'
 import convertStyle from './convertStyle'
 import cssToStyle from './cssToRN'
 import { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery, useActive, useFocus } from './features'
@@ -24,16 +24,16 @@ 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;
-  onPressIn?: (event: GestureResponderEvent) => void;
-  onPressOut?: (event: GestureResponderEvent) => void;
-  onResponderStart?: (event: GestureResponderEvent) => void,
-  onResponderRelease?: (event: GestureResponderEvent) => void,
-  onResponderGrant?: (event: GestureResponderEvent) => boolean,
+  onFocus?: TouchableHighlightProps['onFocus'];
+  onBlur?: TouchableHighlightProps['onBlur'];
+  onPressIn?: TouchableHighlightProps['onPressIn'];
+  onPressOut?: TouchableHighlightProps['onPressOut'];
+  onResponderStart?: ViewProps['onResponderStart'];
+  onResponderRelease?: ViewProps['onResponderRelease'];
+  onStartShouldSetResponder?: ViewProps['onStartShouldSetResponder'];
   onMouseEnter?: (event: MouseEvent) => void;
   onMouseLeave?: (event: MouseEvent) => void;
-  onLayout?: (event: LayoutChangeEvent) => void
+  onLayout?: ViewProps['onLayout'];
   children?: React.ReactNode;
 }
 
@@ -89,9 +89,9 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
       // Handle hover
       const { onMouseEnter, onMouseLeave, hover } = useHover(props.onMouseEnter, props.onMouseLeave, needsHover)
       // Handle active
-      const { onPressIn, onPressOut, onResponderGrant, onResponderRelease, onResponderStart, active } = useActive(
+      const { onPressIn, onPressOut, onStartShouldSetResponder, onResponderRelease, onResponderStart, active } = useActive(
         props.onPressIn, props.onPressOut,
-        props.onResponderStart, props.onResponderRelease, props.onResponderGrant,
+        props.onResponderStart, props.onResponderRelease, props.onStartShouldSetResponder,
         needsTouch
       )
       // Handle focus
@@ -157,7 +157,7 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
           onBlur,
           onPressIn,
           onPressOut,
-          onResponderGrant,
+          onStartShouldSetResponder,
           onResponderStart,
           onResponderRelease
         }
@@ -165,7 +165,7 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
           Object.assign(newProps, { numberOfLines: 1 })
         }
         return newProps
-      }, [finalStyle.textOverflow, onBlur, onFocus, onLayout, onMouseEnter, onMouseLeave, onPressIn, onPressOut, onResponderGrant, onResponderRelease, onResponderStart, props.style, styleConvertedFromCSS])
+      }, [finalStyle.textOverflow, onBlur, onFocus, onLayout, onMouseEnter, onMouseLeave, onPressIn, onPressOut, onStartShouldSetResponder, onResponderRelease, onResponderStart, props.style, styleConvertedFromCSS])
 
       React.useEffect(() => () => removeStyle(hash), [hash])
 

package/dist/app.json

@@ -1,4 +0,0 @@
-{
-    "name": "ReactNativeStyledComponents",
-    "displayName": "ReactNativeStyledComponents"
-}

package/dist/src/convertStyle.d.ts

@@ -1,5 +0,0 @@
-import { /* StyleSheet, */ Animated, TextStyle } from 'react-native';
-import type { AnyStyle, PartialStyle, Units } from './types';
-/** Mix the calculated RN style within the object style */
-declare const convertStyle: <T extends AnyStyle | Animated.WithAnimatedObject<import("react-native").ViewStyle> | Animated.WithAnimatedObject<TextStyle> | Animated.WithAnimatedObject<import("react-native").ImageStyle> = AnyStyle>(rnStyle: PartialStyle, units: Units) => T;
-export default convertStyle;

package/dist/src/convertStyle.js

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const convertUnits_1 = require("./convertUnits");
-/** Mix the calculated RN style within the object style */
-const convertStyle = (rnStyle, units) => {
-    /** This is the result of the convertions from css style into RN style */
-    const convertedStyle = {};
-    // If width and height are specified, we can use those values for the first render
-    ['width', 'height'].forEach(key => {
-        if (!units[key] && rnStyle[key]) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const converted = (0, convertUnits_1.convertValue)(key, rnStyle[key], units);
-            if (!Number.isNaN(converted))
-                units[key] = converted;
-        }
-    });
-    Object.keys(rnStyle).forEach(key => {
-        const value = rnStyle[key] || '0';
-        // Handle object values
-        if (key === 'transform' && rnStyle.transform) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            convertedStyle.transform = rnStyle.transform.map(transformation => {
-                const result = {};
-                Object.keys(transformation).forEach(k => (result[k] = (0, convertUnits_1.convertValue)(k, transformation[k], units)));
-                return result;
-            });
-        }
-        else if (key === 'shadowOffset' && rnStyle.shadowOffset) {
-            convertedStyle.shadowOffset = {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                width: (0, convertUnits_1.convertValue)(key, rnStyle.shadowOffset.width || '0', units),
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                height: (0, convertUnits_1.convertValue)(key, rnStyle.shadowOffset.height || '0', units)
-            };
-        }
-        else if (key === 'textShadowOffset' && rnStyle.textShadowOffset) {
-            convertedStyle.textShadowOffset = {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                width: (0, convertUnits_1.convertValue)(key, rnStyle.textShadowOffset.width || '0', units),
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                height: (0, convertUnits_1.convertValue)(key, rnStyle.textShadowOffset.height || '0', units)
-            };
-        }
-        // Font family should not be transformed (same as cursor for web in case of base64 value)
-        else if (['cursor', 'fontFamily'].includes(key)) {
-            convertedStyle[key] = value;
-        }
-        else {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            convertedStyle[key] = (0, convertUnits_1.convertValue)(key, value, units);
-        }
-    });
-    return convertedStyle;
-};
-exports.default = convertStyle;

package/dist/src/convertUnits.d.ts

@@ -1,5 +0,0 @@
-import type { PartialStyle, Transform, Units } from './types';
-/** Take a css value like 12em and return [12, 'em'] */
-export declare function parseValue(value: string): [number, string | undefined];
-/** Convert a value using the provided unit transform table */
-export declare function convertValue(key: keyof PartialStyle | keyof Transform, value: string, units: Units): string | number;

package/dist/src/convertUnits.js

@@ -1,71 +0,0 @@
-"use strict";
-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);
-    return [parseFloat(unit[1]), unit[3]];
-}
-exports.parseValue = parseValue;
-/** Convert a value using the provided unit transform table */
-function convertValue(key, value, units) {
-    if (typeof value !== 'string') {
-        console.error(`Failed to parse CSS instruction: ${key}=${value}. We expect a string, but ${value} was of type ${typeof value}.`);
-        return 0;
-    }
-    // colors should be left untouched
-    if (value.startsWith('#'))
-        return value;
-    // 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))
-            finalUnits['%'] = units.width / 100;
-        else if (key.startsWith('border') && key.endsWith('Radius'))
-            finalUnits['%'] = (units.width + units.height) / 200;
-        else if (['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'top', 'left', 'bottom', 'right', 'flexBasis', 'rotate3d'].includes(key)) {
-            if (value.startsWith('calc') || value.startsWith('max') || value.startsWith('min')) {
-                if (['height', 'minHeight', 'maxHeight', 'top', 'bottom'].includes(key))
-                    finalUnits['%'] = units.height / 100;
-                else
-                    finalUnits['%'] = units.width / 100;
-            }
-            // width: 100%, height: 100% are supported
-            else
-                return value;
-        }
-        else if (['lineHeight'].includes(key))
-            finalUnits['%'] = units.em / 100;
-        else
-            finalUnits['%'] = 0.01;
-    }
-    // We replace all units within the value
-    const convertedValue = value.replace(/(\b\d+(\.\d+)?)([a-z]+\b|%)/ig, occ => {
-        const [val, unit] = parseValue(occ);
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        if (['deg', 'rad', 'turn', 's'].includes(unit))
-            return occ; // We don't want to convert deg, rad, turn, second units
-        return val * (finalUnits[unit || 'px']) + '';
-    });
-    // We handle extra calculations (calc, min, max, parsing...)
-    if (convertedValue.startsWith('calc('))
-        return (0, maths_1.calculate)(convertedValue.substring(4)); // remove calc. We can keep the parenthesis
-    else if (convertedValue.startsWith('max('))
-        return (0, maths_1.max)(convertedValue.substring(4, convertedValue.length - 1)); // Remove max()
-    else if (convertedValue.startsWith('min('))
-        return (0, maths_1.min)(convertedValue.substring(4, convertedValue.length - 1)); // remove min()
-    else if (key === 'fontWeight')
-        return convertedValue; // fontWeight must be a string even when it is an integer value.
-    else if (parseFloat(convertedValue) + '' === convertedValue)
-        return parseFloat(convertedValue);
-    else
-        return convertedValue;
-}
-exports.convertValue = convertValue;

package/dist/src/cssToRN/convert.d.ts

@@ -1,55 +0,0 @@
-import type { Style, Transform } from '../types';
-/** Parse a css value for border */
-export declare function border(value: string): {
-    [x: string]: string;
-};
-/** Parse a css value for border-like elements */
-export declare function borderLike(prefixKey: 'outline' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom', value: string): {
-    [x: string]: string;
-};
-export declare function shadow(prefix: 'textShadow' | 'shadow', value: string): {
-    [x: string]: string | {
-        width: string;
-        height: string;
-    };
-};
-export declare function flex(value: string): {
-    flexBasis: string;
-    flexGrow?: undefined;
-    flexShrink?: undefined;
-} | {
-    flexGrow: string;
-    flexBasis: string;
-    flexShrink?: undefined;
-} | {
-    flexGrow: string;
-    flexShrink: string;
-    flexBasis: string;
-};
-export declare function flexFlow(value: string): {
-    [prop: string]: string;
-};
-export declare function placeContent(value: string): {
-    alignContent: string;
-    justifyContent: string;
-};
-export declare function background(value: string): {
-    backgroundColor: string | undefined;
-};
-export declare function textDecoration(value: string): {
-    textDecorationLine: string;
-    textDecorationStyle: string;
-    textDecorationColor: string;
-};
-export declare function transform(value: string): {
-    transform: Transform[];
-};
-export declare function font(value: string): Style;
-/** Parses a css value for the side of an element (border-width, margin, padding) */
-export declare function sideValue<T extends 'padding' | 'margin' | 'border'>(prefixKey: T, value: string, postFix?: T extends 'border' ? 'Width' | 'Style' | 'Color' | '' : ''): {
-    [x: string]: string;
-};
-/** Parses a css value for the corner of an element (border-radius) */
-export declare function cornerValue(prefixKey: 'border', value: string, postFix: 'Radius'): {
-    [x: string]: string;
-};