feat(states): put states in theme (#206)

BREAKING CHANGE: states are now passed in object.

Author: gregberge

packages/prop-types/src/index.test.ts

@@ -319,7 +319,6 @@ export const defaultTheme = {
   colors: generateHexAlphaVariants(colors),
   space,
   screens: {
-    _: 0,
     xs: 0,
     sm: 640,
     md: 768,
@@ -472,6 +471,24 @@ export const defaultTheme = {
     pulse: 'x-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
     bounce: 'x-bounce 1s infinite',
   },
+  states: {
+    _: null,
+    motionSafe: '@media (prefers-reduced-motion: no-preference)',
+    motionReduce: '@media (prefers-reduced-motion: reduce)',
+    first: '&:first-child',
+    last: '&:last-child',
+    odd: '&:odd',
+    even: '&:even',
+    visited: '&:visited',
+    checked: '&:checked',
+    focusWithin: '&:focus-within',
+    hover: '&:hover',
+    focus: '&:focus',
+    focusVisible: '&:focus-visible',
+    active: '&:active',
+    disabled: '&:disabled',
+    placeholder: '&::placeholder',
+  },
 }
 
 export type DefaultTheme = typeof defaultTheme

packages/system/src/defaultStates.ts

@@ -0,0 +1,8 @@
+import { is, getThemeValue } from '@xstyled/util'
+import { IStates, IProps } from './types'
+
+export function getThemeStates(props: IProps): IStates {
+  const themeStates = getThemeValue<IProps>(props, 'states')
+  if (is(themeStates)) return themeStates
+  return {}
+}

packages/system/src/defaultTheme.ts

@@ -96,23 +96,49 @@ describe('#style', () => {
       })
     })
 
-    it('works with states', () => {
-      const theme = { screens: { _: 0, md: 400 } }
-      expect(fontFamily({ hoverFontFamily: 'title' })).toEqual({
+    it('works with variants', () => {
+      const theme = {
+        states: { hover: '&:hover', first: '&:first-child' },
+        screens: { _: 0, md: 400 },
+      }
+      expect(fontFamily({ fontFamily: { hover: 'title' }, theme })).toEqual({
         '&:hover': {
           fontFamily: 'title',
         },
       })
       expect(
         fontFamily({
-          motionReduceFontFamily: { md: 'title' },
+          fontFamily: { hover: { md: 'title' } },
           theme,
         }),
       ).toEqual({
-        '@media (prefers-reduced-motion: reduce)': {
+        '&:hover': {
           '@media (min-width: 400px)': { fontFamily: 'title' },
         },
       })
+      expect(
+        fontFamily({
+          fontFamily: { hover: { first: { md: 'title' } } },
+          theme,
+        }),
+      ).toEqual({
+        '&:hover': {
+          '&:first-child': {
+            '@media (min-width: 400px)': { fontFamily: 'title' },
+          },
+        },
+      })
+      expect(
+        fontFamily({
+          fontFamily: { _: 'title', hover: 'title2' },
+          theme,
+        }),
+      ).toEqual({
+        fontFamily: 'title',
+        '&:hover': {
+          fontFamily: 'title2',
+        },
+      })
     })
 
     it('returns empty object if style is not valid', () => {

packages/system/src/states.ts

@@ -7,13 +7,12 @@ import {
   obj,
   getThemeValue,
   warn,
-  identity,
   merge,
   assign,
   cascade,
 } from '@xstyled/util'
 import { getBreakpoints, getBreakpointMin, mediaMinWidth } from './media'
-import { defaultStates } from './defaultStates'
+import { getThemeStates } from './states'
 import {
   IProps,
   IStyles,
@@ -26,10 +25,6 @@ import {
   Mixin,
 } from './types'
 
-const defaultStateKeys = Object.keys(
-  defaultStates,
-) as (keyof typeof defaultStates)[]
-
 const cacheSupported =
   typeof Map !== 'undefined' && typeof WeakMap !== 'undefined'
 
@@ -143,42 +138,43 @@ export function createStyleGenerator(
   return generator
 }
 
-function getMedias(props: IProps) {
+function getStates(props: IProps) {
   const breakpoints = getBreakpoints(props)
   const medias: { [key: string]: string | null } = {}
   for (const breakpoint in breakpoints) {
     medias[breakpoint] = mediaMinWidth(
       getBreakpointMin(breakpoints, breakpoint),
     )
   }
-  return medias
+  return { ...medias, ...getThemeStates(props) }
 }
 
-function getCachedMedias(props: IProps, cache: ThemeCache) {
-  if (cache.has('_medias')) {
-    return cache.get('_medias')
+function getCachedStates(props: IProps, cache: ThemeCache) {
+  if (cache.has('_states')) {
+    return cache.get('_states')
   }
-  const medias = getMedias(props)
-  cache.set('_medias', medias)
-  return medias
+  const states = getStates(props)
+  cache.set('_states', states)
+  return states
 }
 
-export function reduceBreakpoints(
+export function reduceStates(
   props: IProps,
   values: { [key: string]: any },
-  getStyle: (value: any) => IStyles | null = identity,
+  getStyle: (value: any) => IStyles | null,
   cache?: ThemeCache,
-) {
-  const medias = cache ? getCachedMedias(props, cache) : getMedias(props)
+): IStyles {
+  const states = cache ? getCachedStates(props, cache) : getStates(props)
   let styles: IStyles = {}
-  for (const breakpoint in values) {
-    const style = getStyle(values[breakpoint])
+  for (const value in values) {
+    const style = getStyle(values[value])
     if (style === null) continue
-    const media = medias[breakpoint]
-    if (media === null) {
+    const state = states[value]
+    if (state === undefined) continue
+    if (state === null) {
       styles = merge(styles, style)
     } else {
-      styles[media] = styles[media] ? assign(styles[media], style) : style
+      styles[state] = styles[state] ? assign(styles[state], style) : style
     }
   }
   return styles
@@ -205,32 +201,18 @@ function getStyleFactory(
   themeGet: ThemeGetter,
 ): StyleGetter {
   return function getStyle(props: IProps) {
-    const value = props[prop]
-    if (!is(value)) return null
-    const cache = getCacheNamespace(props.theme, prop)
-
-    if (obj(value)) {
-      return reduceBreakpoints(
-        props,
-        value,
-        (breakpointValue) =>
-          styleFromValue(mixin, breakpointValue, props, themeGet, cache),
-        cache,
-      )
-    }
+    const fromValue = (value: any) => {
+      if (!is(value)) return null
+      const cache = getCacheNamespace(props.theme, prop)
 
-    return styleFromValue(mixin, value, props, themeGet, cache)
-  }
-}
+      if (obj(value)) {
+        return reduceStates(props, value, fromValue, cache)
+      }
 
-function scopeStyleGetter(
-  selector: string,
-  getStyle: StyleGetter,
-): StyleGetter {
-  return (props: IProps) => {
-    const result = getStyle(props)
-    if (result === null) return result
-    return { [selector]: result }
+      return styleFromValue(mixin, value, props, themeGet, cache)
+    }
+
+    return fromValue(props[prop])
   }
 }
 
@@ -289,9 +271,9 @@ export function compose(...generators: StyleGenerator[]): StyleGenerator {
 
     if (!sort) return styles
 
-    const medias = getCachedMedias(
+    const medias = getCachedStates(
       props,
-      getCacheNamespace(props.theme, '__medias'),
+      getCacheNamespace(props.theme, '__states'),
     )
     return sortStyles(styles, medias)
   }
@@ -329,7 +311,6 @@ export function style({
   key,
   transform,
   themeGet,
-  states = defaultStates,
 }: {
   prop: string | string[]
   cssProperty?: CSSProperty
@@ -355,20 +336,7 @@ export function style({
 
   themeGet = themeGet || themeGetter({ key, transform })
 
-  const capitalizedProp = prop.charAt(0).toUpperCase() + prop.slice(1)
   const generators: StyleGenerator[] = []
-  const stateNames =
-    states === defaultStates ? defaultStateKeys : Object.keys(states)
-  for (let i = 0; i < stateNames.length; i++) {
-    const stateName = stateNames[i]
-    const stateProp = `${stateName}${capitalizedProp}`
-    const getStyle = scopeStyleGetter(
-      states[stateName],
-      getStyleFactory(stateProp, mixin, themeGet),
-    )
-    const generator = createStyleGenerator(getStyle, [stateProp])
-    generators.push(generator)
-  }
   const getStyle = getStyleFactory(prop, mixin, themeGet)
   const generator = createStyleGenerator(getStyle, [prop])
   generators.push(generator)

packages/system/src/style.test.ts

@@ -17,21 +17,6 @@ type AnimationProp<T extends ITheme> = SystemProp<
 >
 export interface AnimationProps<T extends ITheme = Theme> {
   animation?: AnimationProp<T>
-  motionSafeAnimation?: AnimationProp<T>
-  motionReduceAnimation?: AnimationProp<T>
-  firstAnimation?: AnimationProp<T>
-  lastAnimation?: AnimationProp<T>
-  oddAnimation?: AnimationProp<T>
-  evenAnimation?: AnimationProp<T>
-  visitedAnimation?: AnimationProp<T>
-  checkedAnimation?: AnimationProp<T>
-  focusWithinAnimation?: AnimationProp<T>
-  hoverAnimation?: AnimationProp<T>
-  focusAnimation?: AnimationProp<T>
-  focusVisibleAnimation?: AnimationProp<T>
-  activeAnimation?: AnimationProp<T>
-  disabledAnimation?: AnimationProp<T>
-  placeholderAnimation?: AnimationProp<T>
 }
 
 export const animation = style({