Quaff

Asset Optimization

Help your app load faster by sending less CSS and smaller font files.

quaffAssets()

Usage

Setup

Add quaffAssets() to your Vite plugins. It includes styles for the Quaff components you use, plus shared styles and helpers.

vite.config.ts

import { quaffAssets } from "@quaffui/quaff/plugins/assets";
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [quaffAssets(), sveltekit()],
});

Remove any @quaffui/quaff/css/index.css import from src/routes/+layout.svelte so the plugin can choose which styles to include.

Remove Unused CSS

Enable css.stripUnused to remove unused shared styles and helpers. Used components keep all their styles.

quaffAssets({
  css: {
    stripUnused: true,
    safelist: ["text-primary", /^q-pa-/],
  },
});

css.safelist keeps classes the plugin cannot detect. For example, class={"q-pa-" + size} builds a class name at runtime; /^q-pa-/ keeps every class starting with q-pa-.

CSS Code Splitting

Quaff loads component styles with the Svelte components that use them. Vite's build.cssCodeSplit groups Quaff and application styles into output files, reusing shared styles. CSS splitting is enabled by default.

Base styles, fonts, include entries, safelisted classes, and styles detected in JavaScript, TypeScript, data files, and server-only components stay shared. Set build.cssCodeSplit: false to combine all Quaff and application CSS into one stylesheet. Server imports that cannot be resolved statically keep all detected component styles shared.

With rootLayout: false, import virtual:quaff.css once in your application entry or root component to load the shared styles.

Choose Fonts and Icons

Configure fonts to reduce font downloads too. Projects generated by create-quaff already include Roboto and Material Symbols. For a manual setup, add @fontsource/roboto for Roboto and material-symbols for icons if those packages are missing.

Choose Roboto weights, character groups (subsets), and file formats. For Material Symbols, choose outlined, rounded, or sharp. Enable fonts.icons.stripUnused to remove unused icons from the font.

quaffAssets({
  fonts: {
    roboto: {
      weights: [400, 500, 700],
      subsets: ["latin", "latin-ext"],
      formats: ["woff2"],
    },
    icons: {
      styles: ["outlined"],
      stripUnused: true,
      safelist: ["bookmark"],
    },
  },
});

Remove existing Roboto imports and Material Symbols @font-face rules from your app's stylesheet so the original fonts are not loaded alongside the optimized ones. In projects generated by create-quaff, these are in src/styles/app.scss or src/styles/app.css.

The plugin keeps icons detected in your source files, plus icons used by Quaff components. Add icon names received from an API or external package to fonts.icons.safelist, as shown with bookmark above.

Include the character groups your content needs. When you enable fonts, omitted options default to Roboto weights 400/500/700, all character groups, WOFF2/WOFF, and all three icon styles. To supply your own fonts, set roboto: false or icons: false inside fonts.

Components Outside src

The plugin checks src by default. Set sourceDir to a directory or an array of directories to scan, or use include to keep components used by code outside them:

quaffAssets({ include: ["QBtn", "Notify"] });

Use sourceExclude: ["**/*.test.ts"] to skip tests or generated code listings when scanning styles and icons. Patterns are relative to the Vite root; the root layout is always checked.

To include all Quaff styles during development, use css: { dev: "full" }.

Privacy Policy