1. Docs
2. Customize
3. Optimize

Optimize

Reduce your CSS bundle size by tree-shaking unused styles, importing only the modules you need, and following performance best practices.

Selective Imports

Use the VelinStyle CLI to build a smaller CSS file with only the layers your project needs (no Sass required):

npx velinstyle init
npx velinstyle build --include tokens,reset,grid,button,card,utilities

Standalone Builds

For CDN users, VelinStyle provides pre-built subsets you can use instead of the full bundle:

<!-- Smaller bundle: configure layers, then build locally -->
<!-- npx velinstyle init && npx velinstyle build -o dist/my-velin.css --minify -->
<link rel="stylesheet" href="/dist/my-velin.min.css">

<!-- Or pin the full published bundle from npm/CDN -->
<link rel="stylesheet"
      href="https://unpkg.com/@birdapi/velinstyle@0.8.0/dist/velinstyle.min.css">

PurgeCSS Integration

Use PurgeCSS to automatically remove unused CSS classes from your production build. Here's a typical configuration:

// purgecss.config.js
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.jsx',
    './src/**/*.vue',
  ],
  css: ['./node_modules/@birdapi/velinstyle/dist/velinstyle.min.css'],
  safelist: [
    /^modal/,
    /^tooltip/,
    /^popover/,
    /^offcanvas/,
    /^data-velin-theme/,
  ],
};

Vite & PostCSS

When using Vite with a subset build or PurgeCSS on your HTML, you can shrink CSS further. For additional optimization, add cssnano to your PostCSS pipeline:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: ['default', {
        discardComments: { removeAll: true },
      }],
    }),
  ],
};

Performance Tips

• Preload the stylesheet — Add <link rel="preload"> to start downloading CSS before the parser reaches it:

<link rel="preload" href="/css/velinstyle.min.css" as="style">
<link rel="stylesheet" href="/css/velinstyle.min.css">

• Self-host for production — Download and serve VelinStyle from your own domain to eliminate third-party DNS lookups and benefit from HTTP/2 multiplexing.
• Enable Brotli/Gzip — Ensure your server compresses CSS responses. VelinStyle's full build compresses from ~160 KB to ~38 KB with gzip.
• Use content-visibility — For long pages, apply content-visibility: auto on off-screen sections to defer rendering.
• Lazy-load Web Components — Only import the JS bundle on pages that use custom elements like <velin-icon> or <velin-dialog>.