Stylify

A library that uses CSS-like selectors to generate optimized utility-first ...

stylify/packages stylifycss.com @stylify/unplugin

README

💎 Introduction

Stylify is a library that uses CSS-like selectors to generate utility-first CSS dynamically based on what you write.

Don't study framework. Focus on coding.

Stylify preview

✨ Features

- 🔗 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 likecolor: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. 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 file and reused

📦 Packages

Project	Status	Description
---	---	---
[astro]	[![astro-status]][astro-package]	Integration
[bundler]	[![bundler-status]][bundler-package]	A
[nuxt]	[![nuxt-status]][nuxt-package]	Module
[nuxt-module]	[![nuxt-module-status]][nuxt-module-package]	Module
[stylify]	[![stylify-status]][stylify-package]	Core
[unplugin]	[![unplugin-status]][unplugin-package]	Universal

[astro]: https://github.com/stylify/packages/tree/master/packages/astro

[astro-status]: https://img.shields.io/npm/v/@stylify/astro?color=%2301befe&label=Version&style=for-the-badge

[astro-package]: https://npmjs.com/package/@stylify/astro

[bundler]: https://github.com/stylify/packages/tree/master/packages/bundler

[bundler-status]: https://img.shields.io/npm/v/@stylify/bundler?color=%2301befe&label=Version&style=for-the-badge

[bundler-package]: https://npmjs.com/package/@stylify/bundler

[nuxt]: https://github.com/stylify/packages/tree/master/packages/nuxt

[nuxt-status]: https://img.shields.io/npm/v/@stylify/nuxt?color=%2301befe&label=Version&style=for-the-badge

[nuxt-package]: https://npmjs.com/package/@stylify/nuxt

[nuxt-module]: https://github.com/stylify/packages/tree/master/packages/nuxt-module

[nuxt-module-status]: https://img.shields.io/npm/v/@stylify/nuxt-module?color=%2301befe&label=Version&style=for-the-badge

[nuxt-module-package]: https://npmjs.com/package/@stylify/nuxt-module

[stylify]: https://github.com/stylify/packages/tree/master/packages/stylify

[stylify-status]: https://img.shields.io/npm/v/@stylify/stylify?color=%2301befe&label=Version&style=for-the-badge

[stylify-package]: https://npmjs.com/package/@stylify/stylify

[unplugin]: https://github.com/stylify/packages/tree/master/packages/unplugin

[unplugin-status]: https://img.shields.io/npm/v/@stylify/unplugin?color=%2301befe&label=Version&style=for-the-badge

[unplugin-package]: https://npmjs.com/package/@stylify/unplugin

Compatibility

Environment	Version	Note
\|-------------\|------------------------------------------------------------------------------------------------------------------------------------------------------------------\|---------------------------------------------------------------------------------------------------------------\|
Browser	[ES5-compliant	Stylify
Node	>=	In

💡 Examples, Changelog, Issues

- Live examples and tutorials: documentation

- Changelog and release changes: releases

- Have an idea? Found a bug? Feel free to create an issue

🤟 Stay In Touch

- Visit Stylify website https://stylifycss.com.

- Follow Stylify on Twitter.

- Join Stylify community on Discord.

👷 Contributing

Please make sure to read the Contributing Guide before making a pull request.

📝 License

MIT