Vite: Options for assets building without adding hash

[FateRiddle]

All referenced assets, including those using absolute paths, will be copied to the dist folder with a hashed file name in the production build.

I'm trying to make a library builder out of create-vite-app, and it is close to useable with one last step, here's the prod.config.js file :

const config = {
  rollupInputOptions: {
    input: { index: 'src/App.jsx' },
  },
  assetsDir: '',
  emitIndex: false,
  jsx: 'react',
  plugins: [reactPlugin],
};

The build result will be in dist and look like this:

├── index.8d84e296.js
├── style.05c2d980.css

So I want src/App.jsx to be built into index.js rather than index.8d84e296.js.
Can this be supported?

[MarvinRudolph]

@FateRiddle Same as #329 but it's tracked with the library configuration preset here #330.

[Frulko]

After some search inside the codebase, I've found the line where the all the magic happen for the CSS (line 174) :

https://github.com/vitejs/vite/blob/1e375a4ffb4bb899f9f7fe5a5e88a27ff6646725/src/node/build/buildPluginCss.ts#L168-L185

Currently, as we can see, it's hardcoded and we can hope for an option in the futur. For now there is no workaround w/ Vite but you could choose to build your app with rollup directy without vite.

For the JS you could add a configuration option :

module.exports = {
  ... // other configs options
  rollupOutputOptions: {
    entryFileNames: '[name].js',
  }
}

[Frulko]

@underfin following the Contributing Guide, I could make a small workaround in a PR by extending cssModuleOptions and add a cssFileName override option can take a string or a function for replace or customize the css output file.

[Frulko]

After some investigations cssModulesOptions is imported from @vue/compiler-sfc

https://github.com/vuejs/vue-next/blob/4951d4352605eb9f4bcbea40ecc68fc6cbc3dce2/packages/compiler-sfc/src/compileStyle.ts#L34-L50

Maybe it could be interesting to make a cssModulesOptions derivated from @vue/compiler-sfc but overridable to add some extra options for the futur. I understand the purpose of that I'm interested by your return.

@underfin have you an opinion on that point ?

[VishnuPrabhuT]

I'm in urgent need for this to be resolved. I could help or submit a PR if no one else is already working on this.

[Frulko]

I made the change locally I could submit a PR (ETA tomorrow)

[Frulko]

My PR is on the way :) wait and see !

[VishnuPrabhuT]

` vite/src/node/build/buildPluginCss.ts

      // const cssFileName = `style.${hash_sum(staticCss)}.css`

      // bundle[cssFileName] = {
      //   name: cssFileName,
      //   isAsset: true,
      //   type: 'asset',
      //   fileName: cssFileName,
      //   source: staticCss
      // }


      Object.keys(bundle).forEach((b) => {
        if (!b.includes("runtime-dom.esm-bundler")) {
          const t = b.split("/")[1].replace(".js", "");
          if (t && !t.includes("runtime-dom.esm-bundler")) {
            const t = b.split("/")[1].replace(".js", "");
            const cssFileName = `${t}/${t}.css`;
            bundle[cssFileName] = {
              name: cssFileName,
              isAsset: true,
              type: "asset",
              fileName: cssFileName,
              source: staticCss,
            };
          }
        }
      });

`

Add these lines to generate the shared css file at every bundle path defined without hash and the bundle name. Hope it helps someone.

[yyx990803]

With #957 merged you can customize it via assetFileNames now:

rollupOutputOptions: {
    entryFileNames: `[name].js`,
    chunkFileNames: `[name].js`,
    assetFileNames: `[name].[ext]`
}