Package Exports
- @aurhight/jsx-css
Readme
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
JsxCssWrapperto 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
classNameprop 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
JsxCssContextto 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
initJsxCssfunction 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>