npm package: @stylify/stylify
Description: Stylify generates utility-first CSS dynamically based on what you write. Write HTML. Get CSS.
Author: Vladimír Macháček
Latest version: 0.7.0

<br><br>

<p align="center">
	<a href="https://stylifycss.com" target="_blank" rel="noopener noreferrer">
		<img src="https://stylifycss.com/images/logo/horizontal.svg?v2" height="100" alt="Stylify logo">
	</a>
</p>

<br><br>

<p align="center">
<a href="https://discord.gg/NuJsk5SMDz"><img src="https://img.shields.io/badge/chat-on%20discord-7289da.svg?sanitize=true" alt="Chat"></a>
<a href="https://github.com/stylify/packages/discussions"><img src="https://user-images.githubusercontent.com/14016808/132510133-76bb66a9-951f-4411-9236-140cac7b7472.png"></a>
<a href="https://twitter.com/stylifycss"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/stylifycss?style=social"></a>
<a href="https://github.com/stylify/packages"><img alt="GitHub Org's stars" src="https://img.shields.io/github/stars/stylify/packages?style=social"></a>
<a href="https://github.com/stylify/packages/blob/master/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/stylify/packages"></a>
<br>
<a href="(https://github.com/stylify/packages/actions/workflows/tests.yaml"><img alt="GitHub Workflow Status (branch)" src="https://github.com/stylify/packages/actions/workflows/tests.yaml/badge.svg"></a>
<a href="https://codecov.io/gh/stylify/packages"><img src="https://codecov.io/gh/stylify/packages/branch/master/graph/badge.svg?token=ZJLKX877DF"/></a>
<a href="https://www.npmjs.com/package/@stylify/stylify"><img alt="npm" src="https://img.shields.io/npm/v/@stylify/stylify"></a>
<a href="https://www.npmjs.com/package/@stylify/stylify"><img alt="npm" src="https://img.shields.io/npm/dm/@stylify/stylify"></a>
<a href="https://www.jsdelivr.com/package/npm/@stylify/stylify"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/@stylify/stylify"></a>
<a href="https://github.com/stylify/packages/issues"><img alt="GitHub issues" src="https://img.shields.io/github/issues/stylify/packages"></a>
<a href="https://github.com/stylify/packages"><img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/stylify/packages"></a>
<a href="https://github.com/stylify/packages/releases"><img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/stylify/packages"></a>
<a href="https://github.com/stylify/packages"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/stylify/packages"></a>
</p>

## 💎 @stylify/stylify introduction

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

<p align="center">
<img src="https://raw.githubusercontent.com/stylify/packages/master/stylify-intro-v2.gif" alt="Stylify preview">
</p>

## ⚡ Why Stylify instead of CSS or inline styles?
Because of [fewer CSS headaches](https://stylifycss.com/docs/get-started/why-stylify-css#problems-stylify-css-tries-to-solve), [faster coding](https://stylifycss.com/docs/get-started/why-stylify-css#faster-coding) and [extremely optimized output](https://stylifycss.com/docs/get-started/why-stylify-css#output-optimization).

## ✨ Features

- 💎 [Syntax you already know](https://stylifycss.com/#zero-learning-curve). Don't waste time studying CSS framework.
- 💎 Less switching between HTML/CSS files
- 💎 [Automagic and Extremely tunned CSS optimization](https://stylifycss.com/#optimization)
- 💎 [Simple CSS Bundles splitting](https://stylifycss.com/#bundles-splitting) for Layouts/Pages
- 💎 [Easily Configurable and Extensible](https://stylifycss.com/#configuration)
- 💎 [Prepared components](https://stylifycss.com/#components)
- 💎 Define [Variables](https://stylifycss.com/docs/stylify/compiler#variables), [Components](https://stylifycss.com/docs/stylify/compiler#components), [Custom selectors](https://stylifycss.com/docs/stylify/compiler#customselectors)
- 💎 [Add custom macros](https://stylifycss.com/docs/stylify/compiler#macros) like ml:2
- 💎 Variables can be injected into CSS as CSS variables
- 💎 CSS [variables can differ for each screen](https://stylifycss.com/docs/stylify/compiler#variables)
- 💎 Simplify coding with [helpers](https://stylifycss.com/docs/stylify/compiler#helpers) like `color:lighten(#000,10)`
- 💎 Style any device with dynamic [screens](https://stylifycss.com/docs/stylify/compiler#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](https://stylifycss.com/docs/integrations) 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

<img src="https://raw.githubusercontent.com/stylify/packages/master/stylify.gif" height="494" width="1024" alt="Stylify preview">

<p align="center"><a href="https://stylifycss.com"><img src="https://user-images.githubusercontent.com/14016808/132552680-ae877b45-5796-42df-b507-c0f6b9cf4706.png"></a></p>

## 🚀 Integrations
Start using Stylify with your favorite tool in a minute.

### JavaScript
<a href="https://stylifycss.com/docs/integrations/nextjs"><img src="https://stylifycss.com//images/brands/nextjs-light.svg" width="80" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/nuxtjs"><img src="https://stylifycss.com//images/brands/nuxtjs.svg" height="65" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/reactjs"><img src="https://stylifycss.com//images/brands/react.png" height="50" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/vuejs"><img src="https://stylifycss.com//images/brands/vuejs.svg" height="50" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/angular"><img src="https://stylifycss.com//images/brands/angular.svg" height="65" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/astro"><img src="https://stylifycss.com//images/brands/astro-light.svg" height="50" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/remix"><img src="https://stylifycss.com//images/brands/remix.svg" height="65" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/solidjs"><img src="https://stylifycss.com//images/brands/solidjs.svg" height="49" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/qwik"><img src="https://stylifycss.com//images/brands/qwik.svg" height="55" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/svelte"><img src="https://stylifycss.com//images/brands/svelte.svg" height="50" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/vitejs"><img src="https://stylifycss.com//images/brands/vite.svg" height="50" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/webpack"><img src="https://stylifycss.com//images/brands/webpack.svg" height="55" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/rollupjs"><img src="https://stylifycss.com//images/brands/rollupjs.svg" height="45" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/nodejs"><img src="https://stylifycss.com//images/brands/nodejs.svg" height="50" alt=""></a>

### PHP
<a href="https://stylifycss.com/docs/integrations/symfony"><img src="https://stylifycss.com//images/brands/symfony.svg" height="70" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/laravel"><img src="https://stylifycss.com//images/brands/laravel.svg" height="45" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/nette"><img src="https://stylifycss.com//images/brands/nette.png" height="50" alt=""></a>
<a href="https://stylifycss.com/docs/integrations/cakephp"><img src="https://stylifycss.com//images/brands/cakephp.png" height="55" alt=""></a>

## 🔥 Prepared Copy&Paste Headless Components
<a href="https://stylifycss.com/snippets/components"><img src="https://stylifycss.com/images/snippets/components/og-image.jpg"></a>

## Want to know more?
- Live examples and tutorials can be found in [documentation](https://stylifycss.com/docs/stylify).
- Information about each release can be found in [releases](https://github.com/stylify/packages/releases).
- Have an idea? Found a bug? Feel free to create an [issue](https://github.com/stylify/packages/issues).

## Compatibility
| Environment | Version                                                                                                                                                          | Note                                                                                                          |
|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------|
| Browser     | [ES5-compliant browsers](https://caniuse.com/?search=ES5), [Intersection Observer support](https://caniuse.com/?search=intersection%20observer) is required.     | Stylify doesn't need to be included in the browser. All CSS can be pregenerated on server or during a build.  |
| Node        | >= 14                                                                                                                                                            | In case Stylify will be used during an application build or in an SSR application.                            |

## Stay In Touch

- Visit Stylify website [https://stylifycss.com](https://stylifycss.com).
- Follow Stylify on [Twitter](https://twitter.com/stylifycss).
- Join Stylify community on [Discord](https://discord.gg/NuJsk5SMDz).

## License

[MIT](https://opensource.org/licenses/MIT)

Copyright (c) 2021-present, Vladimír Macháček