Contribute

Set up the Chassis CSS project locally — pnpm workflow, the Astro-powered docs site, and the test suite.

This page is for contributors working on Chassis CSS itself. If you only want to use Chassis in your own project, Installation and Clone and Customize cover what you need.

Tooling setup

Chassis CSS is a pnpm workspace. Local development depends on Node and pnpm; the documentation site is built with Astro.

Install Node.js 18 or later. nodejs.org ships installers; Volta and nvm are good options if you manage multiple Node versions.
Install pnpm. Either via Corepack (corepack enable && corepack prepare pnpm@latest --activate) or directly: see pnpm.io/installation.
Fork and clone the repository.
```
git clone https://github.com/chassis-ui/css.git
cd css
pnpm install
```
pnpm install resolves and installs every workspace dependency, including the documentation site and the linked @chassis-ui/tokens and @chassis-ui/icons packages.

When the install finishes, the scripts documented below are ready to run.

pnpm scripts

The full list of scripts lives in package.json. The ones you'll use most often:

Command	What it does
`pnpm dev`	Compiles CSS and JS in watch mode and starts the docs site dev server. The fastest feedback loop for working on the framework or the docs.
`pnpm dist`	Produces the full `dist/` output — compiled, prefixed, RTL-converted, and minified CSS and JS.
`pnpm test`	Lints CSS and JS, builds the distribution, runs the Sass test suite, runs the JS test suite, builds the docs site, and lints the built docs. The full pre-merge check.
`pnpm css:compile`	Compiles SCSS to CSS using Dart Sass with source maps.
`pnpm css:test`	Runs the Sass test suite (`scss/tests/`).
`pnpm js:test`	Runs the Karma test suite for the JS plugins.
`pnpm site:build`	Builds the static docs site for production.

Run pnpm run with no arguments to see every available script.

Sass

Chassis CSS uses Dart Sass. The Sass build runs at precision 10 (Dart Sass's default for efficiency) and the output is post-processed with Autoprefixer and minified with clean-css. If you produce a custom build outside the project's tooling, keep precision at 6 or higher to avoid sub-pixel rounding artefacts.

Sass deprecation warnings appear during compile when a transitional Sass syntax is used. They don't block the build. The project tracks the long-term cleanup work — silencing the warnings in your local config is fine in the meantime.

Autoprefixer

Compiled CSS is post-processed with Autoprefixer using the targets defined in .browserslistrc. The build invokes Autoprefixer automatically; if you compile Chassis from source in your own pipeline, run Autoprefixer on the output to match the support matrix in our distribution build.

RTLCSS

The RTL builds (dist/css/chassis.rtl.css and friends) are produced by RTLCSS running over the LTR output. Maintaining a single source for both directions cuts the maintenance cost and keeps them in sync. RTLCSS control directives and value directives are used in a few places where mechanical flipping isn't enough — see RTL for examples.

Documentation site

The documentation is a static Astro site under site/. To run it locally:

Run through the tooling setup above so dependencies are installed.
From the project root, run pnpm dev.
Open http://localhost:4323/ in your browser. Edits to the docs MDX files hot-reload automatically.

The site source is in site/; content lives under site/content/docs/. Astro's documentation covers the rendering side of the stack.

Troubleshooting

If a fresh clone refuses to install or build cleanly:

rm -rf node_modules pnpm-lock.yaml
pnpm install

If the Sass test suite reports unexpected failures, regenerate the snapshot output the suite expects:

pnpm css:compile
pnpm css:test

For anything that survives those resets, open an issue with the failing command and your environment (Node version, pnpm version, OS).