🎨 styled-components-jsx

Write styles like styled-components, powered by styled-jsx under the hood.

If you love the simplicity and performance of styled-jsx but prefer the ergonomic syntax of styled-components, this library gives you the best of both worlds.

✨ Basic Usage

import styled from 'styled-components-jsx'

const Button = styled.button`
  background: dodgerblue;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;

  &:hover {
    background: deepskyblue;
  }
`

const Title = styled.h1`
  font-size: 2rem;
  color: hotpink;
`

export default function App() {
  return (
    <>
      <Title>Hello</Title>
      <Button>Click me</Button>
    </>
  )
}

🧠 How It Works

This library wraps your styles using styled-jsx, giving you:

• Full CSS scoping via styled-jsx
• styled-components-like API
• Optional interpolations like ${props => props.color}
• Support for both DOM elements and custom React components
• Automatic prop filtering ($-prefixed props are stripped from DOM)

🚀 Installation

⚠️ This package requires styled-jsx to be installed and properly processed by Babel.
If you're using Next.js, it works with minimal configuration. For other setups (Vite, Webpack, etc.), you may need to configure Babel manually.

Install with Yarn:

yarn add styled-components-jsx

Or with npm:

npm install styled-components-jsx

✅ If you're using Next.js

Make sure to enable transpilation for this package inside your next.config.js:

// next.config.js
const nextConfig = {
  transpilePackages: ['styled-components-jsx'],
}

module.exports = nextConfig

This ensures that styled-components-jsx is properly handled by Next.js' Babel pipeline, including the styled-jsx plugin.

⚠️ If you're not using Next.js

You must ensure that your Webpack (or Vite/Rollup) build pipeline:

• Applies Babel to node_modules/styled-components-jsx
• Includes the styled-jsx/babel plugin

Here's a minimal Babel config example:

{
  "presets": ["@babel/preset-react", "@babel/preset-typescript"],
  "plugins": ["styled-jsx/babel"]
}

And in Webpack:

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        include: /node_modules\/styled-components-jsx/,
        use: 'babel-loader',
      },
    ],
  },
}

🛠 Configuration

For full setup (e.g., Babel, SSR, Next.js), refer to the styled-jsx documentation.

This library builds on top of styled-jsx and inherits all of its capabilities.

🎨 About the .🎨 class Prefix

styled-jsx does not generate any CSS if there are no selectors in the final output.
In other words, if your component's styles contain only raw properties (without a selector), the CSS will silently be ignored.

To work around this, we always prefix styles with a dummy class, and we chose 🎨 as a fun and recognizable default.

For example, this:

const Container = styled.div`
  max-width: 960px;
  margin: 0 auto;
`

Will render internally like this:

<style id="__jsx-3515400890">
  .🎨.jsx-3515400890 {
    max-width: 960px;
    margin: 0 auto;
  }
</style>

Why .🎨?

• It ensures your styles are always emitted correctly
• It’s unique enough to avoid collisions
• And hey, it looks kinda nice in DevTools too 😎

🧩 Interpolations

Inject values with functions that receive props:

const Alert = styled.div`
  color: ${props => (props.$error ? 'red' : 'green')};
`

Props prefixed with $ are automatically excluded from the rendered DOM.

🧪 Custom Components

const Card = ({ className }: { className?: string }) => (
  <div className={className}>Styled Card</div>
)

const StyledCard = styled(Card)`
  padding: 24px;
  border-radius: 12px;
  background: red;
`

🧼 Automatic Minification

All styles are automatically minified before being passed to styled-jsx.

This includes:

• 🧹 Stripping all comments (/* */ and //)
• 🧱 Removing extra whitespace and newlines
• 🧵 Trimming spaces around symbols like :, {}, ;, etc.
• ❌ Eliminating redundant ; before closing braces

Example

This:

const Box = styled('div')`
  // This is a comment
  padding: 16px ;  
  margin: 0 auto   ;
`

Turns into:

.🎨.jsx-123456 {padding:16px;margin:0 auto;}

The minifier is lightweight and built-in — no extra setup required.

Under the hood, it's powered by a custom function that processes all styles similarly to how LESS/CSS preprocessors do it, but focused purely on cleanup and safe compression.

💻 TypeScript Support

• Fully typed components and props
• Autocomplete for tag names and styles
• Works seamlessly with React 18+
• Includes type definitions for styled-jsx attributes (jsx, global)
• No additional configuration needed - types work out of the box

📦 Designed for React

Supports React 18 and 19, and integrates smoothly into any React-based project or framework (including Next.js).

💡 Why This Exists

styled-jsx is powerful, but its tagged template syntax isn’t always ergonomic.
This package brings the comfort and beauty of styled-components to the world of styled-jsx.

You get the best of both worlds — now with a splash of color. 🎨

🙏 Thanks & Credits

A huge thank you to the creators and contributors of:

• styled-jsx – for pioneering scoped CSS in React and enabling this project’s core functionality
• styled-components – for inspiring the expressive and elegant developer experience this library builds on

This library wouldn't exist without the incredible work done by these communities.

If you use and enjoy styled-components-jsx, consider supporting and starring the original projects too — they made all of this possible.

📄 License

MIT © Cr0WD