feat: plugins API

- Also add utilities: animationDuration, animationTimingFunction,
  maskSize.

- Add a new option "multiple" on `style` for comma separated values. "shorthand" remain for space separated values.

- Add "cssProps" option on `style`. Useful to specify
  which css properties must be interpolated when using `css` or
`styled`.

- Introduce `createCss` function to create a complete set of binded
  xstyled functions.

BREAKING CHANGE:

- Remove `x.extend`
- Remove `createX`
- TypeScript: use `Theme` from `@xstyled/system` everywhere.

Author: gregberge

packages/core/src/index.ts

@@ -1,7 +1,6 @@
 export * from './breakpoints'
 export * from './colorModes'
 export * from './createBox'
-export * from './propGetters'
 export * from './transform'
 export * from './theme'
 export * from './types'

packages/core/src/propGetters.test.ts

@@ -1,4 +1,5 @@
-import { transform } from './transform'
+import { system } from '@xstyled/system'
+import { createTransform } from './transform'
 
 const props = {
   theme: {
@@ -7,6 +8,8 @@ const props = {
   },
 }
 
+const transform = createTransform(system)
+
 const transformToStr = (s: string) =>
   transform(s)
     .map((x: Function | string) => (typeof x === 'function' ? x(props) : x))

packages/core/src/propGetters.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-continue, no-loop-func, no-cond-assign */
+import type { StyleGenerator } from '@xstyled/system'
 import { mediaGetters } from './mediaGetters'
-import { propGetters } from './propGetters'
 
 // prop name is an ident: word chars, underscore and dash.
 const PROP_CHAR = `[-\\w]`
@@ -62,31 +62,33 @@ const mediaTransform = (rawValue: string) => {
   return values
 }
 
-export const transform = (rawValue: any): any => {
-  if (typeof rawValue !== 'string') return rawValue
-  let matches
-  let lastIndex = 0
-  const values = []
-  while ((matches = MATCH_REGEXP.exec(rawValue))) {
-    const [, prop, colon, value, imp, semi, media, query, brace] = matches
-    if (media) {
-      values.push(rawValue.slice(lastIndex, matches.index))
-      values.push(media)
-      mediaTransform(query).forEach((v) => values.push(v))
-      values.push(brace)
-      lastIndex = matches.index + matches[0].length
-    } else {
-      const getter = (propGetters as any)[prop]
-      if (getter) {
+export const createTransform =
+  (generator: StyleGenerator) =>
+  (rawValue: any): any => {
+    if (typeof rawValue !== 'string') return rawValue
+    let matches
+    let lastIndex = 0
+    const values = []
+    while ((matches = MATCH_REGEXP.exec(rawValue))) {
+      const [, prop, colon, value, imp, semi, media, query, brace] = matches
+      if (media) {
         values.push(rawValue.slice(lastIndex, matches.index))
-        values.push(
-          (p: object) =>
-            `${prop}${colon}${getter(value)(p)}${imp || ''}${semi}`,
-        )
+        values.push(media)
+        mediaTransform(query).forEach((v) => values.push(v))
+        values.push(brace)
         lastIndex = matches.index + matches[0].length
+      } else {
+        const getter = generator.meta.cssGetters[prop]
+        if (getter) {
+          values.push(rawValue.slice(lastIndex, matches.index))
+          values.push(
+            (p: object) =>
+              `${prop}${colon}${getter(value)(p)}${imp || ''}${semi}`,
+          )
+          lastIndex = matches.index + matches[0].length
+        }
       }
     }
+    values.push(rawValue.slice(lastIndex, rawValue.length))
+    return values
   }
-  values.push(rawValue.slice(lastIndex, rawValue.length))
-  return values
-}

packages/core/src/transform.test.ts

@@ -0,0 +1,32 @@
+import { StyleGenerator } from '@xstyled/system'
+import { createCssFunction, XCSSFunction } from './createCssFunction'
+import { createX, X } from './createX'
+import { createStyled, XStyled } from './createStyled'
+import {
+  createCreateGlobalStyle,
+  XCreateGlobalStyle,
+} from './createCreateGlobalStyle'
+import { createCx, Cx } from './createCx'
+import { createJsx, XJsx } from './createJsx'
+
+interface XStyledSet<TGen extends StyleGenerator> {
+  css: XCSSFunction
+  x: X<TGen>
+  styled: XStyled<TGen>
+  createGlobalStyle: XCreateGlobalStyle
+  cx: Cx
+  jsx: XJsx
+}
+
+export const createCss = <TGen extends StyleGenerator>(
+  generator: TGen,
+): XStyledSet<TGen> => {
+  return {
+    css: createCssFunction(generator),
+    x: createX(generator),
+    styled: createStyled(generator),
+    createGlobalStyle: createCreateGlobalStyle(generator),
+    cx: createCx(generator),
+    jsx: createJsx(generator),
+  }
+}

packages/core/src/transform.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import * as React from 'react'
+import { Global, useTheme } from '@emotion/react'
+import { StyleGenerator } from '@xstyled/system'
+import { createCssFunction, XCSSFunction } from './createCssFunction'
+
+export interface XCreateGlobalStyle<P extends object = {}> {
+  (...styles: Parameters<XCSSFunction>): React.FC<P>
+}
+
+export const createCreateGlobalStyle = <TGen extends StyleGenerator>(
+  generator: TGen,
+): XCreateGlobalStyle => {
+  const css = createCssFunction(generator)
+  return <P extends object = {}>(...styles: Parameters<typeof css>) => {
+    const GlobalStyle = (props: P) => {
+      const theme = useTheme()
+      return <Global styles={css(...styles)({ theme, ...props })} />
+    }
+    GlobalStyle.displayName = 'GlobalStyle'
+    return GlobalStyle
+  }
+}