December 3, 2022

Code your Astro.build website faster with Stylify CSS

Code your Astro.build website faster with Stylify CSS. Use CSS-like utilities. Don't study CSS framework.



Style your Astro.build website quickly and easily with Stylify CSS CSS-like utilities.

Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.
  • ✅ CSS-like selectors
  • ✅ No framework to study
  • ✅ Less time spent in docs
  • ✅ Mangled & Extremely small CSS
  • ✅ No CSS purge needed
  • ✅ Components, Variables, Custom selectors
  • ✅ It can generate multiple CSS bundles

Also we have a page about what problems Stylify CSS solves and why you should give it a try!

Installation

Install Stylify using CLI:

yarn add @stylify/astro

Add a buildModule into the astro.config.mjs:

import { defineConfig } from 'astro/config';
import stylify from '@stylify/astro';

export default defineConfig({
    integrations: [stylify()]
});

Usage

Stylify syntax is similar to CSS. You just write _ instead of a space and ^ instead of a quote.

So if we edit the src/pages/index.astro:

<h1 class="font-size:24px margin:12px_24px">
    Hello World!
</h1>

In production, you will get optimized CSS and mangled HTML:

<h1 class="a b">Hello World!</h1>
.a{font-size: 24px}
.b{margin: 12px 24px}

Stackblitz Playground

Go ahead and try Stylify CSS + Astro.build on Stackblitz.

Configuration

The examples above don't include everything Stylify can do:

Feel free to check out the docs to learn more 💎.

Give as Feedback!
Do you like Stylify CSS? Let us know by starring our repo