solid-styled

Reactive stylesheets for SolidJS

This branch holds solid-styled 1.0, published under the next tag. The 0.x line (latest, Solid 1.x) lives on the 0.x branch and only gets fixes.

What it is

• You write plain CSS next to your component, in a css tagged template or a <style jsx> element.
• A build plugin extracts that CSS at compile time, so almost nothing is left at runtime.
• Every selector is scoped to the component that declared it, so styles never leak.
• Interpolated values become CSS custom properties, so they stay reactive without re-rendering the sheet.
• The same sheet is inserted once, no matter how many instances of the component are mounted.

Requirements

• solid-js and @solidjs/web ^2.0.0-rc.5.
• Node ^20.19.0 || >=22.12.0.
• The build plugin below. The css tag throws at runtime if the plugin is not installed.

Install

npm i solid-styled
npm i -D unplugin-solid-styled

yarn add solid-styled
yarn add -D unplugin-solid-styled

pnpm add solid-styled
pnpm add -D unplugin-solid-styled

Setup

// vite.config.js
import solid from '@solidjs/vite-plugin';
import solidStyled from 'unplugin-solid-styled';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [solid(), solidStyled.vite()],
});

import { css } from 'solid-styled';

function Title(props) {
  css`
    h1 {
      color: ${props.color};
    }
  `;

  return <h1>Hello World</h1>;
}

• The Vite entry moves itself ahead of the Solid plugin. With other bundlers, put it before the plugin that compiles JSX.
• h1 only matches the h1 written in Title. props.color becomes a CSS custom property, so the sheet stays the same when it changes.

Docs

• Getting started covers requirements, install, Vite and TypeScript setup, and other bundlers.
• Styling covers css, <style jsx>, reactive values and what can be interpolated.
• Scoping covers how scoping works, CSS nesting, :global, @global, keyframes and use:solid-styled.
• SSR covers StyleRegistry, renderSheets and hydration.
• Component libraries covers publishing components that use solid-styled.
• Configuration covers plugin order, options and file filters.
• Editor and linting covers syntax highlighting, comment shortcuts and no-unused-expressions.
• Migrating from 0.x lists the breaking changes from 0.12.x to 1.0.
• How it works covers the compiler pipeline, its output and how values reach elements.
• API reference covers every export of solid-styled, solid-styled/compiler and unplugin-solid-styled.
• Known limits covers unsupported setups and open bugs.

Sponsors

License

MIT © lxsmnsyc