changing file extension of vanilla-extract from "[filename].css.ts" to something else

[tkgroot]

I was wondering if it is possible to change the default behaviour and file extensions from style.css.ts to something else within a build tool like vitejs. I have a library which provide styles in this format ([name].css.(js|ts)) and it breaks with the build tool.

Or does anyone have any advice how I could circumvent this with the build tool. I couldn't find anything in the documentation of the vite plugin @vanilla-extract/vite-plugin

[hbmuller]

Using the Rollup plugin, we do this to rename the output files:

// rollup.config.mjs
export default {
  // Your other options go here...
  output: {
    dir: "dist",

    // Rename output VE styles to `.styles.css`
    assetFileNames: ({ names }) => names[0]?.replace(/\.css.ts.vanilla\.css$/, ".styles.css") ?? "",

    // Rename `.css.js` files to `.styles.js`, so they are not re-processed by the user's Vanilla-Extract
    entryFileNames: ({ name }) => `${name.replace(/\.css$/, ".styles")}.js`,
  },
  plugins: [vanillaExtractPlugin()],
};

Maybe you can do sth similar for Vite.

[tkgroot]

This is a pretty good setup if you are in full control of your library which you are exposing to other users which are using Vanilla-Extract. For me however, it will not work since my library first of all doesn't have a build step.

I was hoping for sth which the user can use next to Vanilla-Extract to prevent breaking. Anyways, this is still a good solution.
In the end we migrated away from Vanilla-Extract.

[tkgroot]

Vite underwater uses Rollup so you can use the same settings

export default defineConfig({
  build: {
    rollupOptions: {
      output: { /* your output options here */ },
    },
  },
});