styled-jsx

What is styled-jsx?

The styled-jsx npm package is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components in a React application. It is specifically designed to work with React and Next.js and provides a way to include styles directly within JavaScript or TypeScript files.

What are styled-jsx's main functionalities?

Scoped Styles

This feature allows you to write CSS that is scoped to a component. The styles will not leak to other parts of the application.

<style jsx>{`p { color: red; }`}</style>

Global Styles

With styled-jsx, you can also define global styles that apply to the entire application, not just scoped to a single component.

<style jsx global>{`body { background: black; }`}</style>

Dynamic Styles

styled-jsx supports dynamic styles, allowing you to use JavaScript variables and expressions to determine the styles at runtime.

`<style jsx>{
  `p { color: ${color}; }`
}</style>`

Preprocessing

You can use preprocessors with styled-jsx to include external stylesheets or use features like nesting or variables.

<style jsx>{`
  @import 'styles/shared.css';
  p { color: red; }
`}</style>

Other packages similar to styled-jsx

styled-components

styled-components is another CSS-in-JS library that allows you to use template literals to write actual CSS code in your JavaScript files. It also handles scoping and supports dynamic styling. It differs from styled-jsx in its API and the way styles are applied to components.

emotion

Emotion is a performant and flexible CSS-in-JS library. It allows you to style applications quickly with string or object styles. It has a similar API to styled-components and includes features like composition, theming, and server-side rendering.

linaria

Linaria is a zero-runtime CSS-in-JS library that extracts CSS to separate files during the build process, rather than including styles in the JavaScript bundle. This can result in better performance compared to styled-jsx, which includes styles in the JS bundle.

README

styled-jsx

Full, scoped and component-friendly CSS support for JSX (SSR + browser).

Usage

Firstly, install the package:

$ npm install --save styled-jsx

Next, add styled-jsx/babel to plugins in your babel configuration:

{
  "babel": {
    "plugins": [
      "styled-jsx/babel"
    ]
  }
}

As the last step, simply include <style jsx> in your code:

export default () => (
  <div>
    <p>only this paragraph will get the style :O</p>
    { /* you can include <Component />s here that include
         other <p>s that don't get unexpected styles! */ }
    <style jsx>{`
      p {
        color: red;
      }
    `}</style>
  </div>
)

Features

• Full CSS support, no tradeoffs in power
• Runtime size of just 500 bytes
• Complete isolation: Selectors, animations, keyframes
• Built-in CSS-prefixing
• Very fast, minimal and efficient transpilation (see below)
• High-performance runtime-CSS-injection when not server-rendering
• Future-proof: Equivalent to server-renderable "Shadow CSS"
• Works like the deprecated <style scoped>, but the styles get injected only once per component

How It Works

The example above compiles to the following:

import _jsxStyleInject from 'styled-jsx/inject'

export default () => (
  <div>
    <p data-jsx='cn2o3j'>only this paragraph will get the style :O</p>
    { _jsxStyleInject('cn2o3j', `p[data-jsx=cn2o3j] {color: red;}`) }
  </div>
)

Why It Works Like This

Data attributes give us style encapsulation and _jsxStyleInject is heavily optimized for:

• Injecting styles upon render
• Only injecting a certain component's style once (even if the component is included multiple times)
• Keeping track of styles for server-side rendering (discussed in the next section)

Server-Side Rendering

In the server rendering pipeline, you can obtain the entire CSS text of all the combined components by invoking flush:

import flush from 'styled-jsx/flush'

// …
// <render here>
// …

const styles = flush()

for (let id in styles) {
  const css = styles[id]
  console.log(id, css)
}

This API is also available on the client: Instead of returning the CSS text, it returns a reference to the automatically generated <style> tag.

This is useful for performing diffs of elements between top-level render() calls, and ditching style elements that are no longer being used.

Credits

• Pedram Emrouznejad (rijs) suggested attribute selectors over my initial class prefixing idea.
• Sunil Pai (glamor) inspired the use of murmurhash2 (minimal and fast hashing) and an efficient style injection logic.
• Sultan Tarimo built stylis.js, a super fast and tiny CSS parser and compiler.
• Max Stoiber (styled-components) proved the value of retaining the familiarity of CSS syntax and pointed me to the very efficient stylis compiler (which we forked to very efficiently append attribute selectors to the user's css)
• Yehuda Katz (ember) convinced me on Twitter to transpile CSS as an alternative to CSS-in-JS.
• Evan You (vuejs) discussed his Vue.js CSS transformation with me.
• Henry Zhu (babel) helpfully pointed me to some important areas of the babel plugin API.

Author

Guillermo Rauch (@rauchg) - ▲ZEIT