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.

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

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') }}

Where to go next?