rn-css 1.7.0 → 1.8.1

package/dist/rnToCss.d.ts

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

package/dist/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/styleComponent.d.ts

@@ -1,44 +1,44 @@
 import React, { MouseEvent } from 'react';
 import { FlatListProps, LayoutChangeEvent, SectionListProps, StyleProp, VirtualizedListProps } from 'react-native';
-import type { Units } from './types';
+import type { AnyStyle, 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;
+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 = {
+declare type OptionalProps<T extends AnyStyle = AnyStyle> = {
     rnCSS?: `${string};`;
     onMouseEnter?: (event: MouseEvent) => void;
     onMouseLeave?: (event: MouseEvent) => void;
     onLayout?: (event: LayoutChangeEvent) => void;
     children?: React.ReactNode;
-    style?: StyleProp<any>;
+    style?: StyleProp<T>;
 };
-declare const styled: <Props>(Component: React.ComponentType<Props>) => {
-    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]): React.ForwardRefExoticComponent<Props & S & OptionalProps & {
+declare const styled: <Props, StyleType extends AnyStyle = AnyStyle>(Component: React.ComponentType<Props>) => {
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]): React.ForwardRefExoticComponent<Props & S & OptionalProps<StyleType> & {
         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 & {
+    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<StyleType> & {
         ref?: React.Ref<any> | undefined;
     }>;
 };
 export default styled;
 export declare const styledFlatList: {
-    <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;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]): <Type>(props: S & FlatListProps<Type> & OptionalProps<AnyStyle>) => 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<AnyStyle>) => JSX.Element;
 };
 export declare const styledSectionList: {
-    <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;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]): <Type>(props: S & SectionListProps<Type, import("react-native").DefaultSectionT> & OptionalProps<AnyStyle>) => 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<AnyStyle>) => JSX.Element;
 };
 export declare const styledVirtualizedList: {
-    <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;
+    <S>(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]): <Type>(props: S & VirtualizedListProps<Type> & OptionalProps<AnyStyle>) => 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<AnyStyle>) => JSX.Element;
 };

package/dist/styleComponent.js

@@ -12,13 +12,21 @@ 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.map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? functs[i]({ shared, theme: shared, ...props }) : functs[i]])).flat().join('');
+    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;

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { ViewStyle, TextStyle } from 'react-native';
+import { ViewStyle, TextStyle, ImageStyle } from 'react-native';
 export declare type Units = {
     '%'?: number;
     vw?: number;
@@ -51,7 +51,9 @@ export declare type Context = {
     deviceAspectRatio: number;
     units: Units;
 };
-export declare type PartialStyle = Partial<Record<keyof ViewStyle | keyof TextStyle, string>> & {
+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;

package/package.json

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

package/src/convertStyle.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable react/display-name */
-import { /* StyleSheet, */ TextStyle, ViewStyle } from 'react-native'
+import { /* StyleSheet, */ TextStyle } from 'react-native'
 import { convertValue } from './convertUnits'
-import type { PartialStyle, Units } from './types'
+import type { AnyStyle, CompleteStyle, PartialStyle, Units } from './types'
 
 /** Mix the calculated RN style within the object style */
-const convertStyle = (rnStyle: PartialStyle, units: Units) => {
+const convertStyle = <T extends AnyStyle = AnyStyle>(rnStyle: PartialStyle, units: Units) => {
   /** This is the result of the convertions from css style into RN style */
-  const convertedStyle: TextStyle & ViewStyle = {};
+  const convertedStyle: CompleteStyle = {};
   // If width and height are specified, we can use those values for the first render
   (['width', 'height'] as const).forEach(key => {
     if (!units[key] && rnStyle[key]) {
@@ -52,7 +52,7 @@ const convertStyle = (rnStyle: PartialStyle, units: Units) => {
       convertedStyle[key] = convertValue(key, value, units)
     }
   })
-  return convertedStyle
+  return convertedStyle as T
 }
 
 export default convertStyle

package/src/convertUnits.ts

@@ -11,7 +11,7 @@ export function parseValue (value: string): [number, string | undefined] {
 
 /** Convert a value using the provided unit transform table */
 export function convertValue (key: keyof PartialStyle | keyof Transform, value: string, units: Units): string | number {
-  if (!(Object(value) instanceof String)) {
+  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
   }

package/src/index.tsx

@@ -2,11 +2,12 @@ import React from 'react'
 import * as RN from 'react-native'
 import './polyfill'
 import styledComponent, { styledFlatList, styledSectionList, styledVirtualizedList } from './styleComponent'
+import { AnyStyle } from './types'
 export { cssToRNStyle } from './cssToRN'
 export { SharedValue, FontSizeContext, RemContext, DefaultTheme } from './styleComponent'
 export * from './useTheme'
 
-const styled = <T, >(Component: React.ComponentType<T>) => styledComponent<T>(Component)
+const styled = <T, >(Component: React.ComponentType<T>) => styledComponent<T, AnyStyle>(Component)
 
 styled.ActivityIndicator = styled(RN.ActivityIndicator)
 styled.Button = styled(RN.Button)

package/src/rnToCss.ts

@@ -0,0 +1,11 @@
+import { CompleteStyle } from './types'
+
+const rnToCSS = (rn: Partial<CompleteStyle>) =>
+  Object.entries(rn)
+    .map(([key, value]) => `${camelToKebab(key)}: ${convertValue(value)};`)
+    .join('\n')
+
+const camelToKebab = (str: string) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+const convertValue = (value: unknown) => isNaN(value as number) ? value : (value + 'px')
+
+export default rnToCSS

package/src/styleComponent.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import React, { MouseEvent } from 'react'
-import { FlatList, FlatListProps, LayoutChangeEvent, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, TextStyle, ViewStyle, 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 { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery } from './features'
-import type { Style, Units } from './types'
+import type { AnyStyle, CompleteStyle, Style, Units } from './types'
 import generateHash from './generateHash'
+import rnToCSS from './rnToCss'
 
 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)
@@ -18,40 +19,49 @@ export const SharedValue = React.createContext<unknown>(undefined)
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface DefaultTheme {}
 
-type Primitive = number | string | null | undefined | boolean
+type Primitive = number | string | null | undefined | boolean | CompleteStyle
 type Functs<T> = (arg: T & { rnCSS?: string; shared: unknown, theme: DefaultTheme }) => Primitive
-type OptionalProps = {
+type OptionalProps<T extends AnyStyle = AnyStyle> = {
   rnCSS?: `${string};`;
   onMouseEnter?: (event: MouseEvent) => void;
   onMouseLeave?: (event: MouseEvent) => void;
   onLayout?: (event: LayoutChangeEvent) => void
   children?: React.ReactNode;
-  style?: StyleProp<any>;
+  style?: StyleProp<T>;
 }
+
+/** Converts the tagged template string into a css string */
 function buildCSSString<T extends { rnCSS?: string }> (chunks: TemplateStringsArray, functs: (Primitive | Functs<T>)[], props: T, shared: unknown) {
-  let computedString = chunks.map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? (functs[i] as Functs<T>)({ shared, theme: (shared as DefaultTheme), ...props }) : functs[i]])).flat().join('')
+  let computedString = chunks
+    // Evaluate the chunks from the tagged template
+    .map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? (functs[i] as Functs<T>)({ shared, theme: (shared as DefaultTheme), ...props }) : functs[i]]))
+    .flat()
+    // Convert the objects to string if the result is not a primitive
+    .map(chunk => typeof chunk === 'object' ? rnToCSS(chunk as Partial<CompleteStyle>) : chunk)
+    .join('')
   if (props.rnCSS) computedString += props.rnCSS.replace(/=/gm, ':') + ';'
   return computedString
 }
-const styleMap: Record<string, { style: ViewStyle & TextStyle, usage: number }> = {}
-function getStyle (hash: string, style: ViewStyle & TextStyle) {
+
+const styleMap: Record<string, { style: AnyStyle, usage: number }> = {}
+function getStyle <T extends AnyStyle, > (hash: string, style: T) {
   const styleInfo = styleMap[hash]
   if (styleInfo) {
     styleInfo.usage++
-    return styleInfo.style
+    return styleInfo.style as T
   }
   else {
     const sheet = StyleSheet.create({ [hash]: style })
-    return (styleMap[hash] = { style: sheet[hash], usage: 1 }).style
+    return (styleMap[hash] = { style: sheet[hash], usage: 1 }).style as T
   }
 }
 function removeStyle (hash: string) {
   styleMap[hash].usage--
   if (styleMap[hash].usage <= 0) delete styleMap[hash]
 }
-const styled = <Props, >(Component: React.ComponentType<Props>) => {
+const styled = <Props, StyleType extends AnyStyle = AnyStyle>(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 ForwardRefComponent = React.forwardRef<React.ComponentType<S & Props & OptionalProps<StyleType>>, S & Props & OptionalProps<StyleType>>((props: S & Props & OptionalProps<StyleType>, ref) => {
       const rem = React.useContext(RemContext)
       const shared = React.useContext(SharedValue)
       // Build the css string with the context
@@ -110,13 +120,13 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
       const units = React.useMemo<Units>(() => ({ ...baseUnits, em }), [baseUnits, em])
 
       const { style: styleConvertedFromCSS, hash } = React.useMemo(() => {
-        const style = convertStyle(finalStyle, units)
+        const style = convertStyle<StyleType>(finalStyle, units)
         delete (style as Style).textOverflow
         const hash = generateHash(JSON.stringify(style))
-        return { style: getStyle(hash, style), hash }
+        return { style: getStyle<StyleType>(hash, style), hash }
       }, [finalStyle, units])
       const newProps = React.useMemo(() => {
-        const newProps: OptionalProps = { style: [styleConvertedFromCSS, props.style], onMouseEnter, onMouseLeave, onLayout }
+        const newProps: OptionalProps<StyleType> = { style: [styleConvertedFromCSS, props.style], onMouseEnter, onMouseLeave, onLayout }
         if (finalStyle.textOverflow === 'ellipsis') {
           Object.assign(newProps, { numberOfLines: 1 })
         }
@@ -135,7 +145,7 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
         return <Component ref={ref} {...props} {...newProps} />
       }
     })
-    return ForwardRefComponent as React.ForwardRefExoticComponent<Props & S & OptionalProps & { ref?: React.Ref<any> }>
+    return ForwardRefComponent as React.ForwardRefExoticComponent<Props & S & OptionalProps<StyleType> & { ref?: React.Ref<any> }>
   }
 
   // provide styled(Comp).attrs({} | () => {}) feature
@@ -146,7 +156,7 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
       return <ComponentWithAttrs ref={ref} {...props} {...attrs} />
     })
     // TODO : Find a way to remove from the Props the properties affected by opts
-    return ForwardRefComponent as React.ForwardRefExoticComponent<(Props | S) & OptionalProps & { ref?: React.Ref<any> }>
+    return ForwardRefComponent as React.ForwardRefExoticComponent<(Props | S) & OptionalProps<StyleType> & { ref?: React.Ref<any> }>
   }
 
   return styledComponent

package/src/types.ts

@@ -1,4 +1,4 @@
-import { ViewStyle, TextStyle } from 'react-native'
+import { ViewStyle, TextStyle, ImageStyle } from 'react-native'
 
 export type Units = {
   '%'?: number;
@@ -54,7 +54,11 @@ export type Context = {
   units: Units
 }
 
-export type PartialStyle = Partial<Record<keyof ViewStyle | keyof TextStyle, string>> & {
+export type AnyStyle = ViewStyle | TextStyle | ImageStyle
+
+export type CompleteStyle = ViewStyle & TextStyle & ImageStyle
+
+export type PartialStyle = Partial<Record<keyof CompleteStyle, string>> & {
   shadowOffset?: {
     width: string;
     height: string;