eszett: Explicit CSS Scopes for React

Unlock the power of scoped styling in your React applications with eszett, a build-time only plugin inspired by styled-jsx. This solution is designed for compatibility with React Server Components, offering a seamless integration for applications built with Next.js.

Key Features

• Scoped Styles: Automatically generates unique class names for your components to prevent style collisions.
• Styling Nested components: With the sz template literal you cann pass the generated classNames to child components.
• Explicit Scopes: Scoping is very explicit, so you can tailor it to your own needs.

How to Use eszett

To get started with eszett, you simply import it into your component:

import eszett from "eszett";  
async function Header() {  
  return (  
    <header className='header'>  
      <h2>Hello World</h2>  
      <style href={eszett} precedence="eszett">{`  
        .${eszett} {  
          &.header {  
            background: blue;  
          }  
        }  
      `}</style>  
    </header>  
  );  
}  

Advanced Usage

• Styling Children: Explicit scoping means you can make your selectors as local or as global as you like.

import eszett from "eszett";  
async function Component(props) {  
  return (  
    <div className="wrapper">  
      {props.children}  
      <style>{`  
        .${eszett}.wrapper strong {  
          color: red;  
        }  
      `}</style>  
    </div>  
  );  
}  

• Using Tagged Template Literals: To style imported components that don't receive class names by default, utilize the sz tagged template literal.

import eszett, { sz } from "eszett";  
import Link from "next/link";  
async function Component() {  
  return (  
    <>  
      <Link href="/home" className={sz`link`} />  
      <style>{`  
        .${eszett}.link {  
          color: red;  
        }  
      `}</style>  
    </>  
  );  
}