Skip to content

@gregberge gregberge released this May 24, 2021 · 17 commits to main since this release

xstyled v3 is focused on features.

Object states

States are now similar to breakpoints, they are specified using object syntax:

<x.button color={{ _: 'red-500', hover: 'red-300' }} />

They can be nested:

// Mixed screens and states
<x.button color={{ _: 'red-600', md: { _: 'red-500', hover: 'red-300' } }} />
// Nested states
<x.div bg={{ first: { odd: 'blue' } } } />

And they are configurable in theme:

export const theme = {
  states: {
    hover: '&:hover',
    // ...
  },
}

Learn more in states documentation.

Plugins API

xstyled can now be fully extended with plugins using a xstyled.config.js:

import { createCss, system, compose } from '@xstyled/...'
import { borderInline } from './utilities/border-inline'

export const { css, styled, x, createGlobalStyle } = createCss(
  compose(system, borderInline),
)

Learn more in documentation.

New text utility

A new text utility has been added. It is similar to fontSize excepts that it defines both font-size and line-height. It is customizabled to handle all your typography styles.

Learn more in text utility documentation.

New utilities

animationDuration, animationTimingFunction and maskSize have been added to the core.

Remove specificity

xstyled was using a trick to ensure props were more specific than component style. The props were injected in a &&, so the class was duplicated and the specificity increased. In v3, props are now injected in the correct order, it means this specificity is not longer required.

New multiple option in style

You can now use multiple to declare style that accepts multiple styles separated by a comma. For example, box-shadow:

<x.div boxShadow="light-shadow, big-shadow" />

Breaking changes

No prefixed states

States were prefixed props in v2. You can use this regular expression to find state props in your code:

((motionSafe|motionReduce|first|last|odd|even|visited|focusWithin|hover|focus|focusVisible|focusWithin|active|disabled|placeholder|checked)[A-Z])[A-Za-z]+=

Box has been removed

Box component is no longer available, you can safely replace it by x.div.

cssProperty option of style becomes css

Since the css accepts a mixin, cssProperty was no longer a good name.

getBreakpoints becomes getScreens and useBreakpoints becomes useScreens

In v1, theme section handling screens was named breakpoints, since v2 theme section is now screens. For consistency getBreakpoints becomes getScreens and useBreakpoints becomes useScreens.

th.timingFunctions becomes th.timingFunction

Every th.* utilities are singular, th.timingFunctions was a mistake.

x.extend and createX are gone

Use createCss instead.

TypeScript theme bindings

Be sure to correctly extend xstyled theme and to follow TypeScript guide.


Detail

Bug Fixes

Features

Assets 2