Full CSS support for JSX without compromises
MIT License
Bot releases are visible (Hide)
<></>
- Babel 6 is still supported (#535) (@ijjk)Program
path and then start a traversal manually to solve conflicts with other Babel plugins. (#536) (@ijjk)Huge thanks to @ijjk for his contributions! 🎉
styled-jsx converts style
blocks to a custom JSXStyle
component which takes css strings via a css
prop. This prop conflicts with other libraries like styled-components. Since for us is just an implementation detail we are going to rename it to children
and make the
JSXStylecomponent work more like a regular
style` element.
With this version you might need to update snapshot tests.
Enables authoring of styles in actual css
files via the new styled-jsx/webpack
loader 🔥
Introduces support for dynamic HTML elements
const Heading = `h${props.level}`
css.resolve
tag which returns the scoped className
and styles
const { className, styles } = css.resolve`p { color: black }`
// ...
<div>
<ChildComponent className={className} />
{styles}
<div/>
React.StrictMode
compliantstyled-jsx/css
. External global styles should now be tagged with css.global``
(#422) (@giuseppeg)css.resolve``
which returns a scoped className
and styles
(#422) (@giuseppeg)styled-jsx/macro
which allows to use css.resolve
as a Babel macro (eg. in Create React App) (#422) (@giuseppeg)Plugins are regular JavaScript modules that export a simple function with the following signature:
(css: string, options: Object) => string
They accept a CSS string in input, optionally modify it and finally return it.
Plugins make it possible to use popular preprocessors like SASS, Less, Stylus, PostCSS or apply custom transformations to the styles at compile time.
Details and usage can be found in the CSS Preprocessing via Plugins section of README.md
stylis-rule-sheet
to split CSS rules into array of rules for optimizeForSpeed
#313. This also fixes #305 - huge thank you to @thysultan for his help!We are excited to release the v2 🎉
optimizeForSpeed
mode for fast styles injection when in productioncss
Details at #288 and the README.