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>

🧪 Usage with JsxCss Context

• You can use JsxCssContext to provide styles globally or to a specific subtree of your React component tree.
• Define themes, global styles, or any other styles that should be applied to all components within the context using createTheme.
• Initialize themed JsxCss using initJsxCss function and obtain typed JsxCss Object.

import JsxCss, { createTheme, initJsxCss, JsxCssContext } from "jsx-css";

type Theme = {
    colors: {
        primary: string;
        secondary: string;
    };
};

const mainTheme = createTheme<Theme>({
    div: {
        backgroundColor: "white",
    },

    colors: {
        primary: "red",
    },
});

const MainJsxCss = initJsxCss<Theme>();

<JsxCssContext theme={mainTheme}>
    <ThemeJsxCss.div
        styles={(context) => ({
            backgroundColor: context.div?.backgroundColor,
            color: context.colors.secondary,
        })}
    >
        Main Typed Themed Div
    </ThemeJsxCss.div>
</JsxCssContext>