Allow Vite/Rollup to build output files specified in the input entry points

[aaronstezycki]

Having migrated recently from the Slinkity plugin to 11ty-vite, Slinkity would adhere to Rollups entry points specified in the Rollup Options within 'input'.

More on what the input array does here... Rollup Config Options

The bundle's entry point(s) (e.g. your main.js or app.js or index.js). If you provide an array of entry points or an object mapping names to entry points, they will be bundled to separate output chunks.

Currently, the 11ty-vite plugin merges all the CSS files used regardless of mapping out entries using the input config, I'm assuming that the HTML files (with the includes to the css files) are used as the main entry points, thus ignoring anything within the Rollup options input array.

My .elevent.js file looks like ...

  config.addPlugin(vite, {
      viteOptions: {
          build: {
              publicDir: 'public',
              clearScreen: false,
              server: {
                  mode: 'development',
                  middlewareMode: true
              },
              rollupOptions: {
                  input: [
                      './src/assets/css/file1.scss',
                      './src/assets/css/file2.scss',
                      './src/assets/css/file3.scss',
                      './src/assets/js/all.js',
                  ],
                  output: {
                  ...
                  }
              },
              manifest: true
          }
      }
  });

and when doing a final build I get the following files in my dist folder. I get just the 1 concatenated file included within a HTML file.

/dist
  | - assets
      | - css
         | - file1.css <<<
      | - js
        | - app.js

Obviously I understand the reasons for this, only shipping what the app/website actually needs is one of vites features. However outputting the chucks as needed allows the chunks to be used independently (say on codepen/stackblitz).

Expected output should be:

/dist
  | - assets
      | - css
         | - file1.css <<<
         | - file2.css <<<
         | - file3.css <<<
      | - js
        | - app.js

Is there a fix for this, or is the approach in my config incorrect?

Thanks in advance

[KiwiKilian]

Currently any build.rollupOptions.input is overwritten by simply setting the HTML files as input. We could merge custom input with the HTML entries, but I'm not sure if this creates your desired output. In my testing this only created separate, additional chunks while also creating on single bundle which would be used by the HTML.

Example:

• Input:
  • Two CSS files a.css and b.css
    • Both also specified in the input array
  • One index.html with <link> to the two CSS files
• Output:
  • a.css
  • b.css
  • chunked-a+b.css used by index.html

Would this solve your use case?

[saiballo]

does not work for me... only one bundled css file is created

[KiwiKilian]

@saiballo never said it should work, it was a possible fix we could implement. The question rather was, what the goal is. But it's highly likely you want to use a custom setup, with such specialized needs.

[saiballo]

I'm trying to replace codekit with vite and I need to create N files and not only one bundled file