Using Stylify CSS in Symfony Framework

Symfony is a set of reusable PHP components and a PHP framework to build web applications, APIs, microservices and web services.

How to integrate the Stylify CSS into the Symfony Framework

The example below uses symfony/skeleton and ads a few composer packages according to the getting started tutorial: twig, annotations, @symfony/webpack-encore.

First, install the @stylify/unplugin package using CLI:

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

Now add the following configuration into the webpack.config.js:

const Encore = require('@symfony/webpack-encore');
const { stylifyWebpack } = require('@stylify/unplugin');

const cssPath = './assets/styles/index.css';

const stylifyPlugin = stylifyWebpack({
	bundles: [{ outputFile: cssPath, files: [ './templates/**/*.html.twig' ] }],
	// Optional
	// Compiler config info https://stylifycss.com/en/docs/stylify/compiler#configuration
	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: {},
		// ...
	}
});

Encore
	// Use the Stylify CSS plugin
	.addPlugin(stylifyPlugin)
	.addStyleEntry('index', cssPath);

Now you can use the generated bundle in the symfony app:

{{ encore_entry_link_tags('index.css') }}