Mangling Selectors

Selectors mangling es una optimización de siguiente nivel que convierte selectores largos como .color\:blue en uno corto .a. Esto puede disminuir significativamente el tamaño de CSS y HTML. También hace más difícil “robar” tu diseño web copiando y pegando tu código fuente.

Configuration

El proceso de “mangling” para los paquetes @stylify/bundler, @stylify/unplugin, @stylify/astro o @stylify/nuxt, funciona así:

• Mangling está desactivado por defecto y tienes que activarlo estableciendo la opción del compilador mangleSelectors a `true
• Los selectores son siempre manipulados directamente en el código fuente (aquí está el porqué)
• Los selectores no se manipulan cuando cualquiera de estos paquetes se ejecuta en modo vigilancia (vigilando los archivos en busca de cambios).
• Cuando ejecute el comando build en su proyecto (para producción/entorno de desarrollo), Stylify manipulará los selectores.

Debido a que los selectores son manipulados directamente dentro de los archivos fuente, es posible que desee desactivar la manipulación para el entorno local y activarla sólo en el entorno de producción, por lo que no tiene que revertir los cambios causados por Stylify cada vez que ejecute la construcción. Esto se puede resolver fácilmente mediante el uso de una “variable de entorno”:

const config = {
	compiler: {
		// Mangle selectores sólo si la variable de entorno para mangling se establece
		// El nombre de la variable depende de usted
		mangleSelectors: typeof process.env.STYLIFY_MANGLE_SELECTORS !== 'undefined'
	}
}

Esta es una lista de guías para las variables de entorno para los servicios de despliegue de uso frecuente:

• Netlify
• Vercel
• Github Actions
• Gitlab CI
• Digital Ocean
• Google App Engine
• Docker

Compilador

Cuando quieras manipular selectores dentro de tu compilación personalizada usando el compilador directamente, debes configurar la opción del compilador => mangleSelectors: true.

De nuevo, puede utilizar una variable de entorno para activar/desactivar el mangling para el entorno de desarrollo local y producción.

import { Compiler } from '@stylify/stylify';

const content = '';

const compiler = new Compiler({
	mangleSelectors: true
});

const compilationResult = compiler.compile(content);
const mangledContent = compiler.rewriteSelectors(content, compilationResult);
const css = compilationResult.generateCss();

@stylify/bundler

Bundler docs

Bundler utiliza el compilador bajo el capó. Si desea habilitar el mangling, establezca el mangleSelectors dentro de la configuración del compilador a true.

const bundler = new Bundler({
	compiler: {
		// Esto sólo tendrá efecto, cuando bundler no esté viendo ficheros
		mangleSelectors: true
	}
})

@stylify/unplugin

Cuando habilitas mangling dentro del unplugin, los selectores son mangleados directamente dentro del código fuente (de la misma manera que lo hace bundler). Esto es, porque el mangling dentro del contenido proporcionado por el bundler (Vite, Webpack, Rollup, …) en el que se utiliza el plugin, que a menudo es cambiado por otros plugins y frameworks, no es fiable. Los selectores sólo se modificarán cuando el bundler no esté en modo de vigilancia, por lo que tu entorno local no debería verse afectado a menos que ejecutes la compilación directamente en localhost.

@stylify/unplugin docs

const config = {
	compiler: {
		// Esto tendrá efecto sólo cuando el bundler donde se utiliza el plugin,
		// no se está ejecutando en modo watch
		mangleSelectors: true
	}
}

@stylify/astro

@stylify/astro docs

Astro plugin usa la misma configuración que unplugin:

const config = {
	compiler: {
		// Esto tendrá efecto sólo cuando el bundler donde se utiliza el plugin,
		// no se está ejecutando en modo watch
		mangleSelectors: true
	}
}

@stylify/nuxt

@stylify/nuxt docs

Nuxt plugin usa la misma configuración que unplugin:

const config = {
	compiler: {
		// Esto tendrá efecto sólo cuando el bundler donde se utiliza el plugin,
		// no se está ejecutando en modo watch
		mangleSelectors: true
	}
}

@stylify/nuxt-module

@stylify/nuxt-module docs

El módulo Nuxt configura el mangling automáticamente y usa un antiguo plugin de webpack que está preparado específicamente para Nuxt 2. No necesitas configurar nada ahí.

Sin embargo puedes desactivar el mangling configurando mangleSelectors: false :

const config = {
	compiler: {
		// Esto tendrá efecto sólo cuando el bundler donde se utiliza el plugin,
		// no se está ejecutando en modo watch
		mangleSelectors: false
	}
}

Por qué Stylify manipula selectores directamente en el código fuente

• Stylify funciona de una manera, que coincide con los atributos de clase y procesa su contenido => genera CSS
• Cuando trabajas con algún framework como Astro, Vue, Nuxt, Next, React, suelen usar Vite, Webpack o Rollup para compilar su código fuente
• Durante la compilación, el código fuente a menudo se transforma de class="color:blue" a algo como createEl(el, null, {class: 'color:blue'}) o incluso peor c(el, 'color:blue').
• Estos cambios hacen que Stylify no pueda emparejar las clases correctamente y algunas de estas áreas no son procesadas => no se genera CSS o los selectores no son manipulados.
• La única forma de solucionar esto sería poner el plugin de Stylify antes que el resto de plugins para recibir la entrada sin procesar, pero debido a que algunos plugins parecen estar fijados al principio, esto no funciona en todos los casos
• Debido a las razones mencionadas anteriormente, este proceso no es fiable, es difícil de depurar y el soporte para ello fue eliminado en 0.6.