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
Check if adding to registry in useInsertionEffect fails and fall back to useLayoutEffect
Move TypeScript to devDependencies
One column per quarter.
Correct context for declaration files
5.1.4 (2024-05-24) Bug Fixes Use scoped JSX namespace
5.1.3 (2024-05-07) Bug Fixes bump peer dep for react 19
5.1.2 (2023-01-25) Bug Fixes including global typing
5.1.1 (2022-12-15) Bug Fixes typo in macro typing
styled-jsx as client-only for rsc
5.0.7 (2022-09-09) Bug Fixes add displayName for context
5.0.6 (2022-09-05) Bug Fixes load babel macro dynamically
use typeof window to detect browser
## 5.0.4 (2022-08-11) ### Bug Fixes * tweak types
declare module and fix conflict typing name #805
including macro.d.ts to decalaration files
peer dep declaration for react 18 with npm
styled-jsx/server import path is deprecated
nonce propertystyled-jsx/server import path is deprecatedflush and flushToHTML from styled-jsx/server APIs are deprecated<StyledRegistry> is introduceduseStyleRegistry and createStyleRegistry are introducedIf you're only use styled-jsx in pure client side, nothing will effect you. If you're using styled-jsx inside Next.js without customization, Next.js will manage the new gaps and it's same as previous.
If you have your own customization with styled-jsx in Next.js, for example you have a custom _document:
By default, doing this will let Next.js collect styles and pass them down.
class Document extends React.Component {
static async getInitialProps(ctx) {
return await ctx.defaultGetInitialProps(ctx)
}
}
Or for instance you're passing nonce property in getInitialProps of _document, this will let you configure it:
class Document extends React.Component {
static async getInitialProps(ctx) {
- return await ctx.defaultGetInitialProps(ctx)
+ return await ctx.defaultGetInitialProps(ctx, { nonce })
}
}
If you're building the SSR solution yourself with other frameworks, please checkout the Server-Side Rendering section in readme.
Pre-compile dependencies to reduce install size/time
fallback to module level registry in browser
# 5.0.0-beta.5 (2021-12-17) ### Bug Fixes * use string for nonce typing
# 5.0.0-beta.4 (2021-11-10) ### Bug Fixes * typo acceps -> accepts
opt in insertion effect hook when available
Make JSXStyle return a noop if the registry context is not provided
# 5.0.0-beta.1 (2021-09-08) ### Docs Change * zeit -> vercel (#746) (74dbbd7) ### BREAKING CHANGES & Features * contextual styles
mark @babel/core as optional peer dependency
auto publish when merging to alpha
# 4.0.0-alpha.4 (2021-08-06) ### Bug Fixes * update test snapshots
# 4.0.0-alpha.3 (2021-08-06) ### Performance Improvements * drop babel 6 support
use react hooks to manage styles injection
auto publish when merging to alpha
## 3.4.6 (2021-08-04) ### Bug Fixes * css typing
## 3.4.5 (2021-08-02) ### Bug Fixes * _JSXStyle import is not found
## 3.4.4 (2021-02-16) ### Bug Fixes * missing files on package.json
Typing module location and invalid export
webpack: change webpack loader output to fix babel warnings
## 3.4.1 (2021-01-15) ### Bug Fixes * Add typings to npm package
# 3.4.0 (2021-01-15) ### Features * add TypeScript typings builtin
make styled-jsx/babel plugin respect the source type
external: execute transforms before JSX transform
Nothing published for this version
Adds support for styleModule to configure the module that the transpiled files should import (#629) - @arcanis
Upgrade to @babel/types to remove transitive babel-runtime depenency (#621) - @tkalliom
Nothing published for this version
Nothing published for this version
Nothing published for this version
Add support for inline object spreads {...{ className: 'foo' }} (#541) (@doniyor2109)
{...{ className: 'foo' }} (#541) (@doniyor2109)Transition to Babel 7 and add support for JSX fragments shorthand <></> - Babel 6 is still supported (#535) (@ijjk)
<></> - 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! 🎉
Do not use the css prop in JSXStyle (#534) (@shYkiSto)
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 theJSXStylecomponent work more like a regularstyle` element.
With this version you might need to update snapshot tests.
Add missing filename opt for external files
styled-jsx/server readme link (#525) (@zgreen)Fix issue with plugins info message flooding (#518) (@giuseppeg)
vendorPrefix typo to vendorPrefixes (#515) (@ryanfitzer)Nothing published for this version
Readme: Update Atom instructions with support for css...: #473
...: #473Huge thanks to @rstacruz, @jasonkylefrank, and @giuseppeg for helping!
e9964cece80f9a9a476e55429877c219a2f53663 - Whitelist missing files in package.json (@giuseppeg)
98164cd2a3cef21b556f17c6cdad5be20e5f67d4 - Update package-lock.json (@giuseppeg)
Enables authoring of styles in actual css files via the new `styled-jsx/webpack` loader 🔥
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 stylesconst { 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)Nothing published for this version
Nothing published for this version
Broken style transformation when there is a line break between selectors and :global().
:global(). (#411)Huge thanks to @thysultan and @nkzawa for their help!
Sanitize dynamic styles on the server.
Fixed dynamic styles detection when destructuring inside of the render method.
Huge thanks to @a-ignatov-parc for the fix!
Your coding agent can read these notes before it upgrades. Set up the MCP server →