About "rule.source.input.file“

[CheaterScript]

Hi, I have used tailwindcss and postcss-px-to-viewport-8-with-include in a Vue3 project. Below is my configuration：

module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
		"postcss-px-to-viewport-8-with-include": {
			unitToConvert: "px",
			viewportWidth: 1080,
			unitPrecision: 5,
			propList: ["*"],
			viewportUnit: "vh",
			fontViewportUnit: "vh",
			selectorBlackList: [],
			minPixelValue: 1,
			mediaQuery: false,
			replace: true,
			include: /\/src\/views\//
		}
	}
};

postcss-px-to-viewport provides an 'include' configuration to filter the files that need to be processed. Below is its implementation code：

      css.walkRules((rule: RuleType) => {
        // Add exclude option to ignore some files like 'node_modules'
        const file = rule.source?.input.file || '';

        if (opts.include && file) {
          if (opts.include instanceof RegExp) {
            if (!opts.include.test(file)) return;
          } else if (opts.include instanceof Array) {
            let flag = false;
            for (var i = 0; i < opts.include.length; i++) {
              if (opts.include[i].test(file)) {
                flag = true;
                break;
              }
            }
            if (!flag) return;
          }
        }

The issue lies with 'rule.source.input.file'. I have a Vue page component with the path "E:/.../src/views/home/index.vue". When I place the postcss-px-to-viewport configuration as the last item in the Postcss plugins, after tailwindcss and autoprefixer, I observe that 'rule.source.input.file' is not "E:/.../src/views/home/index.vue" but instead the merged version of .../index.html. However, when I place postcss-px-to-viewport at the beginning of the plugins configuration, the path is correct. This discrepancy prevents the postcss-px-to-viewport 'include' configuration from having the intended effect. How can I fix this issue?

[ai]

Sorry, I don’t know. It depends on why Tailwind change the file.