@rosebox/core NPM

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

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.

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

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.