纠缠选择器

选择器处理是一个更高层次的优化，它将长的选择器如.color\:blue转换为短的.a。 这可以大大减少CSS和HTML的大小。这也使得通过复制粘贴你的源代码来 “偷 “你的网页设计变得更加困难。

Configuration

包 @stylify/bundler, @stylify/unplugin, @stylify/astro 或 @stylify/nuxt 的混搭过程是这样进行的：

• 默认情况下Mangling是关闭的，你必须通过设置编译器选项mangleSelectors为true来启用它。
• 选择器总是在源代码中直接被处理（这就是原因)
• 当任何一个软件包在观察模式下运行时（观察文件的变化），选择器不会被处理。
• 当你在你的项目中运行构建命令时（用于生产/开发环境），Stylify会对选择器进行处理。

由于选择器是直接在源文件中被修改的，你可能想在本地环境中禁止修改，只在暂存和生产环境中启用，这样你就不必在每次运行构建时都要恢复Stylify造成的修改。 这可以通过使用一个 “环境变量 “轻松解决：

const config = {
	compiler: {
		// 只有在设置了用于纠缠的环境变量的情况下才会纠缠选择器
		// 该变量的名称由你决定
		mangleSelectors: typeof process.env.STYLIFY_MANGLE_SELECTORS !== 'undefined'
	}
}

这里有一个经常使用的部署服务的环境变量指南清单：

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

编译器

当你想通过直接使用编译器在你的自定义编译中混合选择器时，你必须设置编译器选项 => mangleSelectors: true。

同样，你可以使用一个环境变量来启用/禁用本地开发环境和生产环境中的mangling。

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

捆绑器在引擎盖下使用编译器。如果你想启用mangling，将编译器配置中的mangleSelectors设置为true。

const bundler = new Bundler({
	compiler: {
		// 只有在捆绑器不观察文件时，这才会生效。
		mangleSelectors: true
	}
})

@stylify/unplugin

@stylify/unplugin docs

Unplugin将配置传入引擎盖下的Bundler。

const config = {
	compiler: {
		// 这只有在使用该插件的捆绑器时才会生效、
		// 没有在观察模式下运行
		mangleSelectors: true
	}
}

@stylify/astro

@stylify/astro docs

Astro将配置传递给引擎盖下的Unplugin：

const config = {
	compiler: {
		mangleSelectors: true
	}
}

@stylify/nuxt

@stylify/nuxt docs

Nuxt插件将配置传递给引擎盖下的Unplugin：

const config = {
	compiler: {
		mangleSelectors: true
	}
}

@stylify/nuxt-module

@stylify/nuxt-module docs

Nuxt模块自动设置了mangling，并使用了一个专门为Nuxt 2准备的旧的webpack插件。 你不需要在那里配置任何东西。

但是你可以通过设置mangleSelectors: false来禁用混用：

const config = {
	compiler: {
		mangleSelectors: false
	}
}

为什么Stylify会在源代码中直接混入选择器？

• Stylify的工作方式是，它匹配类的属性并处理它的内容=>生成css
• 当你使用一些框架时，比如Astro、Vue、Nuxt、Next、React，他们经常使用Vite、Webpack或Rollup来编译他们的源代码。
• 在编译过程中，源代码经常从class="color:blue"变成createEl(el, null, {class: 'color:blue'})或更糟糕的c(el, 'color:blue')。
• 这些变化导致Stylify不能正确地匹配类，其中一些区域没有被处理=>没有生成CSS或选择器没有被处理。
• 解决这个问题的唯一方法是将Stylify插件放在所有其他插件之前，以接收原始输入，但由于一些插件似乎在开始时就被固定了，这并不是在所有情况下都能成功。
• 由于上述原因，这个过程并不可靠，很难调试，而且在0.6中取消了对它的支持。