Production: CSS dependencies in dynamic imports not loaded

[craigrileyuk]

Not sure if I'm missing something obvious here, but I'm using your package for a larger Vue3 project that has dynamic imports.

So $item = $manifest->data->{$entry} in load_production_asset() might have an array of dynamicImports.

These dynamic imports, in turn, have manifest entries that list CSS dependencies of their own.

I thought that Vite would have code to automatically load and inject this CSS into the page when the dynamic import is requested. It actually does so in development mode, but in production builds, those CSS files fail to load.

As a workaround, I'm currently using the vite_for_wp__production_assets WP filter to recursively scan and queue any potential dynamic CSS dependencies but I'm sure it must be a Vite build option that is set incorrectly that's causing the problem.

[davideprevosto]

I noticed the same behaviour. I was unable to enqueue the css file.

This is my vite.config.js:

import create_config from '@kucrut/vite-for-wp';

export default create_config(
    {
        app: 'assets/js/discount-codes.ts',
        css: 'assets/css/discount-codes.css',
    },
    './dist',
    {
        css: {
            postcss: {
                plugins: [require('postcss-nested')()],
            }
        }
    }
);

I suppose to solved importing the css file into my TypeScript file.

# discount-code.ts

import '../css/discount-codes.css'

Don't know if it can be useful for you @craigrileyuk

[kucrut]

@craigrileyuk,

Can you help me debug this by providing your production manifest file? Feel free to replace the file names if you need to.

It would also help me a lot if you could paste here your filter callback's code.

[kucrut]

I suspect this should be fixed by #86. If version 0.9.0 doesn't fix this issue, please feel free to reopen.