CSS is missed in transform hook

[AlttiRi]

Describe the bug

CSS is missed in transform hook now.

code argument of transform(code, id) hook contains only "export default ''" string. There is no CSS.

It worked before — with Vite 2.5.7.

For example, I was able to generate such style.css

With this plugin: (using), (plugin code)

---

For the reproduction uncomment these lines of the minimal reproduction repo

Reproduction

https://github.com/AlttiRi/serve-json-gz-length-test

System Info

OS: Windows 10 10.0.19043
Node: 17.3.0
Yarn: 1.22.5
npm: 7.19.1
vite: 2.7.2

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[toSayNothing]

I don't know the older version. but right now, if you put the cssBundlePlugin in plugins, will solve the problem:

// vite.config.js
export default defineConfig({
  plugins: [
    vue(),
    sourceMapsPathChangerPlugin([
      // Use "../../" instead of "../" if resources are in "assets/" directory
      ["../node_modules/", "node-modules:///"],
      ["../vite/", "node-modules:///vite/"],
      ["../src/", "source-maps:///"],
      ["../", "source-maps:///"],
    ]),
    cssBundlePlugin({
      overwriteBundle: "style.css",
      importFromModule: true,
    }),
  ],
  server: {
    open: `./`,
  },
...

more info about plugin API: https://vitejs.dev/guide/api-plugin.html
you can use the config hook to separate the dev or build mode.

[AlttiRi]

Not solves.

In this case (when I use it as a plugin of Vite (plugins (not as build.rollupOptions.plugins)) the plugin just works as a transparent proxy, and it returns the code as is in transform hook.

In this case I receive the correct CSS in transform hook, instead of expected "export default '.warning \n{\n color:red\n}'" like it should be when I use the plugin as a Rollup plugin:

"[cssBundlePlugin]: Failed to load CSS as a module. Returns as pure code. Use "importFromModule: false"

However even with:

    cssBundlePlugin({
      bundleToOverwrite: "style.css",
      importFromModule: false // [!]
    }),

It does not work since in generateBundle(opts, bundles, isWrite) hook bundles argument has a missed property with CSS content.
[cssBundlePlugin]: "style.css" bundle is not found. Available bundles: ['index.js', 'vendor.js'].

---

The expected CSS in style.css is:

/* App.vue */
.warning {
  color: red;
}

I have updated the example repo code.

[AlttiRi]

There are two bugs:

1. A plugin used in build.rollupOptions.plugins has no CSS code in code argument of transform(code, id) hook, only "export default ''" string.
2. A plugin used in plugins has no CSS file property in bundles object argument of generateBundle(opts, bundles, isWrite) hook, only {"index.js": {...}, "vendor.js": {...}}, there is no "style.css", "index.html" keys.

The first bug is new.
The second bug is old, it's why I use the plugin as Rollup's one.

[AlttiRi]

The bug appeared with Vite 2.6.0.

With "~2.5.10" it works OK.

[lauritk]

Indeed 2.6.0 seems to mess style processing (causing all sorts of strange style related issues). Had similar issues with Lit + imported SCSS + PostCSS + Tailwind project with vite@2.6.0 and newer when doing production build, but everything worked with dev build. Switching to vite@2.5.10 and @vitejs/plugin-legacy@1.6.4 fixed the issue. Used rollup-plugin-postcss-lit (in vite plugin config) to load processed CSS into Lit elements.

Using rollup-plugin-postcss caused same export default '' error, when used it with/without rollup-plugin-postcss-lit in the rollup plugin config.

I am too interested in what causes this. I have not yet found the breaking change.

[sapphi-red]

Reopening as #8278 and #8471 was reverted. See #8896 and #8874 for details.

[AlttiRi]

With the latest Vite (3.2.4) while this issue is still actual, I can handle CSS:

• a plugin with the transform hook should be used as a Vite's plugin
• build.cssCodeSplit should be false

In this case it works with minor changes:

• ignore the additional CSS from index.html
• the result bundle name is index.css, not style.css

---

I use the plugin to generate such CSS:
https://alttiri.github.io/file-manager-snapshot-explorer/index.css

Because Vite.js still does not support SourceMaps for CSS.
#2830

[yunsii]

Plugin hooks like resolveId, load and others code transform hooks should also apply to css/less/sass?

[YuchenCC]

same issue. I had fixed it by delete enforce key. You may set it post?

[sapphi-red]

Given that

• The content itself can be accessed by plugins with enforce: pre / without enforce
• Reordering the plugin position is not acceptable as it will break the whole ecosystem
• Adding the export default with /* #__PURE__ */ had memory issues and huge file size increase (CSS is included in SSR builds #8859 (comment), Vue build lib doubles css code #8819)

, I'll close this issue as wontfix.
If there's a good way to solve this, feel free to create a PR or a new issue.