🚀 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
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
paramargin-left
.
Siéntete libre de revisar la documentación para aprender más 💎.