feat: unocss 支持 postcss #1851

XiaoXice · 2025-02-17T08:37:15Z

pagnkelly · 2025-02-17T09:40:57Z

用unocss preset貌似可以解决你的问题参考 https://github.com/unocss/unocss/blob/main/packages-presets/preset-rem-to-px/src/index.ts

XiaoXice · 2025-02-18T08:44:49Z

这个功能确实是可以通过 unocss preset 实现，但是 postcss 还可以添加其他的插件，例如 autoprefixer
unocss 配合 vite 框架是可以正常使用postcss处理uno生成的css的。
我的实现方式可能不太优雅，希望mpx可以支持这个功能。

hiyuki · 2025-02-19T10:52:20Z

packages/unocss-plugin/lib/web-plugin/index.js

@@ -110,14 +138,27 @@ function WebpackPlugin (configOrPath, defaults) {
            if (file === '*') { return }
            let code = compilation.assets[file].source().toString()
            let replaced = false
-            code = code.replace(LAYER_PLACEHOLDER_RE, (_, quote, layer) => {
+            for(const [source, quote, layer] of code.matchAll(LAYER_PLACEHOLDER_RE)) {


这里直接生成完code之后整体再进行一次postcss就可以

在 Web 生成的时候，code 里的代码不是CSS而是JS，所以不能进行整体处理。

hiyuki · 2025-02-19T10:53:00Z

packages/unocss-plugin/lib/web-plugin/index.js

@@ -89,8 +92,33 @@ function WebpackPlugin (configOrPath, defaults) {
        }
      })

-      compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+      compiler.hooks.thisCompilation.tap({ name: PLUGIN_NAME, stage: 1000 }, (compilation) => {


为啥需要改钩子注册逻辑

因为下面需要从 compilation 中读取 __mpx__，需要等待下面这个钩子执行完毕。

mpx/packages/webpack-plugin/lib/index.js

Lines 646 to 653 in b822464

compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {

compilation.warnings.push(...warnings)

compilation.errors.push(...errors)

const moduleGraph = compilation.moduleGraph

if (!compilation.__mpx__) {

// init mpx

mpx = compilation.__mpx__ = {

hiyuki · 2025-02-19T10:54:58Z

packages/unocss-plugin/lib/web-plugin/index.js

+          defs: mpx.defs,
+          inlineConfigFile: node_path.join(mpx.projectRoot, 'vue.config.js')
+        })
+        const configBox = loadPostcssConfig({


如果是需要对unocss产物进行包含框架内置插件的postcss处理，建议在style-compiler中抽一个接收参数进行postcss处理的公共方法，对应逻辑统一维护在一个地方

输出小程序和输出RN中也需要拉齐执行postcss

看了一下你可能提到的是下面这段代码里的 transSpecial 和 scopeId，我认为不应该添加这两个插件，甚至 pluginCondStrip 都不需要。
我认为 unocss 貌似不太适用这些插件的场景，unocss产出的代码不需要scope和host，也不会有mpx相关的标志。
可能是我的理解还不到位，如果有理解错误还请指教。

mpx/packages/webpack-plugin/lib/style-compiler/index.js

Lines 49 to 63 in b822464

// ali平台下处理scoped和host选择器

if (mode === 'ali' || mode === 'web') {

if (queryObj.scoped || mpxStyleOptions.scoped) {

plugins.push(scopeId({ id }))

}

plugins.push(transSpecial({ id }))

}

if (isReact(mode)) {

plugins.push(transSpecial({ id }))

}

plugins.push(pluginCondStrip({

defs

}))

对于unocss的产物来说可能确实不需要一些内置postcss功能
对于用户自定义的postcss配置，在输出小程序时拉齐进行postcss处理吧，对于输出rn，本身该能力还在review状态，可以先不用关注，我们后续进行添加

我在最新的代码中完全移除了相关的plugin，请关注。

hiyuki · 2025-02-24T07:35:19Z

packages/unocss-plugin/lib/web-plugin/index.js

        compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => {
+          const [plugins, options] = await Promise.all([finalPluginsBox, configBox.then(config => Object.assign(


可以把loadPostcssConfig的逻辑都统一放在这里，直接await loadPostcssConfig获取{options, plugins, prePlugins}清晰一些

经过测试，读取配置并不会消耗太多时间，全构建耗时不超过100ms，我觉得你说的有道理。

hiyuki reviewed Feb 19, 2025

View reviewed changes

hiyuki reviewed Feb 24, 2025

View reviewed changes

feat: unocss 支持 postcss

1362cab

XiaoXice force-pushed the unocss-postcss branch from e9e4ea1 to 1362cab Compare February 26, 2025 02:44

XiaoXice requested a review from hiyuki February 27, 2025 07:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: unocss 支持 postcss #1851

feat: unocss 支持 postcss #1851

XiaoXice commented Feb 17, 2025 •

edited

Loading

pagnkelly commented Feb 17, 2025

XiaoXice commented Feb 18, 2025

hiyuki Feb 19, 2025

XiaoXice Feb 20, 2025

hiyuki Feb 24, 2025

hiyuki Feb 19, 2025

XiaoXice Feb 20, 2025

hiyuki Feb 24, 2025

hiyuki Feb 19, 2025

hiyuki Feb 19, 2025

XiaoXice Feb 20, 2025

hiyuki Feb 24, 2025

XiaoXice Feb 26, 2025

hiyuki Feb 24, 2025

XiaoXice Feb 26, 2025

	compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
	compilation.warnings.push(...warnings)
	compilation.errors.push(...errors)
	const moduleGraph = compilation.moduleGraph

	if (!compilation.__mpx__) {
	// init mpx
	mpx = compilation.__mpx__ = {

	// ali平台下处理scoped和host选择器
	if (mode === 'ali' \|\| mode === 'web') {
	if (queryObj.scoped \|\| mpxStyleOptions.scoped) {
	plugins.push(scopeId({ id }))
	}
	plugins.push(transSpecial({ id }))
	}

	if (isReact(mode)) {
	plugins.push(transSpecial({ id }))
	}

	plugins.push(pluginCondStrip({
	defs
	}))

		compilation.hooks.optimizeAssets.tapPromise(PLUGIN_NAME, async () => {
		const [plugins, options] = await Promise.all([finalPluginsBox, configBox.then(config => Object.assign(

feat: unocss 支持 postcss #1851

Are you sure you want to change the base?

feat: unocss 支持 postcss #1851

Conversation

XiaoXice commented Feb 17, 2025 • edited Loading

pagnkelly commented Feb 17, 2025

XiaoXice commented Feb 18, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

XiaoXice commented Feb 17, 2025 •

edited

Loading