🔴 WARNING: This repository and its packages are no longer maintained
Rosebox is a CSS-in-Typescript library that provides features like:
- Support for high-quality autocomplete.
- Support for color highlighting and color pickers.
- Strong types (e.g.,
Length
). - Typed functions (e.g.,
linGrad
). - Extra shorthand properties(e.g.,
marginX
,paddingX
). - An object-based syntax for the values of complex properties (e.g.,
animation
).
Rosebox uses the packages jss
and react-jss
under the hood in @rosebox/react
to support runtime generation of CSS-classes and other features.
- Install the following packages:
npm i @rosebox/core @rosebox/react
-
Install the VScode-extension.
-
Write your styles in files that match the pattern
*.rb.ts
.
Here is a simple example of how you can use rosebox in your react-app:
import * as React from "react";
import { rgb, px, ms } from "@rosebox/core";
import { createUseStyles, StylesProvider } from "@rosebox/react";
const useStyles = createUseStyles({
titleStyle: {
fontSize: px(48),
transition: ["color", ms(150), "ease-in-out"],
color: "black",
"&query": {
"&:nth-child(2)": {
fontSize: px(32)
},
"&:hover": {
color: rgb(239, 71, 111)
}
}
}
});
const MyComponent = () => {
const classes = useStyles();
return (
<div className="App">
<h1 className={classes.titleStyle}>Hover over me please</h1>
<h1 className={classes.titleStyle}>I come next</h1>
</div>
);
};
export default function App() {
const classes = useStyles();
return (
<StylesProvider>
<MyComponent />
</StylesProvider>
);
}
You can already use all the CSS properties with Rosebox. Missing ones in the api only indicate that they are not YET strongly typed. The library exposes all the weakly-typed properties by prefixing them with an underscore (e.g., _borderImageStyle
, _all
). These weakly-typed props have type string
. When a property becomes strongly-typed, its underscore-prefixed version gets deprecated immediately. However, its removal may only be considered after a minimum of 1 major release since the deprecation—for example, if _borderImageStyle
gets deprecated in 0.6.4, it means that it will be removed in 1.0.0.
There is a new VScode-extension for rosebox, which enhances the IDE experience by providing features like color highlighting and color pickers.
Refer to milestones for information about future releases.
If you have a question or need help, feel free to create an issue here 👌.