jsx-css

A tiny zero-runtime CSS-in-JS styling library for React — inspired by styled-components, but minimal and fast. Built as a practice project to learn about CSS-in-JS libraries.

🚀 Features

• 🎯 Use plain object styles — no tagged templates
• ⚡ Runtime CSS generation using hashed classNames
• 🧠 Supports :hover, ::after, @media, and more
• 💅 Designed to be familiar for styled-components users

📦 Installation

npm install jsx-css

✨ Usage

import JsxCss from "jsx-css";

<JsxCss.div
  styles={{
    color: "red",
    ":hover": {
      color: "blue",
    },
    "::after": {
      content: '"🔥"',
      display: "inline-block",
    },
    "@max-width: 600px": {
      color: "green",
    },
  }}
>
  Hello world
</JsxCss.div>

🧪 Usage with Third Party Components

• You can use JsxCssWrapper to wrap third-party components and apply styles to them.
• This is useful for libraries that don't support CSS-in-JS natively.
• It works by applying the generated class name to the wrapped component.
• Requires the className prop to be defined in the component.

import { JsxCssWrapper } from "jsx-css";
import { Button } from "some-ui-library";

<JsxCssWrapper
  styles={{
    backgroundColor: "red",
    ":hover": {
        backgroundColor: "blue",
    },
  }}
>
    <Button
      className="some-ui-library-button"
    >
      Hello world
    </Button>
</JsxCssWrapper>