Component as style source (#3)

Author: Augustach

src/__tests__/mixins.test.tsx

@@ -1,5 +1,6 @@
 import { createStyled } from '../styled'
 import { buildDynamicStyles } from '../buildDynamicStyles'
+import styled from '../..'
 
 const { css } = createStyled()
 const props = { theme: {} }
@@ -104,4 +105,20 @@ describe('mixins', () => {
             flex: 3,
         })
     })
+
+    it('Should override styled component', () => {
+        const Component = styled.View`
+            flex: 1;
+        `
+
+        const styles = css`
+            ${Component};
+            height: 2px;
+        `
+
+        expect(buildDynamicStyles(props, styles)).toStrictEqual({
+            flex: 1,
+            height: 2,
+        })
+    })
 })

src/parsers.ts

@@ -1,7 +1,7 @@
 import { getStylesForProperty } from 'css-to-react-native'
 import { UnknownProps, UnknownStyles } from './types'
 import { buildDynamicStyles } from './buildDynamicStyles'
-import { isFunction } from './utils'
+import { isFunction, isStyledComponent } from './utils'
 
 /**
  * If at least one of args is a function, return a function that will be called with the props passed to the component.
@@ -78,9 +78,13 @@ export const runtime = (key: string, value: unknown) => {
 }
 
 export const mixin = (value: unknown) => {
+  if (isStyledComponent(value)) {
+    value = value.styles
+  }
   if (isFunction(value)) {
+    const fn = value as Function
     return dynamic((props, style) => {
-      const mixinStyles = value(props)
+      const mixinStyles = fn(props)
       if (mixinStyles && typeof mixinStyles === 'object') {
         buildDynamicStyles(props, mixinStyles, style)
       }

src/styled.tsx

@@ -1,6 +1,8 @@
 import React, { PropsWithChildren, createElement, useContext } from 'react'
 import {
+  ActivityIndicator,
   Button,
+  DrawerLayoutAndroid,
   FlatList,
   Image,
   ImageBackground,
@@ -12,6 +14,7 @@ import {
   ScrollView,
   SectionList,
   StyleProp,
+  Switch,
   Text,
   TextInput,
   TouchableHighlight,
@@ -33,26 +36,15 @@ import {
   AsComponentProps,
   UnknownStyles,
   StyledObject,
+  StyledComponent,
+  AnyStyleProps,
 } from './types'
 import { buildPropsFromAttrs } from './buildPropsFromAttrs'
 import { substitute, runtime, mixin } from './parsers'
 import { createTheme } from './theme'
 import { splitAttrs } from './splitAttrs'
 import { buildDynamicStyles } from './buildDynamicStyles'
-import { isFunction } from './utils'
-
-interface AnyStyleProps {
-  style?: StyleProp<UnknownStyles>
-}
-
-type StyledComponent = React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<UnknownProps & AnyStyleProps & AsComponentProps>, "ref"> & React.RefAttributes<unknown>> & {
-  isStyled?: boolean
-  initialStyles: UnknownStyles
-  attrs: InnerAttrs[]
-  origin: AnyComponent
-}
-
-const isStyledComponent = (component: AnyComponent): component is StyledComponent => !!(component as StyledComponent)?.isStyled
+import { isFunction, isStyledComponent } from './utils'
 
 const methods = {
   substitute,
@@ -70,7 +62,7 @@ export function createStyled<Theme extends AnyTheme>() {
           throw new Error('It seems you forgot to add babel plugin.')
         }
       }
-      initialStyles = isStyledComponent(Component) ? { ...Component.initialStyles, ...initialStyles } : initialStyles
+      initialStyles = isStyledComponent(Component) ? { ...Component.styles, ...initialStyles } : initialStyles
       attrs = isStyledComponent(Component) ? [...Component.attrs, ...attrs] : attrs
       const hasDynamicStyles = Object.keys(initialStyles).some((key) => isFunction(initialStyles[key]))
       const fixedStyle = hasDynamicStyles ? undefined : initialStyles
@@ -112,7 +104,7 @@ export function createStyled<Theme extends AnyTheme>() {
 
       StyledComponent.displayName = 'StyledComponent'
       StyledComponent.isStyled = true
-      StyledComponent.initialStyles = initialStyles
+      StyledComponent.styles = initialStyles
       StyledComponent.attrs = attrs
       StyledComponent.defaultProps = Object.assign({ style: fixedStyle }, fixedProps)
       StyledComponent.origin = origin
@@ -129,10 +121,12 @@ export function createStyled<Theme extends AnyTheme>() {
     innerStyled.attrs = attrs(innerStyled)
     // We use as unknown as Type constraction here becasue
     // it is expected that argument so the styled function is transformed to an Array<Array> type during Babel transpilation.
-    return innerStyled as Styled<C, Theme>
+    return innerStyled as unknown as Styled<C, Theme>
   }
 
+  styled.ActivityIndicator = styled(ActivityIndicator)
   styled.Button = styled(Button)
+  styled.DrawerLayoutAndroid = styled(DrawerLayoutAndroid)
   styled.FlatList = styled(FlatList)
   styled.Image = styled(Image)
   styled.KeyboardAvoidingView = styled(KeyboardAvoidingView)
@@ -142,6 +136,7 @@ export function createStyled<Theme extends AnyTheme>() {
   styled.SafeAreaView = styled(SafeAreaView)
   styled.ScrollView = styled(ScrollView)
   styled.SectionList = styled(SectionList)
+  styled.Switch = styled(Switch)
   styled.Text = styled(Text)
   styled.TextInput = styled(TextInput)
   styled.TouchableHighlight = styled(TouchableHighlight)

src/types.ts

@@ -1,4 +1,5 @@
 import React, { ComponentPropsWithRef, ForwardRefExoticComponent } from 'react'
+import { StyleProp } from 'react-native'
 
 export type AnyComponent<P extends object = any> = React.ComponentType<P>
 
@@ -16,7 +17,14 @@ export interface StyledObject<Props extends object = BaseObject> {
   [key: string]: StyledObject<Props> | string | number | StyleFunction<Props> | Array<Interpolation<Props>> | undefined
 }
 
+/**
+ * Use this type to disambiguate between a styled-component instance
+ * and a StyleFunction or any other type of function.
+ */
+export type StyledComponentBrand<Props extends object> = { styles: StyledObject<Props>; readonly _sc: symbol }
+
 export type Interpolation<Props extends object> =
+  | StyledComponentBrand<Props>
   | StyleFunction<Props>
   | StyledObject<Props>
   | TemplateStringsArray
@@ -51,7 +59,7 @@ export interface Styled<
   <Props extends object = OwnProps>(
     styles: Styles<Themed<OwnProps & Props, Theme>>,
     ...interpolations: Array<Interpolation<Themed<OwnProps & Props, Theme>>>
-  ): ForwardRefExoticComponent<Substitute<OwnProps, Props & AsComponentProps>>
+  ): ForwardRefExoticComponent<Substitute<OwnProps, Props & AsComponentProps>> & StyledComponentBrand<OwnProps & Props>
   attrs<Props extends object, R extends object = Props>(
     attrs: ((props: Themed<Props & OwnProps, Theme>) => PickProps<R, OwnProps>) | PickProps<R, OwnProps>
   ): Styled<C, Theme, FastOmit<OwnProps, keyof R> & Props & Partial<R>>
@@ -61,3 +69,14 @@ export type UnknownProps = Record<string, unknown>
 export type UnknownStyles = Record<string, any>
 export type AttrsFn = (props: Themed<UnknownProps, AnyTheme>) => UnknownProps
 export type InnerAttrs = AttrsFn | UnknownProps
+
+export interface AnyStyleProps {
+  style?: StyleProp<UnknownStyles>
+}
+
+export type StyledComponent = React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<UnknownProps & AnyStyleProps & AsComponentProps>, "ref"> & React.RefAttributes<unknown>> & {
+  isStyled?: boolean
+  styles: StyledObject
+  attrs: InnerAttrs[]
+  origin: AnyComponent
+}

src/utils.ts

@@ -1 +1,5 @@
+import { StyledComponent } from './types'
+
 export const isFunction = (fn: any): fn is Function => typeof fn === 'function'
+
+export const isStyledComponent = (component: any): component is StyledComponent => !!(component as StyledComponent)?.isStyled