Using Stylify CSS in Laravel Framework

Laravel is a PHP web application framework with expressive, elegant syntax.

Stylify can be integrated into the Laravel using the Stylify CSS Vite plugin.

Integration example for the Laravel framework can be found in integrations examples repository .

How to integrate the Stylify CSS into the Laravel Framework

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

Open the vite.config.js and add the Stylify CSS Plugin:

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

const stylifyPlugin = stylifyVite({
  bundles: [{ files: ['resources/views/**/*.blade.php'], outputFile: 'resources/css/stylify.css' }],
  // Optional - https://stylifycss.com/docs/unplugin
  compiler: {},
});

export default defineConfig(({ mode }) => ({
    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>

Now when you run dev command in package.json, the CSS will be generated. When you run build, the CSS will also be mangled.

For older vesions of Laravel with Webpack

First, install the @stylify/unplugin package using NPM or Yarn:

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

Next add Stylify CSS plugin into the webpack.mix.js:

const { stylifyWebpack } = require('@stylify/unplugin');

const stylifyPlugin = stylifyWebpack({
    bundles: [{
        outputFile: './resources/css/homepage.css',
        files: ['./resources/views/welcome.blade.php']
    }],
    // Optional
    // Compiler config info https://stylifycss.com/docs/stylify/compiler#configuration
    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: {},
        // ...
    }
});

mix.webpackConfig({
    mode: 'development',
    plugins: [stylifyPlugin]
});

Now you can use the commands for laravel mix.

Production Build and Selectors Mangling

When you run yarn dev/npm run dev (which often runs vite dev) during a development, selector are going to be generated in the same way as they are written in the class attributes.

In production build, that is executed by yarn build/npm run build (which often runs vite build), selectors are minified from long color:blue to short a.

Selectors are rewritten directly within files/templates. This is because Stylify matches selectors only in selected areas (to prevent unwanted characters to be matched) like class, className, :class. However, frameworks compiles these attributes like class="color:blue" to something like add_attribute(button, "class", "color:blue") under the hood.

This can cause, that some original selectors will not be rewritten because they are not matched. Stylify could have matching areas defined for frameworks' compiled output, but this could break with any release. Therefore is safer to rewrite them directly within templates during a production build, where it takes no effect on development environment because this command is mostly executed in build pipeline in Github/Gitlab or during a Vercel/Netlify build and deploy.

How to disable mangling and selectors rewritting

If you want to disable mangling, for example for testing production build locally or even in production build, just add the following into the config:

const stylifyPlugin = stylifyVite({
	// ...
	bundles: [ /* */ ],
	compiler: {
		mangleSelectors: false
	}
});const stylifyPlugin = stylifyVite({
	// ...
	bundles: [ /* */ ],
	compiler: {
		mangleSelectors: false
	}
});

Sometime, the class attribute can be consistent during the build within the bundler (it's random). You may try to disable rewriting selectors within files like this:

const stylifyPlugin = stylifyVite({
	bundles: [
		{
			// ...
			rewriteSelectorsInFiles: false
		}
	]
});const stylifyPlugin = stylifyVite({
	bundles: [
		{
			// ...
			rewriteSelectorsInFiles: false
		}
	]
});

If selectors are rewritten correctly even after this configuration, you can keep it that way. Otherwise, if you still want the rewriting to be disabled, you will have to dig into Stylify Compiler rewriteSelectors method and see what comes as an input into this method and configure a correct selectorsArea, so Stylify can process it correctly.

Selectors mangling in files cannot be disabled in frameworks that are not based on Javascript (PHP, C#, Java), because their templates are not compiled by Vite/Webpack/Rollup/ESbuild.

Where to go next?

🚀 Learn how to get started
🔌 Check out @stylify/unplugin configuration
⚙️ Or configure Stylify right away: