Codifica tu web Remix más rápido con Stylify CSS

Dale estilo a tu aplicación Remix de forma rápida y sencilla con Stylify CSS. Divide CSS para páginas grandes, define Componentes CSS y Variables y obtén CSS extremadamente pequeño.

NoLimit Wehosting for $2/month.
Code WN241PJLO2

Introducción

Stylify es una librería que utiliza selectores tipo CSS para generar CSS optimizado basado en lo que escribes.

• ✅ Selectores similares a CSS
• ✅ Sin framework que estudiar
• ✅ Menos tiempo dedicado a la documentación
• ✅ CSS manoseado y extremadamente pequeño
• ✅ No es necesario purgar CSS
• ✅ Componentes, variables, selectores personalizados
• ✅ Puede generar múltiples paquetes de CSS

También tenemos una página sobre ¡qué problemas resuelve Stylify CSS y por qué deberías probarlo!

Instalación

Debido a que Remix aún no tiene soporte para plugins (2022), necesitamos usar Stylify CSS Bundler directamente. 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
	compiler: {
		mangleSelectors: !isDev,
		// 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 de 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"
}

Estilizando la primera página

Si ahora editamos el app/routes/index.tsx y ejecutamos el comando yarn dev, se generará el CSS:

export default function Index() {
	return (
		<h1 className="font-size:48px font-family:arial color:steelblue">
			Stylify + Remix = 🚀
		</h1>
	);
}

Definición de componentes y variables

También podemos definir Componentes y Variables. Dentro de un archivo, donde se utilizan o en una configuración global. En el código de abajo, usamos la configuración dentro de un fichero, donde se usa el componente.

/*
stylify-variables
	blue: 'steelblue'
/stylify-variables

stylify-components
	title: 'font-size:48px font-family:arial color:$blue'
stylify-components
*/
export default function Index() {
	return (
		<h1 className="title">
			Stylify + Remix = 🚀
		</h1>
	);
}

Salida de CSS y JSX en producción

El JSX y CSS pueden ser manipulados en producción (configurado por el compiler.mangleSelectors). Si es así, la salida es aún más pequeña y se parece a la de abajo.

Para el primer ejemplo con utilidades

export default function Index() {
	return (
		// Para las utilidades del primer ejemplo
		<h1 className="a b c">
			Stylify + Remix = 🚀
		</h1>
	);
}

.a { font-size:48px }
.b { font-family:arial }
.c { color:blue acero }

Stackblitz Playground

Sigue adelante y prueba Stylify CSS + Remix en Stackblitz.

Puede personalizar la construcción de arriba como quieras.