@luwiostack/preflight

Our own framework-agnostic CSS reset — box-sizing and margins zeroed, headings de-styled, form elements normalized, and the rest of a small, well-known, battle-tested rule set — as a drop-in <Preflight> component.

Standalone — no dependency on @luwiostack/theme or anything else in LuwioStack. If you're already using @luwiostack/theme for colours, mount <Preflight> alongside <Theme>; they don't know about each other.

Install

npm install @luwiostack/preflight

react is a peer dependency.

Usage

import { Preflight } from '@luwiostack/preflight'

// Mount once, anywhere — renders one inline <style>, SSR-safe.
<Preflight />

<Preflight nonce?> takes one optional prop: a CSP nonce, applied to the <style> tag it renders, for a style-src policy that doesn't include 'unsafe-inline'.

Why a reset at all

The reset is wrapped in @layer base, so it always loses to any unlayered CSS you write — yours or a component library's — regardless of where either one renders relative to the other. It's the same fixed stylesheet for every consumer: it doesn't read config, doesn't vary by theme, and has nothing to do with colours or tokens — that's @luwiostack/theme's job, not this package's.

It's a frozen, hand-maintained stylesheet — see src/css.ts for how it's refreshed.