rn-css 2.0.2 → 2.1.0

package/dist/convertUnits.js

@@ -17,7 +17,7 @@ function convertValue(key, value, units) {
         return 0;
     }
     // colors should be left untouched
-    if (value.startsWith('#'))
+    if (value.startsWith('#') || value.startsWith('linear-gradient'))
         return value;
     // Percentage values need to rely on an other unit as reference
     const finalUnits = { ...units };

package/dist/cssToRN/convert.js

@@ -136,7 +136,9 @@ function placeContent(value) {
 exports.placeContent = placeContent;
 function background(value) {
     const values = value.match(/(linear-gradient\(|url\().*?\)|[^\s]+/mg) || [];
-    const backgroundColor = values.reverse().find(isColor) || 'transparent';
+    const backgroundColor = values.reverse().find(isColor) ||
+        (values[0]?.startsWith('linear-gradient') && values[0].split(',').map(val => val.trim()).find(isColor)) ||
+        'transparent';
     // We support everything on web
     return react_native_1.Platform.OS === 'web' ? { backgroundColor, background: value } : { backgroundColor };
 }

package/dist/styleComponent.js

@@ -160,7 +160,7 @@ const styled = (Component) => {
         const ForwardRefComponent = react_1.default.forwardRef((props, ref) => {
             const castProps = props;
             const attrs = (opts instanceof Function) ? opts(castProps) : opts;
-            return react_1.default.createElement(ComponentWithAttrs, { ref: ref, ...castProps, ...attrs });
+            return react_1.default.createElement(ComponentWithAttrs, { ref: ref, ...attrs, ...castProps });
         });
         // TODO : Find a way to remove from the Props the properties affected by opts
         return ForwardRefComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",

package/src/convertUnits.ts

@@ -16,7 +16,7 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
     return 0
   }
   // colors should be left untouched
-  if (value.startsWith('#')) return value
+  if (value.startsWith('#') || value.startsWith('linear-gradient')) return value
 
   // Percentage values need to rely on an other unit as reference
   const finalUnits = { ...units }

package/src/cssToRN/convert.ts

@@ -119,7 +119,9 @@ export function placeContent (value: string) {
 
 export function background (value: string) {
   const values = value.match(/(linear-gradient\(|url\().*?\)|[^\s]+/mg) || []
-  const backgroundColor = values.reverse().find(isColor) || 'transparent'
+  const backgroundColor = values.reverse().find(isColor) ||
+    (values[0]?.startsWith('linear-gradient') && values[0].split(',').map(val => val.trim()).find(isColor)) ||
+    'transparent'
   // We support everything on web
   return Platform.OS === 'web' ? { backgroundColor, background: value } : { backgroundColor }
 }

package/src/styleComponent.tsx

@@ -189,7 +189,7 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
     const ForwardRefComponent = React.forwardRef<any, Omit<Props, keyof Result> & Part & Partial<Pick<Props, Extract<keyof Props, keyof Result>>>>((props, ref) => {
       const castProps = props as unknown as Props & Part
       const attrs = (opts instanceof Function) ? opts(castProps) : opts
-      return <ComponentWithAttrs ref={ref} {...castProps} {...attrs} />
+      return <ComponentWithAttrs ref={ref} {...attrs} {...castProps} />
     })
     // TODO : Find a way to remove from the Props the properties affected by opts
     return ForwardRefComponent
@@ -207,6 +207,6 @@ styledSectionList.attrs = <S, Result extends Partial<S & SectionListProps<any> &
 export const styledVirtualizedList = <S, >(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & VirtualizedListProps<any> & OptionalProps>)[]) => <Type, >(props: S & OptionalProps & VirtualizedListProps<Type>) => invoke(styled<ViewStyle, VirtualizedListProps<Type>>(VirtualizedList)(chunks, ...functs), props)
 styledVirtualizedList.attrs = <S, Result extends Partial<S & VirtualizedListProps<any> & OptionalProps> = {} >(opts: Result | ((props: S & OptionalProps & VirtualizedListProps<any>) => Result)) => (chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S>)[]) => <Props, >(componentProps: Omit<VirtualizedListProps<Props> & OptionalProps, keyof Result> & S & Partial<Result>) => invoke(styled<ViewStyle, VirtualizedListProps<Props>>(VirtualizedList).attrs<S>(opts)(chunks, ...functs), componentProps as any)
 
-function invoke<T> (Component: React.ComponentType<T>, props: T) {
+function invoke<T extends object> (Component: React.ComponentType<T>, props: T) {
   return <Component {...props} />
 }