Uso de Stylify CSS en Remix

Remix es un framework web de pila completa que te permite centrarte en la interfaz de usuario y retroceder a través de los estándares web para ofrecer una experiencia de usuario rápida, hábil y resistente.

Stylify se puede integrar en el Remix utilizando Bundler.

Pruébalo en StackBlitz

Cómo integrar el CSS de Stylify en el Remix

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: ['./app/**/*.tsx'], outputFile: './app/styles/stylify.css' },
]);

Cuando el bundler esté configurado, añade la ruta al CSS de Stylify en el app/root.tsx:

import styles from '~/styles/stylify.css';

export function links() {
	return [{ rel: 'stylesheet', href: styles }];
}

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

"scripts": {
	"build": "yarn stylify:build & cross-env NODE_ENV=production remix build",
	"dev": "concurrently 'yarn stylify:dev' 'cross-env NODE_ENV=development remix dev'",
	"stylify:build": "node stylify.js",
	"stylify:dev": "node stylify.js --w"
}

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

Usted puede personalizar la construcción de arriba como quieras.