CSS does not generate in iife build

[imohuan]

Mode Dev: The normal display

Mode Prod: The CSS cannot be obtained

main.ts

import css from "uno.css";
console.log("css", css);

vite.config.ts

export default {
  // ...
  plugins: [
    vue(),
    Unocss({
      mode: "global",
      presets: [
        presetUno(),
        presetWind(),
        presetAttributify() as any,
        presetMini(),
        presetScrollbar(),
        presetScalpel({})
      ],
      transformers: [transformerDirectives()],

    });
  ]
}

[antfu]

Emm why do you want the css string in runtime?

[imohuan]

This is for demonstration purposes, not for anything else

[imohuan]

If you look at unoCSS compiled CSS, you will find that there is no valid CSS in the packaged compilation

[antfu]

We are deploying https://uno.antfu.me/ with the latest UnoCSS and we never faced such regression. Please provide a minimal reproduction, thanks.

[imohuan]

According to my test: Find the problem, but not sure how to fix it
vite.config.ts

export default defineConfig({
  base: "./",
  plugins: [vue(), Unocss()],
  build: {
    rollupOptions: {
      // ！The problem was changing format to Iife
      output: { format: "iife", inlineDynamicImports: true }, 
    },
  },
});

mini-vue.zip

[nieyuyao]

I also have this problem when set output format to umd.

export default defineConfig({
  base: "./",
  plugins: [vue(), Unocss()],
  build: {
    rollupOptions: {
      output: { format: 'umd' }
    },
  },
});

[nieyuyao]

CSS is bundled into js when format are iife, amd or umd. So the css file cannot be generated.

unocss/packages/vite/src/modes/global/build.ts

Lines 148 to 154 in 1000830

	async generateBundle(options, bundle) {
	const files = Object.keys(bundle)
	const cssFiles = files
	.filter(i => i.endsWith('.css'))
	if (!cssFiles.length)
	return

Should we try to check for js when css doesn't exist at generateBundle ? 🤔