rn-css 1.11.10 → 1.12.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

@@ -26,7 +26,7 @@ function buildCSSString(chunks, functs, props, shared) {
         .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)
+        .map(chunk => chunk && typeof chunk === 'object' ? (0, rnToCss_1.default)(chunk) : chunk)
         .join('');
     if (props.rnCSS)
         computedString += props.rnCSS.replace(/=/gm, ':') + ';';
@@ -158,8 +158,9 @@ const styled = (Component) => {
         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 });
+            const castProps = props;
+            const attrs = (opts instanceof Function) ? opts(castProps) : opts;
+            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": "1.11.10",
+  "version": "1.12.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

@@ -44,7 +44,7 @@ function buildCSSString<T extends { rnCSS?: string }> (chunks: TemplateStringsAr
     .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)
+    .map(chunk => chunk && typeof chunk === 'object' ? rnToCSS(chunk as Partial<CompleteStyle>) : chunk)
     .join('')
   if (props.rnCSS) computedString += props.rnCSS.replace(/=/gm, ':') + ';'
   return computedString
@@ -187,8 +187,9 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
     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.forwardRef<any, Omit<Props, keyof Result> & Part & Partial<Pick<Props, Extract<keyof Props, keyof Result>>>>((props, ref) => {
-      const attrs = (opts instanceof Function) ? opts(props as Props & Part) : opts
-      return <ComponentWithAttrs ref={ref} {...(props as Props & Part)} {...attrs} />
+      const castProps = props as unknown as Props & Part
+      const attrs = (opts instanceof Function) ? opts(castProps) : opts
+      return <ComponentWithAttrs ref={ref} {...attrs} {...castProps} />
     })
     // TODO : Find a way to remove from the Props the properties affected by opts
     return ForwardRefComponent
@@ -206,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} />
 }