Restyle - Zero Config CSS for React

Zero Config
CSS for React

The simplest way to add CSS to React.
No build configuration required.

npm install restyle

Input

import { styled } from "restyle";

const Button = styled("button", {
  padding: "0.5rem 1rem",
  borderRadius: "4px",
  backgroundColor: "blue",
  color: "white",
});

export default function Page() {
  return (
    <Button
      css={{
        paddingInline: "0.8rem",
        backgroundColor: "pink",
      }}
      onClick={() => alert()}
    >
      Click me!
    </Button>
  );
}

Output

<html>
  <head>
    <style data-precedence="rsl" data-href="xwci5pk">
      .x6vw34k {
        padding: 0.5rem 1rem;
      }
      .x1xg4490 {
        border-radius: 4px;
      }
    </style>
    <style data-precedence="rsm" data-href="x1pc7fh0">
      .x1f9e8ue {
        padding-inline: 0.8rem;
      }
    </style>
    <style data-precedence="rsh" data-href="xbg6jus">
      .x1yju78o {
        background-color: pink;
      }
      .xpzun7g {
        color: white;
      }
    </style>
  </head>
  <body>
    <button class="x6vw34k x1xg4490 x1yju78o xpzun7g x1f9e8ue">
      Click me!
    </button>
  </body>
</html>

Features

Zero runtime

No runtime when statically rendered.

Atomic class names

Optimized for minimal CSS generation.

Suspense friendly

Works with Suspense and streaming.

Isomorphic styling

Compatible with server and client rendering.

Encourages encapsulation

Keep styles colocated and maintainable.

Supports `css` prop

Apply styles directly to your JSX elements.

Loads styles on demand

Only injects styles when they are used.

Ship CSS in NPM packages

Distribute styles with your NPM packages.

`2.16kb` minified & gzipped

Tiny core size for optimal performance.

CSS Function

The css function returns a tuple of class names and the style tags to render. You can use the class names to apply styles to an element and the style tag to inject the styles into the head of the document:

import React from "react";
import { css } from "restyle";

export default function BasicUsage() {
  const [classNames, styles] = css({
    padding: "1rem",
    backgroundColor: "peachpuff",
  });

  return (
    <>
      <div className={classNames}>Hello World</div>
      {styles}
    </>
  );
}

CSS Prop

The css function is most useful for components. However, you can use the css prop to style elements directly. The pragma will take care of applying the class names and injecting the style tag.

First, configure the pragma in your tsconfig.json file:

{
  "compilerOptions": {
    "jsxImportSource": "restyle"
  }
}

Now, you can use the css prop to style elements:

export default function CSSProp() {
  return (
    <div
      css={{
        padding: "1rem",
        backgroundColor: "peachpuff",
      }}
    >
      Hello World
    </div>
  );
}

Alternatively, you can set the pragma at the top of the file:

/** @jsxImportSource restyle */

export default function CSSProp() {
  return (
    <div
      css={{
        padding: "1rem",
        backgroundColor: "peachpuff",
      }}
    >
      Hello World
    </div>
  );
}

Styled Function

The styled function is a higher-order function that takes an HTML element tag name or a component that accepts a className prop and a initial styles object that returns a styled component that can accept a css prop:

import Link from "next/link";
import { styled } from "restyle";

const StyleLink = styled(Link, {
  color: "rebeccapurple",
  textDecoration: "none",
});

Box Component

import React from "react";
import { css } from "restyle";

export function Box({
  children,
  display = "flex",
  alignItems,
  justifyContent,
  padding,
  backgroundColor,
}) {
  const [classNames, styles] = css({
    display,
    alignItems,
    justifyContent,
    padding,
    backgroundColor,
  });
  return (
    <div className={classNames}>
      {children}
      {styles}
    </div>
  );
}

Psuedoclasses

/** @jsxImportSource restyle */

export default function Hover() {
  return (
    <div
      css={{
        ":hover": {
          opacity: 0.8,
        },
      }}
    >
      Hover me
    </div>
  );
}

Media Queries

/** @jsxImportSource restyle */

export default function MediaQueries() {
  return (
    <h1
      css={{
        fontSize: "2rem",
        "@media screen and (min-width: 40em)": {
          fontSize: "3.5rem",
        },
      }}
    >
      Resize the window
    </h1>
  );
}

Child Selectors

/** @jsxImportSource restyle */

export default function ChildSelectors() {
  return (
    <div
      css={{
        color: "black",
        "> a": {
          color: "tomato",
        },
      }}
    >
      Parent
      <a href="#">Link</a>
    </div>
  );
}

Zero Config CSS for React