rosebox / Rosebox

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.

Usage

1. Install the following packages:

npm i @rosebox/core @rosebox/react

2. Install the VScode-extension.

3. Write your styles in files that match the pattern *.rb.ts.

Example

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>
  );
}

Docs

• Using calc()
• Using pseudos
• add, sub, mult, div, eq
• Homepage

Demos

• https://codesandbox.io/s/rosebox-in-react-q5854

IMPORTANT NOTE 📢

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.

VScode extension 📟

There is a new VScode-extension for rosebox, which enhances the IDE experience by providing features like color highlighting and color pickers.

Roadmap and future releases

Refer to milestones for information about future releases.

Help and questions 🙋

If you have a question or need help, feel free to create an issue here 👌.