Skip to main content
VelinStyle v1.3.0
⌂ Home
  1. Docs
  2. Installation & Build
  3. Optimize / production CSS

Production build 1.2.2

Publish only what your project uses. Prefer the Production Builder (velinstyle build --production) over hand-tuned PurgeCSS for VelinStyle assets. Deutsche Version. Full guide: Production Builder.

1.2.2: Content-aware trim for CSS, JS, themes, icons, fonts, and motion ? with a shareable report. Layer preset --preset lite remains available without a content scan.

When to use

When not

Production command

Scan your project and emit a trimmed VelinStyle production folder: 

npx velinstyle build --production --explain
# alias:
npx velinstyle production . -o ./dist/velin-production

Standalone Builds

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

Build Includes Size (gzip)
velinstyle.min.css Everything ~38 KB
dist/themes/*.min.css Theme presets (load alongside core CSS) ~1?2 KB each
npx velinstyle build Custom subset via velinstyle.config.js (CLI) varies 
<!-- 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="/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

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