Uso de Stylify CSS en Nette Framework

Nette es un framework web PHP hecho en la República Checa centrado en el desarrollo web rápido y ágil.

Nette Framework no utiliza ningún bundler por defecto. Por lo tanto puedes usar el Bundler de Stylify directamente o usar Stylify a través de Webpack, Rollup.js, Vite, etc.

Cómo integrar el CSS de Stylify en el framework de Nette.

En el siguiente ejemplo utilizaremos el paquete Bundler por sí solo.

Primero, instala el paquete @stylify/bundler usando NPM o Yarn:

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

A continuación, crea un archivo, por ejemplo, bundles.js:

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

const bundler = new Bundler({
	watchFiles: process.argv[process.argv.length - 1] === '--w',
	// Opcional
	// Información de configuración del compilador 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'
}]);

Y el último paso es añadir los scripts en el package.json:

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

Ahora puedes añadir un enlace para el CSS generado en el @layout.latte:

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

Puedes personalizar la construcción de arriba como quieras.

Desventajas

Si utiliza un selector personalizado en el atributo de clase de Nette como el que se muestra a continuación, probablemente tendrá que envolverlo en n:class="''". Esto se debe a que Nette hace coincidir los selectores personalizados como macro. Las comillas simples lo evitan.

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