Production Builder 1.2.5

Build only what your project actually uses. Intelligent production output for go-live — only the CSS, JS, themes, icons, fonts, and motion your pages need. Do not ship the full framework blindly. Deutsch

Version history

2 releasesv1.3.0

Build only what your project uses — trimmed CSS, JS, themes, icons, fonts, and motion.

1.2.5ChangedExperience report surface

Production report breakdown rows and Experience widgets for bundle / savings.

1.2.2NewProduction Builder

Project-aware production package: CSS graph closure, runtime subset, themes/icons/motion when used, `--explain` / safelist.

Prefer `velinstyle production` / `build --production` over shipping the full framework bundle for go-live.

Changelog Upgrading

Commands

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

Content-aware trim for CSS, JS (Web Components), themes, icons, fonts, and motion — ship only what the project uses.

Output

Default directory: ./dist/velin-production/

File	Purpose
`velinstyle.css`	Trimmed + LightningCSS-bundled CSS
`velinstyle.js`	`register([...detected])` runtime stub (not the full IIFE)
`velin-icons.svg`	Subset sprite
`themes/*.css`	Only themes found in content / config
`production-report.txt` / `.json`	Size report
`used.json`	Extract + graph closure

Flags

velinstyle production [path] \
  --out ./dist/velin-production \
  --explain \
  --watch \
  --report ./report.json \
  --safelist modal.css,nordic,check \
  --no-js --no-icons --no-themes --no-motion --no-minify

--out / -o — output directory
--explain — list removed CSS / themes / icons
--watch — rebuild on content change
--report <file> — write JSON or text report
--safelist — extra classes / themes / icons / CSS files
--no-js, --no-icons, --no-themes, --no-motion, --no-minify

Config

// velinstyle.config.js
export default {
  production: {
    out: './dist/velin-production',
    content: [
      './**/*.{html,htm,js,jsx,ts,tsx,vue,astro,md,mdx,twig}',
      './**/*.blade.php',
    ],
    safelist: [],
    themes: 'auto', // or ['nordic']
  },
};

Content Scanner — scan your project

Production extracts usage from project sources, not HTML alone. Blade (.blade.php) is first-class for Laravel.

Family	Extensions
HTML	`.html`, `.htm`
Blade	`.blade.php` (first-class)
Twig	`.twig`
Vue	`.vue`
React	`.jsx`, `.tsx`
Astro	`.astro`
Markdown	`.md`, `.mdx`

Production Report

Production Report

CSS            168 KB  →  131 KB
Runtime        251 KB  →    0.9 KB
Icons           42 KB  →    1 KB
Themes          13     →    2
Motion          18     →    4
Components      43     →    4

Savings         71 %

vs `--preset lite`

	Lite	Production
Scan	No	Yes (your project sources)
Scope	Layer subset	CSS + JS + themes + icons + motion
Go-live	Good start	Preferred publish path

Prefer Production for publish; Lite for a quick marketing CSS slice.

Review

velinstyle review includes scores.optimization and soft warnings when pages still link the full CDN bundle. Pair with velinstyle check . --profile marketing (or app / docs) before deploy.

CI / pipeline

Run Production after your app build (or as a dedicated step), commit or artifact the dist/velin-production/ folder, and point HTML at those files — not at the unscoped CDN pin. Rebuild when templates or component usage change (--watch locally).

Go-live checklist

velinstyle doctor
velinstyle production . --explain -o ./dist/velin-production
Link dist/velin-production/velinstyle.css + velinstyle.js (+ themes/icons from that folder)
velinstyle review . — check scores.optimization
velinstyle check . --profile marketing (or app / docs)
Deploy with Production assets; pin package 1.2.5+
Optional: velinstyle dashboard · velinstyle doctor . --record (Velin Experience)

Customize · Production build
Marketing lite CSS
Performance audit (perf stays audit-only)
Deploy
CLI reference