@gmono/scoped-css-reactor

Scoped CSS hooks for server-reactor (SSR).

Built on @gmono/scoped-css-core, this package pre-binds the core hooks to the server-reactor adapter (ReactorCssAdapter), so CSS written inside a server-rendered component stays scoped to that component — no naming collisions across pages or components.

Install

npm install @gmono/scoped-css-reactor

Requires server-reactor >= 0.11.0 and @gmono/scoped-css-core >= 0.1.0.

Quick start

import { useCSS } from '@gmono/scoped-css-reactor'

export function Button({ children }: { children: any }) {
  const { classes, style } = useCSS(`
    .btn { padding: 0.5rem 1rem; border-radius: 6px; }
    .btn:hover { opacity: 0.9; }
  `)

  return (
    <>
      {style}
      <button class={classes.btn}>{children}</button>
    </>
  )
}

.btn is rewritten to .c3-btn (or similar) — two components can both define .btn without clashing.

Global styles

Pass { global: true } to opt out of scoping — class names are emitted as-is.

const { classes, style } = useCSS(`.alert { color: red; }`, { global: true })
// classes = { alert: 'alert' }

Loading CSS from files (server-side)

Unlike the browser, server-reactor can read files synchronously, so useCSSFile is fully supported:

import { useCSSFile } from '@gmono/scoped-css-reactor'

export function Card() {
  const { classes, style } = useCSSFile('./styles/card.css')
  return <>{style}<div class={classes.card}>...</div></>
}

Sharing a scope with child components

A parent can publish its scope to the subtree; children inherit the prefix via useCSSClasses() or by using { scoped: true }.

import { useCSS, CSSMappingProvider, useCSSClasses } from '@gmono/scoped-css-reactor'

function Panel({ children }: { children: any }) {
  const { classes, style, scopeId } = useCSS(`.panel { border: 1px solid #ddd; }`)
  return (
    <>
      {style}
      <CSSMappingProvider mapping={{ scopeId, classes }}>
        <div class={classes.panel}>{children}</div>
      </CSSMappingProvider>
    </>
  )
}

function PanelTitle() {
  const parentClasses = useCSSClasses()
  return <h2 class={parentClasses?.title || 'title'}>Title</h2>
}

API

| Export | Description | | --- | --- | | useCSS(css, opts?) | Scope a CSS string; returns { classes, style, scopeId } | | useCSSFile(path, opts?) | Same as useCSS, reading the CSS from disk synchronously | | CSSMappingProvider | Provides { scopeId, classes } to the subtree | | useCSSClasses() | Returns the nearest ancestor CSSMappingProvider's classes map (or undefined) |

Type helpers (CSSMapping, UseCSSOptions, CSSMappingProviderProps, UseCSSResult, UseCSSFileResult) are re-exported from @gmono/scoped-css-core.

License

MIT