December 8, 2022

Code your Laravel website faster with Stylify CSS

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

50% discount on .EU, .ONLINE, .STORE, .TECH, .SITE, .WEBSITE, .SPACE, .FUN domains.
Code DM241ERDTF

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

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

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/en/docs/unplugin
	compiler: {
		// https://stylifycss.com/en/docs/stylify/compiler#variables
		variables: {},
		// https://stylifycss.com/en/docs/stylify/compiler#macros
		macros: {},
		// https://stylifycss.com/en/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,
		}),
	],
}));

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

<head>
	@vite('resources/css/stylify.css')
</head>

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>

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

<div class="a b c">Stylify + Laravel = 🚀</div>

.a{text-align:center}
.b{font-size:48px}
.c{color:blue}

Integration example

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

Configuration

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

Define components
Add custom selectors
Configure your macros like ml:20px for margin-left
Define custom screens
You can map nested files in the template
And a lot more

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

Code your Laravel website faster with Stylify CSS

Introduction

Installation

Usage

Integration example

Configuration

Other Articles

Faster React apps coding: How to migrate from Emotion CSS-in-JS to Stylify Utility-First CSS.

How to Effortlessly Migrate from Styled Components CSS-in-JS to Stylify Utility-First CSS for Better React Development.

Best practices for utility-first CSS