DEV Community

Cover image for Stylify CSS: Code your Laravel website faster with CSS-like utilities
Vladimír Macháček
Vladimír Macháček

Posted on • Edited on • Originally published at stylifycss.com

Stylify CSS: Code your Laravel website faster with CSS-like utilities

Code your Laravel website faster with Stylify CSS-like utilities. Don't study CSS framework. Focus on coding.

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 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

This article uses Laravel with Vite. For older versions with Webpack, check out this guide.

Install Stylify using CLI:

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin
Enter fullscreen mode Exit fullscreen mode

Add the following configuration into vite.config.js:

import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
    // You can define multiple bundles, This example uses only one for simplicity
    bundles: [{ files: ['resources/views/**/*.blade.php'], outputFile: 'resources/css/stylify.css' }],
    // Optional - https://stylifycss.com/docs/unplugin
    compiler: {
        // https://stylifycss.com/docs/stylify/compiler#variables
        variables: {},
        // https://stylifycss.com/docs/stylify/compiler#macros
        macros: {},
        // https://stylifycss.com/docs/stylify/compiler#components
        components: {},
        // ...
    }
});

export default defineConfig(() => ({
    plugins: [
        stylifyPlugin,
        laravel({
            // Add path to generated files
            input: ['resources/js/app.js', 'resources/css/stylify.css'],
            refresh: true,
        }),
    ],
}));
Enter fullscreen mode Exit fullscreen mode

Add the path to resources/css/stylify.css into the template:

<head>
    @vite('resources/css/stylify.css')
</head>
Enter fullscreen mode Exit fullscreen mode

In case you define more than one bundle in stylifyVite plugin, make sure to import generated CSS files on correct pages.

Usage

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

So if we edit the resources/views/welcome.blade.php:

<div class="text-align:center font-size:48px color:blue">Stylify + Laravel = 🚀</div>
Enter fullscreen mode Exit fullscreen mode

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

<div class="a b c">Stylify + Laravel = 🚀</div>
Enter fullscreen mode Exit fullscreen mode
.a{text-align:center}
.b{font-size:48px}
.c{color:blue}
Enter fullscreen mode Exit fullscreen mode

Integration example

You can also check out our Laravel integration example on Github.

Configuration

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

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

Let me know what you think!

If you like the idea, let me know that by starring Stylify repo ❤️.

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

Top comments (0)