Creating Multiple CSS Output Files

[LucasUnplugged]

TL;DR: See this comment for an explanation of how I implemented @roginfarrer's suggestion, to do this with Vite.

---

Hey folks. I feel like I had seem some content, in the past, saying that VE could no generate multiple CSS files — it just jammed everything into one. But I can't seem to find anything conclusive, either way.

To clarify, I'm using VE to help me generate CSS for a design system, and would like to have a controlled way to say: put these global styles in one file, and these other global styles in another file.

I am not looking for some component-centric code splitting, because I'm building utility classes for general styling purposes.

Does anyone know if that is possible right now? If so, how? The docs seem to imply it's not possible, with statements like:

When processing your code into CSS, vanilla-extract will always render your media queries at the end of the file.

(Noting that "file" is singular there).

[roginfarrer]

Easiest way to do this is have your build step target one set of css files to compile together, then target another set of css files to compile together, etc.

[LucasUnplugged]

Easiest way to do this is have your build step target one set of css files to compile together, then target another set of css files to compile together, etc.

Good call! In case it helps others, here are some details:

• I am using Vite.
• I call globalStyle and globalKeyframes from 2 separate .css.ts files.
• I now have the following vite.config.ts:

const assetNameMap = {
  "interactiveStyles.css.ts.css": "nui-interactive.css",
  "styles.css.ts.css": "nui.css",
}

export default defineConfig({
  esbuild: {
    jsxInject: "import React from 'react'",
  },
  build: {
    emptyOutDir: false,
    reportCompressedSize: false,
    outDir: path.resolve(__dirname, "./dist"),
    rollupOptions: {
      external: Object.keys(pkg.peerDependencies),
      input: {
        nui: "src/index.ts",
        "css/core": "src/config/styles.css.ts",
        "css/interactive": "src/config/interactiveStyles.css.ts",
      },
      output: [
        {
          format: "es",
          entryFileNames: ({ name }) => `${name}.es.js`,
          assetFileNames: ({ name }) => {
            name ??= "untitled.js"
            name = assetNameMap[name] ?? name
            return name as string
          },
        },
        {
          format: "cjs",
          entryFileNames: ({ name }) => `${name}.cjs.js`,
        },
      ],
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      keepNames: true,
    },
  },
  ssr: {
    noExternal: true,
  },
  plugins: [dts(), vanillaExtractPlugin({ identifiers: "short" })],
})

This gives me the following output, which is exactly what I needed:

nui.cjs.js
nui.es.js
nui.css
nui-interactive.css

Thanks for the suggestion, @roginfarrer!