xstyled
A utility-first CSS-in-JS framework built for React. 💅👩🎤⚡️
MIT License
Bot releases are visible (Hide)
Published by gregberge over 3 years ago
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
- emotion: broken getCreateStyle (f3c46d7), closes #250
- types: fix types of CSS objects (#260) (fbbf91e)
- styled.box with rule ordering instead of specificity (9ac9a21)
- x.* must pass through props for as={Component} (04f845f), closes /github.com/gregberge/xstyled/pull/231#issuecomment-817353699
Features
Published by gregberge over 3 years ago
Bug Fixes
- emotion: broken getCreateStyle (e2d0402), closes #250
- styled.box with rule ordering instead of specificity (c400c70)
- x.* must pass through props for as={Component} (5d8145d), closes /github.com/gregberge/xstyled/pull/231#issuecomment-817353699
Features
- text: new text utility (22e618f), closes #178
- various refactoring & typing improvements (44f31b6)
- states: put states in theme (#206) (9003deb)
BREAKING CHANGES
- Box has been removed, "cssProperty" has been renamed "css", "getBreakpoints" has been renamed "getScreens", "useBreakpoints" has been renamed "useScreens", "th.timingFunctions" has been renamed "th.timingFunction".
- states: states are now passed in object.
Published by gregberge over 3 years ago
Bug Fixes
- emotion: pass options through (#202) (781704c)
- styled: use space in column-gap & row-gap (517c08e), closes #200
- transform: confused by comments, whitespace (93cba6a)
- types: add missing alignContent prop (eb3c47f), closes #205
- types: invalid color prop (0660565)
Features
- add float property (0335114), closes #192
- add maxW, maxH, minW, minH shortcuts (fde802e), closes #199
-
durations: bind durations to
theme.durations(362dea3) - transform: min/max widths in media queries (aa1f518)
Performance Improvements
- add media query to benchmark (af10f5a)
Published by gregberge almost 4 years ago
Features
- TypeScript typings
- Emotion v11
- Get rid of
forwardedAs(useasinstead) - Allow configuration of
rootFontSizeforrpxutilities - Introduce a
defaultTheme - Add state support (
motionSafe,motionReduce,first,last,odd,even,visited,checked,focusWithin,hover,focus,focusVisible,active,disabled,placeholder) - Support shorthand styles
- Add
gridTemplateColumnsandgridTemplateRowssupport in theme - Introduce default value if value is
true - Support string value as number for pixels and durations
- Support
<Box.{element}>syntax - Add
transitionPropertiesandtimingFunctionssupport in theme - Add
insetsupport in theme - Support arrays for list properties in theme
- Add
getDurationgetter - Add
Preflight: a set of global style to start a project - Support default value in
thandth.* - Allow to create complex style generator using
styleutility - Add
aliasColorandgenerateHexAlphaVariantsutilities - Add
useThand other hooks to get theme props - Add
x.extendandcreateXutilities
New Utilities
- Add svg utilities:
fill,stroke - Add space utilties:
spaceX,spaceX - Add sizing utilities:
w,h - Add lists utilities:
listStyleType,listStyleTypePosition - Add borders utilities:
outline,divideX,divideY,divideXReverse,divideYReverse,divideStyle,divideColor,ring,ringInset,ringColor - Add typography utilities:
textDecoration,textOverflow,whiteSpace - Add layout utilities:
overflowX,overflowY,boxSizing,container,visibility,overscrollBehavior,objectFit - Add grid utilities:
gap - Add tables utilities:
tableLayout,borderCollapse - Add transitions utilities:
transitionProperty,transitionDuration,transitionTimingFunction,transitionDelay - Add animations utilities:
animation - Add interactivity utilities:
appearance,cursor,pointerEvents,resize,userSelect - Add transforms utilities:
transform,transformOrigin,translateX,translateY,rotate,skewX,skewY,scale,scaleX,scaleY - Add backgrounds utilities:
backgroundAttachment,backgroundClip,gradientFrom,gradientVia,gradientTo
Breaking Changes
- Emotion v10 is no longer supported
- Remove default
space - Remove default
breakpoints - Rename
breakpointstheme section toscreens - Remove
variantutility - Remove
widthandheightutility (only aliases remainwandh) - Replace
gridGapbygap - Remove
border{direction}andborder{direction}Colorutilities - Reorganize all utilities
Read Upgrade Guide to know more about breaking changes.
