Using Stylify CSS in Nette Framework

Nette is a PHP web framework made in the Czech Republic focused on fast and rapid web development.

Nette Framework doesn’t use any bundler by default. Therefore you can use the Stylify Bundler directly or use Stylify through Webpack, Rollup.js, Vite, etc.

How to integrate the Stylify CSS into the Nette Framework

In the example below we will use the Bundler package on its own.

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

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

Next, create a file, for example, bundles.js:

const { Bundler } = require('@stylify/bundler');

const bundler = new Bundler({
	watchFiles: process.argv[process.argv.length - 1] === '--w',
	// 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: {},
		// ...
	}
});

bundler.bundle([{
	files: ['./app/Presenters/templates/**/*.latte'], outputFile: './www/static/css/index.css'
}]);

And the last step is to add scripts into the package.json:

"scripts": {
	"build": "node bundles.js",
	"watch": "node bundles.js --w"
}

Now you can add a link for generated CSS into the @layout.latte:

<link rel="stylesheet" href="/static/css/index.css">

You can customize the build above however you want.

Trade Offs

If you use a custom selector in the Nette class attribute like the one below, you will probably need to wrap it into the n:class="''". It is because Nette matches the custom selectors as Macro. Single quotes prevent that.

<div n:class="'[div]{width:240px}'"></div>
<div n:class="'md:{width:320px}'"></div>