Uso de Stylify CSS en Next.js

Next.js te ofrece crear aplicaciones React de nivel de producción que escalan.

Stylify se puede integrar fácilmente en Next.js utilizando @stylify/unplugin.

Pruébalo en StackBlitz

Cómo integrar el CSS de Stylify en el Next.js

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

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

A continuación añade una configuración en el next.config.js:

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

const stylifyPlugin = (dev) => stylifyWebpack({
	dev: dev,
	bundles: [{ outputFile: './styles/stylify.css', files: ['./pages/**/*.js'] }],
	// 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: {},
		// ...
	}
});

module.exports = {
	reactStrictMode: true,
	webpack: (config, { dev }) => {
		config.plugins.push(stylifyPlugin(dev));
		return config;
	}
}

Y el último paso es añadir el stylify.css en el _app.js:

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

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

export default MyApp;

Ahora puedes usar los comandos de Next.js para construir tus assets. En producción, manipulará los selectores.