marco-prontera / vite-plugin-css-injected-by-js

A Vite plugin that takes the CSS and adds it to the page through the JS. For those who want a single JS file.
MIT License
429 stars 26 forks source link

Conflict with specific JS filename format #103

Closed eliottvincent closed 1 year ago

eliottvincent commented 1 year ago

Hey!

First, thanks for this plugin, it's really useful. It's a shame that Vite / Rollup doesn't have an option to disable CSS extraction, yet. I'm following this PR that could potentially be a solution: https://github.com/vitejs/vite/pull/13565

Anyway. In my current Vite build config, I use the chunkFileNames that way:

    build: {
      outDir: "build",
      assetsDir: "",
      sourcemap: false,

      rollupOptions: {
        output: {
          chunkFileNames(chunkInfo) {
            return `js/${chunkInfo.name}.js?${bang}`;
          }
        }
      }
    }

This allows us to have JS files with a cache buster in the file name in all the imports, e.g. js/index.js?sd9f8s

The issue is that Vite will literally add the bang part (e.g. ?sd9f8s) to the actual filenames (we rename the build files only at the end of the build, to remove that part), so in return your plugin throws the following error: Unable to locate the JavaScript asset for adding the CSS injection code. It is recommended to review your configurations..

The issue comes from the isJsOutputChunk and the inner Regex used there, which doesn't match the format js/index.js?sd9f8s.

I've forked your library and updated the Regex: https://github.com/crisp-dev/vite-plugin-css-injected-by-js/blob/main/src/utils.ts#L102

It's working just fine now.

What would be appropriate to bring this fix to your library? I see different solutions:

Let me know!

marco-prontera commented 1 year ago

Hi @eliottvincent! Thank you for the contribution. I like the regex update solution, if you want you can open a PR so I can release a version with this update. maybe if someone has a different problem, I'll think about adding another option but for now i think what you did is the right thing. Thank you again đź‘Ť

marco-prontera commented 1 year ago

Hi @eliottvincent the proposed change is released here, thank you again for your contribution!

eliottvincent commented 1 year ago

You rock, thanks for the reactivity!