Krysalicss

A modern, extremely modular, multi-theme CSS framework. JS-free output, SCSS-native authoring, runtime-switchable themes via CSS custom properties.

Install

npm install @adnap/krysalicss
# or
deno add npm:@adnap/krysalicss

Quick start

// app.scss
@use "@adnap/krysalicss";

That ships every component plus the default + dark themes. To compile only what you use:

@use "@adnap/krysalicss" with (
  $features: (button, card, layout-flex, typography-base, typography-title),
);

To bring your own theme, skip the batteries-included entry and pull what you need:

@use "@adnap/krysalicss";
@use "@adnap/krysalicss/theme/dark";

Features

• Modular by default. Every component is a self-contained SCSS plugin (_variables.scss + _plugin.scss) gated by a feature flag.
• Multi-theme. Light + dark out of the box. Themes are CSS custom property layers; switch at runtime by toggling a class — no rebuild.
• SCSS-native. Modern @use / @forward only. No @import.
• Intrusive and scoped. Every selector is a configurable variable — apply globally to bare HTML tags or rescope to a class prefix or web-component shadow root.

Documentation

The docs site follows the Diátaxis framework: tutorials, how-to guides, reference, and explanation.

Browser support target

Evergreen Chrome, Firefox, Safari, Edge. No IE.

Visual regression tests

Playwright toHaveScreenshot() against astro preview (port 4321). Browsers × viewports × themes matrix; per-component crops via data-testid.

Run loop

pnpm docs:build                   # required once before snapshotting
pnpm test:visual                  # runs the suite
pnpm test:visual:update           # rewrite snapshots after a deliberate change

webServer boots astro preview automatically; reuseExistingServer is on locally and off in CI.

When a test fails

1. Inspect test-results/ and playwright-report/ (HTML report in CI artifact).
2. Diff PNGs sit next to the test result; eyeball the change.
3. If the visual change is intentional (component refactor, theme tweak): re-run with pnpm test:visual:update, review the diff in your VCS, commit.
4. If the change is unintentional: fix the source (do not update snapshots).

First-run behaviour

• Local: missing snapshots are written on first run; a passing run after --update-snapshots is the baseline you commit.
• CI (MR branches): missing baselines fail the job. Generate baselines locally (or in a one-off CI run with --update-snapshots) and commit them on develop.

WebKit on Linux gotcha

WebKit-Linux (CI image mcr.microsoft.com/playwright:v1.49.0-jammy) renders fonts slightly differently from WebKit-macOS (local). If you see false diffs on the webkit-* projects only, accept the CI snapshot as the canonical baseline: trigger a manual CI run with --update-snapshots, download the artifact, commit those PNGs.

Acknowledgements

Krysalicss is indebted to the following open-source projects for spirit, class naming, and API shape. Each is MIT-licensed; thanks to their authors.

• Bulma — MIT
• Picnic CSS — MIT

src/base/reset/_plugin.scss adapts a few lines from minireset.css (MIT). The banner comment is preserved in the ported file.

License

MIT — Copyright (c) 2026 adnap.