Add 'file' param support on config files [ module.exports = (ctx: { cwd, env, *file }) => ${config} ]

[VincentDream]

Clear and concise description of the problem

postcss.config.js 配置中无法获取到file，导致无法去区分不同尺寸的UI来做转换（例如vant的设计图尺寸为375，而其他为750）

Suggested solution

postcss.config.js中增加file参数

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[Niputi]

related: #3336

[calebbergman]

I agree that it would be advantageous to have access to the current file path being processed by PostCSS.

My specific use case at the present is a 3rd party toast notification library that, by default (and non-configurable), attaches its toast messages directly to body. My PostCSS config includes the postcss-scopify plugin. Since I'm unable to configure PostCSS to ignore this particular stylesheet, all of its styles get scoped to my app, and since the toasting library attaches its toasts to body, its styles aren't applied appropriately.

However, if the file were included on the PostCSS ctx argument, it'd be possible to say...

// postcss.config.js

module.exports = (ctx) => {
  return {
    plugins: {
      'postcss-scopify': !ctx.file.match(/ignoreme/) ? '#my-custom-scope' : false
    }
  }
}

[BIMiracle]

Is there a solution?

[yyj4088]

这样写有效果

const px2viewport = require('postcss-px-to-viewport');

module.exports = {
	plugins: [
		px2viewport({
			unitToConvert: 'px',
			viewportWidth: 375,
			unitPrecision: 3,
			viewportUnit: 'vw',
                        exclude:/^(?!.*node_modules\/vant)/
		}),
		px2viewport({
                        unitToConvert: 'px',
			viewportWidth: 750,
			unitPrecision: 3,
			viewportUnit: 'vw',
                        exclude:/node_modules\/vant/i,
		}),
	],
};

[windyzoe]

看了看,vite用了postcss config的cache,如果启动了path,得移除这个cache

[hxdyj]

这样写有效果

const px2viewport = require('postcss-px-to-viewport');

module.exports = {
	plugins: [
		px2viewport({
			unitToConvert: 'px',
			viewportWidth: 375,
			unitPrecision: 3,
			viewportUnit: 'vw',
                        exclude:/^(?!.*node_modules\/vant)/
		}),
		px2viewport({
                        unitToConvert: 'px',
			viewportWidth: 750,
			unitPrecision: 3,
			viewportUnit: 'vw',
                        exclude:/node_modules\/vant/i,
		}),
	],
};

真是一个机灵鬼

[bluwy]

IIUC, adding a file param like in webpack, means that for every css file we have to re-load the postcss config for each of them? This sounds like a big perf bottleneck to me unless I'm missing something. If so I'm not sure if Vite should support this given there's a workaround.

[cnjm]

这样写有效果

const px2viewport = require('postcss-px-to-viewport');

module.exports = {
	plugins: [
		px2viewport({
			unitToConvert: 'px',
			viewportWidth: 375,
			unitPrecision: 3,
			viewportUnit: 'vw',
                        exclude:/^(?!.*node_modules\/vant)/
		}),
		px2viewport({
                        unitToConvert: 'px',
			viewportWidth: 750,
			unitPrecision: 3,
			viewportUnit: 'vw',
                        exclude:/node_modules\/vant/i,
		}),
	],
};

这样似乎会使插件执行两次

[bluwy]

Just checked postcss-loader and it seems that webpack is using its own config loader instead of postcss-load-config, since there currently isn't a way to achieve this API with postcss-load-config. Given that I'm not sure if it's worth deviating from the standard, or maybe that's fine.

[patak-dev]

Given that there is a workaround and these look like an edge case for Vite users in general, I agree with @bluwy. Let's close for now and if someone has a good use case to justify adding the complexity to core that can't be implemented otherwise please create a new issue linked to this one.