Introduction

CSS-in-JS lib that helps to define CSS for the React components on the client & server, without any additional configuration from either side.

Advantages

Your CSS is not bigger than it has to be
- Your app does not have to know what CSS it needs for a given route before rendering it. That’s helpful since you don’t have to tell what CSS file you need for a given route, neither adjust the webpack configuration to automatize the process. You get only CSS you need for a given component’s tree - no more, no less.
Your CSS is streamable
- That means your app can take advantage of a new suspense architecture in React 18. It’s particularly beneficial when you combine it with streamable data source like: @ssr-tools/async-data-store
Your CSS is backed by TypeScript
- Since you define the CSS in the .tsx files, TypeScript constantly helps you to avoid typos in your CSS markup. Also, you get intellisense for your CSS automatically, since most likely your editor is already configured to support TypeScript. You don’t need any additional configuration to support CSS.
Your CSS is scoped
- Each time you define a new CSS definition you get a new CSS scope. You won’t get into the namespace conflicts (you can forget about things like BEM…), since each CSS class will automatically get a unique hash.
Your CSS is debuggable
- You can define an additional identifier for the CSS class, so that you can easily identify them in the browser’s devtools.
Your CSS is written in your app code
- You get less context switching. CSS-IN-JS is to CSS the same thing as ORM is to SQL.
Your CSS is available for vendors or your custom code
- You are not tighten to a predefined set of components, nor to className prop. You can provide a generated className to any component’s prop.

Getting started

You should not need any additional configuration, just make sure your app uses React 18.

1. Install the module

npm i @ssr-tools/css

2. Wrap your entry point component with `<StyleCacheProvider>`

Usually, it would be App.tsx:

// App.tsx

export const App = () => {
  return (
    <StyleCacheProvider>
      <Router />
      {/* ...other providers, etc... */}
    </StyleCacheProvider>
  )
};

3. Add some css