KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #codex #typescript #developer-tools #ai-agents #deepseek-harness #claude-code #ai-agent #cli #react #mcp

rosebox

★ 71 Open GitHub ↗

CSS in Typescript

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

> 🔴 **WARNING**: This repository and its packages are no longer maintained

<div align="center"><h2>CSS in Typescript</h2></div>

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`](https://hugonteifeh.github.io/rosebox-docs/api/#rb-type-length)).
- Typed functions (e.g., [`linGrad`](https://hugonteifeh.github.io/rosebox-docs/api/#rb-vc-lingrad)).
- Extra shorthand properties(e.g., [`marginX`](https://hugonteifeh.github.io/rosebox-docs/api/#rb-prop-paddingx), [`paddingX`](https://hugonteifeh.github.io/rosebox-docs/api/#rb-prop-paddingx)).
- An object-based syntax for the values of complex properties (e.g., [`animation`](https://hugonteifeh.github.io/rosebox-docs/api/#rb-prop-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:

```shell
npm i @rosebox/core @rosebox/react
```

2. Install the [VScode-extension](https://marketplace.visualstudio.com/items?itemName=hugonteifeh.rosebox-language-server-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:

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

export default function App() {
  const classes = useStyles();
  return (
    <StylesProvider>
      <MyComponent />
    </StylesProvider>
  );
}
```

## Docs

- [Using calc()](https://hugonteifeh.github.io/rosebox-docs/docs/using-calc)
- [Using pseudos](https://hugonteifeh.github.io/rosebox-docs/docs/pseudo)
- [add, sub, mult, div, eq](https://hugonteifeh.github.io/rosebox-docs/docs/utility-functions)
- [Homepage](https://www.rosebox.dev)

## Demos

- [https://codesandbox.io/s/rosebox-in-react-q5854](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](https://marketplace.visualstudio.com/items?itemName=hugonteifeh.rosebox-language-server-extension) for rosebox, which enhances the IDE experience by providing features like color highlighting and color pickers.

## Roadmap and future releases

Refer to [milestones](https://github.com/hugonteifeh/rosebox/milestones/) for information about future releases.

## Help and questions 🙋

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

rosebox

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README