Why does postcss plugin "css-has-pseudo" perform differently in the development and production mode of Vue?

[Annie972297]

Hi, I'm using postcss plugin css-has-pseudo in my Vue+Vite project. This plugin makes a polyfill to :has() in browsers which don't support it, such as Fireforx 110.0.
The plugin works when I run in the development mode. But after build, it doesn't work.
Please check my repo: https://github.com/Annie972297/css-has-test
It seems that this plugin can't process async stylesheets after build. I can't figure out why it works when running in dev mode. What's the difference between the development and production mode of Vue?

[Annie972297]

In the production mode, the async sheets aren't received by MutationObserver. They are imported by <link href="...css">. The mutationObserver I created notices the node, but can't get its sheet (node.sheet is null). While in the development mode, the sheets are imported by <style>...</style> (internal stylesheet). The mutationObserver can get its sheet.

The mutationObserver in browser console I created:
var mutationObserver1 = new MutationObserver((mutationsList) => { mutationsList.forEach(mutation => { [].forEach.call(mutation.addedNodes || [], node => { console.log('node:', node, node.nodeType, node.sheet); // walk stylesheets to collect observed css rules if (node.nodeType === 1 && node.sheet) { console.log('nodeBingo:', node); console.log('node.sheet:', node.sheet); } }); }); }); mutationObserver1.observe(document, { childList: true, subtree: true, attributes: true });

How to get async stylesheets in Vue?