Krysalicss

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

Install

# pnpm (recommended)
pnpm add @adnap/krysalicss

# npm
npm install @adnap/krysalicss

# yarn
yarn add @adnap/krysalicss

# bun
bun add @adnap/krysalicss

# deno
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 (
  $feature-list: (
    element-button, module-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

Full docs: krysalicss.eu. The site follows the Diátaxis framework: tutorials, how-to guides, reference, and explanation. Start with the first-page tutorial for a 10-minute walkthrough, or jump to the component reference for class names and variables.

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.59.1-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.