@stylify/bundler NPM

@stylify/bundler introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS dynamically based on what you write. Don't study framework. Focus on coding.

The Bundler provides a functionality to easily bundle CSS, mangle selectors and integrate Stylify into various tools.

⚡ Why Stylify instead of CSS or inline styles?

Because of fewer CSS headaches, faster coding and extremely optimized output.

✨ Features

💎 Syntax you already know. Don't waste time studying CSS framework.
💎 Less switching between HTML/CSS files
💎 Automagic and Extremely tunned CSS optimization
💎 Simple CSS Bundles splitting for Layouts/Pages
💎 Easily Configurable and Extensible
💎 Prepared components
💎 Define Variables, Components, Custom selectors
💎 Add custom macros like ml:2
💎 Variables can be injected into CSS as CSS variables
💎 CSS variables can differ for each screen
💎 Simplify coding with helpers like color:lighten(#000,10)
💎 Style any device with dynamic screens
💎 You can mark areas for which CSS should not be
💎 Split bundles for page/layout/component
💎 Selectors are minified from long .color:blue to short .a
💎 No purge needed. CSS is generated only when something is matched
💎 Components & Custom selectors are attached to utilities. No duplicated property:value
💎 Hooks can modify CSS or output for example wrap it in CSS layers
💎 Mangled (hidden/unreadable) HTML classes in production (if mangled)
💎 Try it with frameworks like Next.js, Astro.build, SolidJS, Qwik Symfony, Nette, Laravel
💎 Works with bundlers like Webpack, Rollup, Vite.js
💎 Generated CSS can be used within SCSS, Less, Stylus
💎 CSS variables can be exported into external files and reused