styled-components and treat

One can say that copying is a higher form of appreciation. And here I am implementing styled-components "pattern" for the third time:

1. css-modules-components
2. unstyled-components
3. react-treat-styled

This time I implemented styled-components (more like proof of concept, not a final version) for treat. Treat is themeable, statically extracted CSS‑in‑JS with near‑zero runtime. There other statically extracted CSS‑in‑JS solutions, like astroturf and linaria. The main problem with those solutions they don't work with CRA out of the box. treat doesn't work with CRA yet as well, but there is a hope.

Code example

Here is example repo, which shows how to use it.

You declare styles like this:

import { style } from "treat";

export const base = style({
  outline: "none",
  padding: "0.325rem 0.625rem"
});

export const themed = style(({ primary }) => ({
  background: primary
}));

export default [base, themed];

• It has TypeScript support, so it will complain about illegal CSS.
• It has the same benefits as CSS modules
• It supports theming

Component itself looks like this:

import { styled } from "@stereobooster/react-treat-styled";
import styles from "./button.treat";

const Button = styled.button(styles);

const App = () => <Button onClick={() => alert("test") }></Button>

Here are tradeoffs of using treat. I haven't tried it for real-life projects yet, but let's see.

What do you think about treat?

Comments

[Dor Shinar]

It does look nice, but I don't really get the benefit over using plain string templates. All big IDEs support autocomplete (through extensions, but excellent none the less), and it saves you one dependency.