rn-css 1.3.0 → 1.4.2

package/dist/styleComponent.d.ts

@@ -7,7 +7,7 @@ declare type Functs<T> = (arg: T & {
     shared: unknown;
 }) => Primitive;
 declare type OptionalProps = {
-    rnCSS?: string;
+    rnCSS?: `${string};`;
     onMouseEnter?: (event: MouseEvent) => void;
     onMouseLeave?: (event: MouseEvent) => void;
     onLayout?: (event: LayoutChangeEvent) => void;
@@ -15,25 +15,23 @@ declare type OptionalProps = {
     style?: StyleProp<any>;
 };
 declare const styled: <Props>(Component: React.ComponentType<Props>) => {
-    <S>(chunks: TemplateStringsArray, ...functs: (string | number | boolean | Functs<S & Props> | null | undefined)[]): React.ForwardRefExoticComponent<Props & S & OptionalProps & {
-        ref?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]): React.ForwardRefExoticComponent<Props & S & OptionalProps & {
+        ref?: React.Ref<any> | undefined;
+    }>;
+    attrs<S_1>(opts: Partial<S_1 & Props> | ((props: S_1 & Props) => Partial<S_1 & Props>)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1 & Props>)[]) => React.ForwardRefExoticComponent<(Props | S_1) & OptionalProps & {
+        ref?: React.Ref<any> | undefined;
     }>;
-    attrs<S_1>(opts: Partial<S_1 & Props> | ((props: S_1 & Props) => Partial<S_1 & Props>)): (chunks: TemplateStringsArray, ...functs: (string | number | boolean | Functs<S_1 & Props> | null | undefined)[]) => React.ForwardRefExoticComponent<(Props & OptionalProps & {
-        ref?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
-    }) | (S_1 & OptionalProps & {
-        ref?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
-    })>;
 };
 export default styled;
 export declare const styledFlatList: {
-    <S>(chunks: TemplateStringsArray, ...functs: (string | number | boolean | Functs<S> | null | undefined)[]): <Type>(props: S & FlatListProps<Type> & OptionalProps) => JSX.Element;
-    attrs<S_1>(opts: Partial<S_1 & FlatListProps<any>> | ((props: S_1 & FlatListProps<any>) => Partial<S_1 & FlatListProps<any>>)): (chunks: TemplateStringsArray, ...functs: (string | number | boolean | Functs<S_1 & FlatListProps<any>> | null | undefined)[]) => <Props>(componentProps: S_1 & FlatListProps<Props> & OptionalProps) => JSX.Element;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]): <Type>(props: S & FlatListProps<Type> & OptionalProps) => JSX.Element;
+    attrs<S_1>(opts: Partial<S_1 & FlatListProps<any>> | ((props: S_1 & FlatListProps<any>) => Partial<S_1 & FlatListProps<any>>)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1 & FlatListProps<any>>)[]) => <Props>(componentProps: S_1 & FlatListProps<Props> & OptionalProps) => JSX.Element;
 };
 export declare const styledSectionList: {
-    <S>(chunks: TemplateStringsArray, ...functs: (string | number | boolean | Functs<S> | null | undefined)[]): <Type>(props: S & SectionListProps<Type, import("react-native").DefaultSectionT> & OptionalProps) => JSX.Element;
-    attrs<S_1>(opts: Partial<S_1 & SectionListProps<any, import("react-native").DefaultSectionT>> | ((props: S_1 & SectionListProps<any, import("react-native").DefaultSectionT>) => Partial<S_1 & SectionListProps<any, import("react-native").DefaultSectionT>>)): (chunks: TemplateStringsArray, ...functs: (string | number | boolean | Functs<S_1 & SectionListProps<any, import("react-native").DefaultSectionT>> | null | undefined)[]) => <Props>(componentProps: S_1 & SectionListProps<Props, import("react-native").DefaultSectionT> & OptionalProps) => JSX.Element;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]): <Type>(props: S & SectionListProps<Type, import("react-native").DefaultSectionT> & OptionalProps) => JSX.Element;
+    attrs<S_1>(opts: Partial<S_1 & SectionListProps<any, import("react-native").DefaultSectionT>> | ((props: S_1 & SectionListProps<any, import("react-native").DefaultSectionT>) => Partial<S_1 & SectionListProps<any, import("react-native").DefaultSectionT>>)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1 & SectionListProps<any, import("react-native").DefaultSectionT>>)[]) => <Props>(componentProps: S_1 & SectionListProps<Props, import("react-native").DefaultSectionT> & OptionalProps) => JSX.Element;
 };
 export declare const styledVirtualizedList: {
-    <S>(chunks: TemplateStringsArray, ...functs: (string | number | boolean | Functs<S> | null | undefined)[]): <Type>(props: S & VirtualizedListProps<Type> & OptionalProps) => JSX.Element;
-    attrs<S_1>(opts: Partial<S_1 & VirtualizedListProps<any>> | ((props: S_1 & VirtualizedListProps<any>) => Partial<S_1 & VirtualizedListProps<any>>)): (chunks: TemplateStringsArray, ...functs: (string | number | boolean | Functs<S_1 & VirtualizedListProps<any>> | null | undefined)[]) => <Props>(componentProps: S_1 & VirtualizedListProps<Props> & OptionalProps) => JSX.Element;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]): <Type>(props: S & VirtualizedListProps<Type> & OptionalProps) => JSX.Element;
+    attrs<S_1>(opts: Partial<S_1 & VirtualizedListProps<any>> | ((props: S_1 & VirtualizedListProps<any>) => Partial<S_1 & VirtualizedListProps<any>>)): (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S_1 & VirtualizedListProps<any>>)[]) => <Props>(componentProps: S_1 & VirtualizedListProps<Props> & OptionalProps) => JSX.Element;
 };

package/dist/styleComponent.js

@@ -122,10 +122,10 @@ const styled = (Component) => {
             // if (em !== currentFontSize) {
             if (finalStyle.fontSize) {
                 return react_1.default.createElement(features_1.FontSizeContext.Provider, { value: em },
-                    react_1.default.createElement(Component, Object.assign({ ref: ref }, props, newProps)));
+                    react_1.default.createElement(Component, { ref: ref, ...props, ...newProps }));
             }
             else {
-                return react_1.default.createElement(Component, Object.assign({ ref: ref }, props, newProps));
+                return react_1.default.createElement(Component, { ref: ref, ...props, ...newProps });
             }
         });
         return ForwardRefComponent;
@@ -135,7 +135,7 @@ const styled = (Component) => {
         const ComponentWithAttrs = styledComponent(chunks, ...functs);
         const ForwardRefComponent = react_1.default.forwardRef((props, ref) => {
             const attrs = (opts instanceof Function) ? opts(props) : opts;
-            return react_1.default.createElement(ComponentWithAttrs, Object.assign({ ref: ref }, props, attrs));
+            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;
@@ -153,5 +153,5 @@ const styledVirtualizedList = (chunks, ...functs) => (props) => invoke(styled(re
 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, Object.assign({}, props));
+    return react_1.default.createElement(Component, { ...props });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.3.0",
+  "version": "1.4.2",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",
@@ -23,9 +23,9 @@
     "@types/jest": "^26.0.20",
     "@types/react": "^17.0.1",
     "@types/react-native": "^0.63.48",
-    "@typescript-eslint/eslint-plugin": "^4.15.0",
-    "@typescript-eslint/parser": "^4.15.0",
-    "babel-jest": "^26.6.3",
+    "@typescript-eslint/eslint-plugin": "^4.29.2",
+    "@typescript-eslint/parser": "^4.29.2",
+    "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "dotenv": "^8.2.0",
     "eslint": "^7.19.0",
@@ -49,9 +49,9 @@
     "react-native-web": "^0.17.1",
     "react-test-renderer": "17.0.2",
     "release-it": "^14.3.0",
-    "ts-jest": "^26.5.1",
-    "ts-loader": "^8.0.17",
-    "typescript": "^4.1.4",
+    "ts-jest": "^27.0.5",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.3.5",
     "webpack": "^5.21.2",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"

package/src/cssToRN/index.ts

@@ -42,8 +42,8 @@ export function cssToRNStyle (css: string, units: { em?: number, width?: number,
     vh: height / 100,
     vmin: Math.min(width, height) / 100,
     vmax: Math.max(width, height) / 100,
-    width: 1,
-    height: 1,
+    width: 100,
+    height: 100,
     rem: 16,
     px: 1,
     pt: 72 / 96,
@@ -59,8 +59,9 @@ export function cssToRNStyle (css: string, units: { em?: number, width?: number,
 
 function cssChunkToStyle (css: string) {
   const result: PartialStyle = {}
-  css.split(/\s*;\s*/mg).forEach((entry: string) => {
-    const [rawKey, rawValue] = entry.split(':')
+  css.split(/\s*;\s*(?!base64)/mg).forEach((entry: string) => {
+    const [rawKey, ...rest] = entry.split(':')
+    const rawValue = rest.join(':')
     if (!rawValue) return
     const key = kebab2camel(rawKey.trim())
     const value = stripSpaces(rawValue.trim())// We need this to correctly read calc() values

package/src/features.tsx

@@ -41,11 +41,15 @@ export const useMediaQuery = (media: undefined | MediaQuery[], units: Units): St
   }
 }
 
-/** HOC that will apply the font size to the styles defined with em units */
+/** HOC that will measure the layout to handle styles that use % units */
 export const useLayout = (onLayout?: (event: LayoutChangeEvent) => void) => {
   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)
+    if (unmounted.current) return
     const { width, height } = event.nativeEvent.layout
     if (width !== layout.width || height !== layout.height) setLayout({ width, height })
   }, [onLayout, layout.width, layout.height])

package/src/styleComponent.tsx

@@ -17,7 +17,7 @@ export const SharedValue = React.createContext<unknown>(undefined)
 type Primitive = number | string | null | undefined | boolean
 type Functs<T> = (arg: T & { rnCSS?: string; shared: unknown }) => Primitive
 type OptionalProps = {
-  rnCSS?: string;
+  rnCSS?: `${string};`;
   onMouseEnter?: (event: MouseEvent) => void;
   onMouseLeave?: (event: MouseEvent) => void;
   onLayout?: (event: LayoutChangeEvent) => void