<h2>Overview</h2>
Stylify is a library that aims to simplify CSS styling by using CSS-like selectors to dynamically generate utility-first CSS. It allows users to define variables, components, and custom selectors, making coding faster and more optimized. Stylify focuses on coding rather than studying complex frameworks, offering features that aim to reduce CSS headaches and improve efficiency.
<h2>Features</h2>
<ul>
<li>Define Variables, Components, Custom selectors</li>
<li>Add custom macros like ml:2</li>
<li>Inject variables into CSS as CSS variables</li>
<li>Different CSS variables for each screen</li>
<li>Helpers like color:lighten(#000,10) for simplified coding</li>
<li>Style any device with dynamic screens</li>
<li>Mark areas for which CSS should not be applied</li>
<li>Split bundles for page/layout/component</li>
<li>Minified selectors for optimized output</li>
<li>No need for purge as CSS is generated only when something is matched</li>
<li>Components &#x26; Custom selectors attached to utilities for efficient styling</li>
<li>Hooks to modify CSS or output</li>
<li>Mangled HTML classes in production if mangled</li>
<li>Works with frameworks like Next.js, Astro, SolidJS, etc.</li>
<li>Compatible with bundlers like Webpack, Rollup, Vite.js</li>
<li>Generated CSS usable within SCSS, Less, Stylus</li>
</ul>

Stylify

Packages