Uso de Stylify CSS en Angular

Angular es una plataforma para construir aplicaciones web móviles y de escritorio.

Stylify se puede integrar en Angular utilizando Bundler.

Pruébalo en StackBlitz

Cómo integrar el CSS de Stylify en Angular

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

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

También para el modo watch, necesitamos ejecutar dos tareas paralelas. Esto se puede resolver usando concurrently:

yarn add -D concurrently
npm i concurrently

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

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

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

// Esto agrupa todo el CSS en un archivo
// Puede configurar el Bundler para agrupar el CSS de cada página por separado
// Ver el enlace del bundler más abajo
bundler.bundle([
	{
		files: ['./src/**/*.html', './src/**/*.ts'],
		outputFile: './src/styles.css',
	},

	// También puedes dividir CSS para cada componente
	// Puede asignar archivos dentro de los componentes utilizando la opción de comentario de contenido
	// https://stylifycss.com/en/docs/bundler#files-content-option
	// Stylify toma esa opción y busca los archivos definidos. Si el archivo definido
	// también tiene una opción, id comprueba también esos archivos y así sucesivamente.
	// De esta manera mapea todos los archivos y todas las dependencias.
	/*
	{
		files: ['./src/app/app.component.*'],
		outputFile: './src/app/app.component.css',
	},
	*/
]);

Si no utilizas la división y no vas a empaquetar todo en styles.css, no olvides añadir las rutas a los archivos CSS.

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

"scripts": {
	"dev": "concurrently 'yarn stylify.dev' 'ng serve -c development'",
	"prod": "yarn stylify.build & ng serve",
	"stylify.build": "node stylify.js",
	"stylify.dev": "node stylify.js --w"
}

Ahora, cuando ejecutes yarn dev, se generarán los archivos CSS. En producción, los selectores serán manipulados.

Puedes personalizar la construcción de arriba como quieras.

Custom Webpack Build

Si decides usar Custom Builder como @angular-builders/custom-webpack, consulta la Webpack Guide