Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css] Removing empty css causes invalid code to be generated #14515

Closed
7 tasks done
susnux opened this issue Oct 2, 2023 · 1 comment · Fixed by #14517
Closed
7 tasks done

[css] Removing empty css causes invalid code to be generated #14515

susnux opened this issue Oct 2, 2023 · 1 comment · Fixed by #14517

Comments

@susnux
Copy link
Contributor

susnux commented Oct 2, 2023

Describe the bug

I have some code that imports code that uses dependencies that can not be treeshaken or have side effects, the code is written in Vue, meaning there are styles injected.

I then try to create a cjs output (library mode), the "generate bundle" part of the css plugin removes the empty css import.
But it replaces too much of the code.

To make it clearer, the code that vite produces and passes to the css plugin:

/* ... */;require("vue"),require("foo"),require("../chunks/MentionBubble.vue_vue_type_style_index_0_scoped_357e6d0e_lang-072bbb05.cjs");const o=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");/* ... */

Code after the css plugin removes the import:

/* ... */;require("vue"),require("foo"),/* empty css                                                                                    */const o=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");/* ... */

As you can see it also removes the ; which results in invalid code, as no it looks like this:

require('foo'),const o = require('...')

which is invalid (the ; before the const was required but is removed).

Reproduction

https://github.com/nextcloud-libraries/nextcloud-vue/tree/2a73983387987702f48814de0243fec0a7a3eeb2

Steps to reproduce

  1. npm ci
  2. npm run build
  3. see dist/Components/NcHeaderMenu.cjs

System Info

System:
    OS: Linux 6.5 openSUSE Tumbleweed 20230926
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 3.55 GB / 14.97 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.7.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.1.0 - /usr/bin/npm
  Browsers:
    Chromium: 117.0.5938.92
  npmPackages:
    vite: ^4.3.9 => 4.4.9

Used Package Manager

npm

Logs

No response

Validations

@susnux
Copy link
Contributor Author

susnux commented Oct 2, 2023

BTW the comma separated requires come from esbuild minifing the code.

Meaning I see two possible ways of fixing this:

  1. Run the css plugin before the minify step.
  2. Also remove a leading comma if available. (this seems to be error prone, so 1 is probably easier).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant