feat: replace styled-components for native

Author: igorwessel

packages/styled-components-native/src/createCssFunction.ts

@@ -0,0 +1,22 @@
+/* eslint-disable no-continue, no-loop-func, no-cond-assign */
+import { css as scCss } from 'styled-components/native'
+import {
+  FlattenSimpleInterpolation,
+  ThemedCssFunction,
+} from 'styled-components'
+import { StyleGenerator, Theme } from '@xstyled/system'
+import { flattenStrings } from '@xstyled/util'
+import { createTransform } from '@xstyled/core'
+
+export type XCSSFunction = ThemedCssFunction<Theme>
+
+export const createCssFunction = <TGen extends StyleGenerator>(
+  generator: TGen,
+): XCSSFunction => {
+  const transform = createTransform(generator)
+  return ((...args: Parameters<XCSSFunction>) => {
+    const scCssArgs = scCss(...args)
+    const flattenedArgs = flattenStrings(scCssArgs as any[])
+    return flattenedArgs.map(transform) as FlattenSimpleInterpolation
+  }) as XCSSFunction
+}

packages/styled-components-native/src/createStyled.ts

@@ -0,0 +1,99 @@
+/* eslint-disable no-continue, no-loop-func, no-cond-assign */
+import type { ElementType } from 'react'
+import type { ReactNativeThemedStyledFunction } from 'styled-components/native'
+import { string } from '@xstyled/util'
+import { StyleGenerator, Theme } from '@xstyled/system'
+import { StyledConfig } from 'styled-components'
+import * as RN from 'react-native'
+import { scStyled } from './scStyled'
+import { createCssFunction, XCSSFunction } from './createCssFunction'
+import type { ReactNativeThemedBaseStyledInterface } from './types'
+
+const getCreateStyle = (
+  baseCreateStyle: ReactNativeThemedStyledFunction<any, any>,
+  css: XCSSFunction,
+  generator?: StyleGenerator,
+) => {
+  const createStyle = (...args: Parameters<typeof css>) =>
+    // @ts-ignore
+    baseCreateStyle`${css(...args)}${generator}`
+  createStyle.attrs = (attrs: Parameters<typeof baseCreateStyle.attrs>[0]) =>
+    getCreateStyle(baseCreateStyle.attrs(attrs), css, generator)
+  createStyle.withConfig = (config: StyledConfig<any>) =>
+    getCreateStyle(baseCreateStyle.withConfig(config), css, generator)
+
+  return createStyle
+}
+
+export type XStyled = ReactNativeThemedBaseStyledInterface<Theme>
+
+const createShouldForwardProp = (
+  generator: StyleGenerator,
+): ((
+  prop: string | number | symbol,
+  defaultValidatorFn: (prop: string | number | symbol) => boolean,
+  elementToBeCreated?: ElementType,
+) => boolean) => {
+  const propSet = new Set<string>(generator.meta.props)
+
+  return (
+    prop: string | number | symbol,
+    defaultValidatorFn: (prop: string | number | symbol) => boolean,
+    elementToBeCreated?: ElementType,
+  ) => {
+    if (string(prop) && propSet.has(prop)) {
+      return false
+    }
+    if (typeof elementToBeCreated === 'string') {
+      // We must test elementToBeCreated so we can pass through props for <x.div
+      // as={Component} />. However elementToBeCreated isn't available until
+      // styled-components 5.2.4 or 6, and in the meantime will be undefined.
+      // This means that HTML elements could get unwanted props, but ultimately
+      // this is a bug in the caller, because why are they passing unwanted
+      // props?
+      return defaultValidatorFn(prop)
+    }
+    return true
+  }
+}
+
+export const createBaseStyled = <TGen extends StyleGenerator>(
+  css: XCSSFunction,
+  generator?: TGen,
+): XStyled => {
+  const config = generator
+    ? {
+        shouldForwardProp: createShouldForwardProp(generator),
+      }
+    : {}
+  return ((component: Parameters<typeof scStyled>[0]) => {
+    const baseStyled = scStyled(component)
+
+    return getCreateStyle(
+      config ? baseStyled.withConfig(config) : baseStyled,
+      css,
+      generator,
+    )
+  }) as XStyled
+}
+
+export const createStyled = <TGen extends StyleGenerator>(
+  generator: TGen,
+): XStyled => {
+  const css = createCssFunction(generator)
+  // const styled = createBaseStyled(css)
+  const xstyled = createBaseStyled(css, generator)
+
+  Object.keys(scStyled).forEach((tag) => {
+    Object.defineProperty(xstyled, tag, {
+      enumerable: true,
+      configurable: false,
+      get() {
+        // @ts-ignore
+        return xstyled(RN[tag])
+      },
+    })
+  })
+
+  return xstyled
+}

packages/styled-components-native/src/createX.ts

@@ -0,0 +1,39 @@
+/* eslint-disable no-continue, no-loop-func, no-cond-assign */
+import { StyledComponent } from 'styled-components'
+import { DefaultTheme } from 'styled-components/native'
+import { scStyled } from './scStyled'
+import { StyleGenerator, StyleGeneratorProps } from '@xstyled/system'
+import { createBaseStyled } from './createStyled'
+import { createCssFunction } from './createCssFunction'
+import { NativeElement, NativeElementsKeys } from './types'
+import * as RN from 'react-native'
+
+export type X<TGen extends StyleGenerator> = {
+  [Key in NativeElementsKeys]: StyledComponent<
+    NativeElement<Key>,
+    DefaultTheme,
+    StyleGeneratorProps<TGen>,
+    'color'
+  >
+}
+
+export const createX = <TGen extends StyleGenerator>(
+  generator: TGen,
+): X<TGen> => {
+  const xstyled = createBaseStyled(createCssFunction(generator), generator)
+
+  const x = {} as X<TGen>
+
+  Object.keys(scStyled).forEach((tag) => {
+    Object.defineProperty(x, tag, {
+      enumerable: true,
+      configurable: false,
+      get() {
+        // @ts-ignore
+        return xstyled(RN[tag])``
+      },
+    })
+  })
+
+  return x
+}

packages/styled-components-native/src/css.test.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import '@testing-library/jest-native/extend-expect'
+import { render, screen } from '@testing-library/react-native'
+import { css, ThemeProvider } from '.'
+import { scStyled as styled } from './scStyled'
+
+const SpaceTheme = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ThemeProvider theme={{ space: { 1: 4, 2: 8 } }}>{children}</ThemeProvider>
+  )
+}
+
+describe('#css', () => {
+  it('transforms rules', () => {
+    const Dummy = styled.View`
+      ${css`
+        margin: 2;
+        padding: 1;
+        margin-top: 2px;
+      `}
+    `
+    render(
+      <SpaceTheme>
+        <Dummy testID="dummy" />
+      </SpaceTheme>,
+    )
+
+    const expectedStyle = {
+      marginBottom: 8,
+      marginLeft: 8,
+      marginRight: 8,
+      marginTop: 2,
+      paddingBottom: 4,
+      paddingLeft: 4,
+      paddingRight: 4,
+      paddingTop: 4,
+    }
+
+    expect(screen.getByTestId('dummy')).toHaveStyle(expectedStyle)
+  })
+
+  it('transforms multi values', () => {
+    const Dummy = styled.View`
+      ${css`
+        margin: 1 2;
+      `}
+    `
+    render(
+      <SpaceTheme>
+        <Dummy testID="dummy" />
+      </SpaceTheme>,
+    )
+    expect(screen.getByTestId('dummy')).toHaveStyle({
+      marginBottom: 4,
+      marginTop: 4,
+      marginLeft: 8,
+      marginRight: 8,
+    })
+  })
+})

packages/styled-components-native/src/index.ts

@@ -0,0 +1,18 @@
+import { defaultTheme } from './defaultTheme'
+export {
+  isStyledComponent,
+  ThemeConsumer,
+  ThemeContext,
+  ThemeProvider,
+  withTheme,
+} from 'styled-components/native'
+export * from './theme'
+export * from '@xstyled/system'
+export * from './create'
+
+// Create and export default system
+import { system } from '@xstyled/system'
+import { createCss } from './create'
+
+const { css, styled, x } = createCss(system)
+export { css, styled, styled as default, x, defaultTheme }

packages/styled-components-native/src/scStyled.ts

@@ -0,0 +1,9 @@
+import styled, {
+  DefaultTheme,
+  ReactNativeStyledInterface,
+} from 'styled-components/native'
+
+// Provide interop since `styled-components` does not work out of the box with ESM
+export const scStyled: ReactNativeStyledInterface<DefaultTheme> =
+  // @ts-ignore
+  typeof styled === 'function' ? styled : styled.default