NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #1370 most downloaded on npm
Full CSS support for JSX without compromises
Last release 1 years ago
30 Apr 2025
Ships unpredictably
gaps range from 2 weeks to 1.3 years
Most releases are documented
notes for 53 of the last 60 stable releases
Nothing withdrawn
no release was ever pulled
10 years old
122 releases · first in 2016
Fix nested style tags break compilation
Fix complex spread props transpilation. (#356) (@pudility)
Add support for css tagged template literals in component files #346
One column per quarter.
css tagged template literals in component files #346Fix multiple animation-name and animation-name not working #339
Fix external styles not supporting nested objects for constants #321
Add React 16 as peer dependency to remove warnings #314
Introduce a plugin system to preprocess styles 🎉 #291
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!Fix buggy tagged template literals detection transpiled unrelated non-css strings #304
We are excited to release the v2 🎉
We are excited to release the v2 🎉
optimizeForSpeed mode for fast styles injection when in productioncssDetails at #288 and the README.
Nothing published for this version
Fix insertRule fails when the css is a String object: #299
Huge thanks to @giuseppeg for his help!
Fix invalid rules break stylesheet/registry: #296
Huge thanks to @giuseppeg for their help!
Fix animation names not being scoped in optimizeForSpeed mode
We are excited to release the first beta of v2 🎉
We are excited to release the first beta of v2 🎉
optimizeForSpeed mode for fast styles injection when in productioncssDetails at #288 and the README.
The following patch applies to previous 2.x versions as well.
Please use 2.0.1-beta.2 instead
Please use 2.0.1-beta.2 instead
Please use v2.0.1-beta.2 instead
Please use v2.0.1-beta.2 instead
Update Stylis to fix a bug with custom properties names containing the word contain
contain (#287)Huge thanks to @callumlocke for reporting the bug and @thysultan for fixing it in Stylis.
Update Stylis to fix a bug with spaces in quoted properties values
Huge thanks to @johhansantana for reporting the bug and @thysultan for fixing it in Stylis.
Properly detect module.exports in external styles
module.exports in external styles (#267)Huge thanks to @eliot-akira for discovering the issue and debugging #267 and @thysultan for the great work on Stylis!
Support for Prettier 1.5.x added: #256
Huge thanks to @akupila for his help!
browser-env included as a dependency
Fix HMR (#245) [@akupila] Fixes the case when styles are updated and the JSXStyle component ignores them because it calls its update helper on compone
JSXStyle component ignores them because it calls its update helper on componentWillUpdate with the old props.Fix expressions placeholders parsing/validation for external files (#227) [@giuseppeg]
Thanks to @thysultan for the Stylis patches!
Fix external styles with expressions are not transpiled
calc is ignored (#223)Huge thanks to @thysultan for fixing the relevant bugs in Stylis and @soulchainer, @Larry850806 and @jaydenseric for the bug reports!
## Patches * Add support for Node 4
Huge thanks to @cheeaun and @thysultan for their help!
Huge thanks to @cheeaun and @thysultan for their help!
Update Stylis to fix some issues with global styles
Introduce support for styles in separate files (#148) [@giuseppeg]
// component.js
import styles from './styles'
export default () => (
<p>
Hello World ▲
<style jsx>{styles}</style>
</p>
)
// styles.js
const color = 'red'
export default `
p { color: ${color} }
`
:not() does not seem to be adding prefix (#146) [@giuseppeg]global breaks when the selector has a combinator (#144) [@thysultan]; instead of } (#144) [@thysultan]styled-jsx/style's flush now returns a Map<styleId: number, component: React$Component> instead of an Array.Huge thanks to @phtoussaint, @timneutkens, @pixelass, and @xekri for improving the docs!
Peer dependencies shouldn't be pinned: 6b85d2477c6cecc7945b0bac3d20e47feadc8f30
Allow whitespace in expressions inside template literals: #129
package.json: 634b05e72c568581c5aba8506d544c07bcf61315Huge thanks to @nikvm for his help!
Accurately document what it transcompiles to: #110
cubic-bezier: #124Huge thanks to @sheerun, @fatfisz, @adjohnson916 and @thysultan for their help!
Fix jsx id bug when using interpolation in template string.: #108
Huge thanks to @lixiaoyan for the help!
Don't debounce rendering on Safari: #102
Huge thanks to @cgood92 and @nkzawa for their help!
Fix global selectors transform: #98
Huge thanks to @nkzawa for their help!
Skip non-styled-jsx style elements (#94): [@nkzawa]
Add support for expressions within template literals: #80
Huge thanks to @giuseppeg for his help!
Add support for spread attributes (#86): [@giuseppeg]
as a top-level component (#75) [@giuseppeg]
<style> as a top-level component (#75) [@giuseppeg]Fixes animation namespacing #78 [@thysultan]
Fixes https://github.com/zeit/next.js/issues/743: #76
Huge thanks to @arunoda for their help!
Nothing published for this version
Feed babel number, but pass string to css compiler: fac8c6a54c59d50cbd0667902b74ae91920c32a1
Don't add the data-jsx attribute to components instances: #71 [@giuseppe]
Nothing published for this version
Fix FOUC in Safari (#52, PR #63) [@ericf]
Simplify external API, fix flush (zeit/next.js#496, PR #59) [@nkzawa]
Simplify external API, fix flush (zeit/next.js#496, PR #59) [@nkzawa]
Comments work properly (#57, PR #58) [@giuseppeg]
Fix combinators usage in selectors (#50, PR #54) [@nkzawa]
Fix pseudo-selectors (#39, PR #48) [@nkzawa]
Add missing server export [@nkzawa]
Add missing server export [@nkzawa]
New APIs for server rendering styles that prevent duplication on the client when hydrating:
New APIs for server rendering styles that prevent duplication on the client when hydrating:
styled-jsx/server
flush() (default) returns an array of React.Element for each <style>flushToHTML returns an HTML stringFix multiple occurrences of components per file (#12, PR #45) [@giuseppeg]
Fix multiple occurrences of components per file (#12, PR #45) [@giuseppeg]
Fix multiple style occurrences by introducing styleId into <_JSXStyle> (PR #44) [@nkzawa]
Fix multiple style occurrences by introducing styleId into <_JSXStyle> (PR #44) [@nkzawa]
Make data-jsx use number literals instead of string literals for better memory / diff performance [@rauchg]
data-jsx use number literals instead of string literals for better memory / diff performance [@rauchg]It's now possible to combine a global and scoped style in the same component (#41) [@rauchg]
export default () => (
<div>
<p>hi</p>
<style jsx global>{`
body {
background: red
}
`}</style>
<style jsx>{`p { color: red; }`}</style>
</div>
)
Support targetting the root [@rauchg]
<style> (#24) [@rauchg]Fixed a typo in the files property within package.json: https://github.com/zeit/styled-jsx/pull/23
files property within package.json: https://github.com/zeit/styled-jsx/pull/23Creation of tag now works properly: https://github.com/zeit/styled-jsx/pull/20
<style> tag now works properly: https://github.com/zeit/styled-jsx/pull/20### Patches - Exposed entire API: 5924ab0
You should add the package as dependency, not as devDependency: 738a7d8
dependency, not as devDependency: 738a7d8README.md: https://github.com/zeit/styled-jsx/pull/14Tell Babel to load the right file: 9d8ae9b
Your coding agent can read these notes before it upgrades. Set up the MCP server →