Skip to main contentSkip to docs navigation
View on GitHub

Parcel

Bundle Chassis CSS and JavaScript with Parcel — zero-config Sass detection and token resolution.

On this page

Parcel is a zero-configuration web application bundler that automatically installs language transformers as it detects them. This guide walks through a fresh project; if you already have Parcel set up, jump to Import Chassis.

Installation covers the moving parts — this is the lightest of the three bundler guides because Parcel's auto-detection eliminates most manual configuration.

Setup

This guide assumes Node.js is installed and you're comfortable in a terminal.

  1. Create a project folder and initialize npm.

    Shell
    mkdir my-project && cd my-project
pnpm init

  2. Install Parcel. Parcel is the only build dependency — it installs the Sass transformer automatically when it sees a .scss file.

    Shell
    pnpm add -D parcel

  3. Install Chassis CSS and its tokens. Add the optional peer dependencies for the components that need them, or omit both and use chassis.bundle.* which includes them.

    Shell
    pnpm add @chassis-ui/css @chassis-ui/tokens
pnpm add @floating-ui/dom vanilla-calendar-pro   # optional

Project structure

Create the source folders and starter files:

Shell
mkdir -p src/js src/scss
touch src/index.html src/js/main.js src/scss/styles.scss

The result:

TEXT
my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package.json
└── pnpm-lock.yaml

Configure Parcel

Parcel itself needs no configuration file. The HTML page is the entry point, and Parcel follows the imports from there.

  1. Fill in src/index.html. Reference the stylesheet and the script directly — Parcel resolves both, compiles them, and rewrites the references at build time.

    HTML
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chassis CSS w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-large px-medium mx-auto">
      <h1>Hello, Chassis CSS and Parcel!</h1>
      <button class="button primary">Primary button</button>
    </div>
  </body>
</html>

    When Parcel sees the .scss reference, it auto-installs the Sass transformer. To install it manually instead, run pnpm add -D @parcel/transformer-sass.

  2. Add the start and build scripts to package.json.

    JSON
    {
  "scripts": {
    "start": "parcel serve src/index.html --public-url / --dist-dir dist",
    "build": "parcel build src/index.html --dist-dir dist"
  }
}

  3. Start the dev server.

    Shell
    pnpm start

    Parcel opens a local server on http://localhost:1234. The page won't be styled yet — the stylesheet and script still need to be filled in.

Import Chassis

Parcel needs a Sass entry point and a .sassrc.js config file that sets loadPaths so Sass can resolve token overrides from src/scss.

  1. Create .sassrc.js in the project root. Parcel passes these options directly to Dart Sass.

    JavaScript
    const path = require('path')

module.exports = {
  loadPaths: [path.resolve(__dirname, 'src/scss')]  // project token override
}

  2. Fill in src/scss/styles.scss. The token source resolves through _vendor.scss before the rest of Chassis processes its variables, so a single @use directive is all that's needed.

    SCSS
    // Chassis CSS — token source resolves via the loadPaths entry in .sassrc.js
@use "@chassis-ui/css/scss/chassis";

// Optional: settings overrides use the `with (...)` syntax
// @use "@chassis-ui/css/scss/chassis" with (
//   $enable-fluid-font-sizes: false,
//   $enable-component-shadows: true,
// );

    The default token build (chassis/docs) is resolved automatically. To switch to a custom token set, place a _chassis-tokens.scss on an earlier loadPaths entry — see Customize → Sass for details.

  3. Import the Chassis JS in src/js/main.js. Floating UI and vanilla-calendar-pro are resolved through the bundler when needed.

    JavaScript
    import * as chassis from '@chassis-ui/css'

    For smaller bundles, import only the required plugins:

    JavaScript
    import { Modal, Tooltip } from '@chassis-ui/css'

  4. Reload. With all files filled in, Parcel hot-reloads the page — the heading and button should now render with Chassis styling.

Build optimizations

Parcel automatically extracts CSS to a separate file when running parcel build. No additional configuration is needed for CSS extraction.

Next steps

These docs cover JavaScript integration, Sass customization, and bundle optimization for a Parcel-based Chassis project.