A utility-first CSS-in-JS framework built for React. 💅👩🎤⚡️
MIT License
Bot releases are hidden (Show)
Published by gregberge over 3 years ago
xstyled v3 is focused on features.
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.
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.
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.
animationDuration
, animationTimingFunction
and maskSize
have been added to the core.
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.
multiple
option in styleYou 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" />
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 removedBox
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 goneUse createCss
instead.
Be sure to correctly extend xstyled theme and to follow TypeScript guide.
Published by gregberge over 3 years ago
Published by gregberge over 3 years ago
theme.durations
(362dea3)Published by gregberge almost 4 years ago
forwardedAs
(use as
instead)rootFontSize
for rpx
utilitiesdefaultTheme
motionSafe
, motionReduce
, first
, last
, odd
, even
, visited
, checked
, focusWithin
, hover
, focus
, focusVisible
, active
, disabled
, placeholder
)gridTemplateColumns
and gridTemplateRows
support in themetrue
<Box.{element}>
syntaxtransitionProperties
and timingFunctions
support in themeinset
support in themegetDuration
getterPreflight
: a set of global style to start a projectth
and th.*
style
utilityaliasColor
and generateHexAlphaVariants
utilitiesuseTh
and other hooks to get theme propsx.extend
and createX
utilitiesfill
, stroke
spaceX
, spaceX
w
, h
listStyleType
, listStyleTypePosition
outline
, divideX
, divideY
, divideXReverse
, divideYReverse
, divideStyle
, divideColor
, ring
, ringInset
, ringColor
textDecoration
, textOverflow
, whiteSpace
overflowX
, overflowY
, boxSizing
, container
, visibility
, overscrollBehavior
, objectFit
gap
tableLayout
, borderCollapse
transitionProperty
, transitionDuration
, transitionTimingFunction
, transitionDelay
animation
appearance
, cursor
, pointerEvents
, resize
, userSelect
transform
, transformOrigin
, translateX
, translateY
, rotate
, skewX
, skewY
, scale
, scaleX
, scaleY
backgroundAttachment
, backgroundClip
, gradientFrom
, gradientVia
, gradientTo
space
breakpoints
breakpoints
theme section to screens
variant
utilitywidth
and height
utility (only aliases remain w
and h
)gridGap
by gap
border{direction}
and border{direction}Color
utilitiesRead Upgrade Guide to know more about breaking changes.