🚀 Dale estilo a tu web Next.js más rápido con Stylify CSS

Codifica tu web Next.js más rápido con las utilidades tipo CSS de Stylify. No estudies CSS-in-JS o CSS framework. Céntrate en codificar. Deja que Stylify CSS haga el resto

NoLimit Wehosting for $2/month.
Code WN241PJLO2

Para un comienzo más fácil, puedes consultar el Stylify Stackblitz playground 🎮.

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!

Configuración de Next.js

La forma más fácil de configurar Next.js es usando CLI:

• Ejecuta yarn create next-app
• Selecciona el nombre de tu proyecto

De esta forma obtendrás el esqueleto de la aplicación Next.js por defecto.

Integración CSS de Stylify

Instala el paquete @stylify/unplugin usando NPM o Yarn:

yarn add @stylify/unplugin
npm i @stylify/unplugin

Abre el archivo next.config.js y copia el siguiente contenido en él:

const { stylifyWebpack } = require('@stylify/unplugin');

const stylifyPlugin = (dev) => stylifyWebpack({
	dev: dev,
	bundles: [{
		// Generar CSS a partir de todos los archivos js
		files: ['./pages/**/*.js'],
		outputFile: './styles/stylify.css',
	}]
});

module.exports = {
	reactStrictMode: true,
	webpack: (config, { dev }) => {
		// Añadir el plugin CSS Webpack de Stylify
		config.plugins.push(stylifyPlugin(dev));
		return config;
	}
}

El último paso, abrir el pages/_app.js y añadir la ruta a stylify.css:

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

function MyApp({ Component, pageProps }) {
	return <Component {...pageProps} />
}

export default MyApp;

Estilizando la web

Si copias el siguiente código en pages/index.js y ejecutas yarn dev obtendrás un texto con estilo Hello World!:

export default function Home() {
	return <div className="color:blue">¡Hola Mundo!</div>;
}

Stylify observa cualquier cambio en los archivos js y genera CSS en styles/stylify.css. Si añades un selector como font-size:24px el CSS se actualizará automáticamente 🎉.

Anímate y prueba Stylify CSS directamente en Stackblitz.com 💡.

Componentes

Las plantillas hinchadas con selectores de utilidad son difíciles de leer. Stylify permite definir componentes directamente en los archivos, donde se utilizan a través de opciones de contenido (espera objeto javascript sin corchetes) o en el compilador config.

/*
stylify-components
	container: 'max-width:800px margin:0_auto'
/stylify-components
*/
export default function Home() {
	return (
		<div className="container">
			<div className="color:blue">¡Hola Mundo!</div>
		</div>
	)
}

Variables

Es una buena práctica evitar valores hardcodeados en los selectores. Variables pueden ser definidas de la misma manera que los componentes:

/*
stylify-variables
	blue: 'steelblue',
	containerWidth: '800px'
/stylify-variables

stylify-components
	container: 'max-width:$containerWidth margin:0_auto'
/stylify-components
*/
export default function Home() {
	return (
		<div className="container">
			<div className="color:$blue">¡Hola Mundo!</div>
		</div>
	)
}

La compilación de producción

Cuando ejecutamos la compilación de producción usando yarn build + yarn start, el marcado JSX se convertirá en esto:

export default function Home() {
	return (
		<div className="a">
			<div className="b">¡Hola Mundo!</div>
		</div>
	)
}

El CSS también se acorta:

:root {
	--blue: #4682b4;
	--containerWidth: 800px
}
.b {color: #4682b4}
.a,.c { max-width: 800px }
.a,.d { margin: 0 auto }

Configura todo lo que necesites

Los ejemplos anteriores no incluyen todo lo que Stylify CSS puede hacer:

• Puedes mapear archivos anidados en la plantilla
• Estilizar selectores personalizados
• Definir pantallas personalizadas
• Añade tus macros como ml:20px para margin-left.

Siéntete libre de revisar la documentación para aprender más 💎.