Restyle

The simplest way to add CSS styles to your React components.

CSS in JSReact
souporserious/restylereactstyle.vercel.apprestyle

README

restyle


The simplest way to add CSS styles to your React components.

Features


- Zero-runtime CSS in JS
- Generates atomic class names
- De-duplicates styles
- Works in Server and Client Components
- Encourages encapsulation
- Supports css prop with JSX pragma
- Loads styles on demand
- Allows shipping CSS in NPM packages
- Small core 1.38kb minified and gzipped

View Example

Installation


  1. ```bash
  2. npm install restyle
  3. ```

[!IMPORTANT]

This library requires a React Canary version since it utilizes the new style hoisting feature.


How it Works


Restyle leverages React's new ability to [hoist style elements](https://react.dev/reference/react-dom/components/style#rendering-an-inline-css-stylesheet) by generating atomic CSS on-demand to provide a flexible and efficient styling solution for React components. Here's a high-level overview of how it operates:

1. Styles Parsing: Restyle takes a styles object of CSS and parses it, generating atomic class names for each unique style property and value pair:

  1. ```ts
  2. import { css } from 'restyle'

  4. const [classNames, styleElement] = css({
  5.   padding: '1rem',
  6.   backgroundColor: 'peachpuff',
  7. })

  9. // classNames: 'x1y2 x3z4'
  10. // styleElement:
  11. ```

2. Class Names Generation and Deduplication: Atomic class names are generated using a hashing function to ensure uniqueness and prevent collisions. Class names are cached per request, optimizing performance and reducing the overall size of the generated CSS:

  1. ```ts
  2. import { css } from 'restyle'

  4. const [classNames] = css({
  5.   padding: '1rem',
  6.   backgroundColor: 'tomato',
  7. })

  9. // Example output: 'x1y2 xfg3'
  10. ```

3. Atomic CSS: By breaking down styles into atomic units, it allows for highly reusable class names, making it easy to manage and override styles while reducing the overall size of the CSS produced:

  1. ```ts
  2. import { css } from 'restyle'

  4. const styles = {
  5.   padding: '1rem',
  6.   backgroundColor: 'rebeccapurple',
  7. }

  9. const [classNames, styleElement] = css(styles)

  11. // classNames: 'x1y2 x4z1'
  12. // Reuse class names for other elements
  13. const buttonStyles = {
  14.   ...styles,
  15.   border: '1px solid black',
  16. }

  18. const [buttonClassNames, buttonStyleElement] = css(buttonStyles)

  20. // buttonClassNames: 'x1y2 x4z1 x5a6'
  21. ```

4. On-Demand Style Injection: Styles are only added to the DOM when the component or element is rendered:

  1. ```tsx
  2. import { css } from 'restyle'

  4. export default function OnDemandStyles() {
  5.   const [classNames, styleElement] = css({
  6.     padding: '1rem',
  7.     backgroundColor: 'papayawhip',
  8.   })

  10.   return (
  11.     <>
  12.       <div className={classNames}>Hello World</div>
  13.       {styleElement}
  14.     </>
  15.   )
  16. }
  17. ```

5. Integration with JSX Pragma: Easily add support for the css prop via the JSX pragma, allowing colocated inline CSS styles directly on JSX elements.

  1. ```tsx
  2. /** @jsxImportSource restyle */

  4. export default function MyComponent() {
  5.   return (
  6.     <div
  7.       css={{
  8.         padding: '1rem',
  9.         backgroundColor: 'peachpuff',
  10.       }}
  11.     >
  12.       Hello World
  13.     </div>
  14.   )
  15. }
  16. ```