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

[aaronstezycki]

• Output:

  • a.css
  • b.css
  • chunked-a+b.css used by index.html

Would this solve your use case?

@KiwiKilian I believe this would be a step in the right direction. Then at the very least CSS files could be chunked and used in separately hosted parts of the website or on perhaps on Codepen.

I think what this solves, is when you have a single website with the main CSS styles and other sub-domains using a subset or leaner version of the styles. But also perhaps solves a developer expectation that Rollup would serve separate files out the box.

I'm not sure how exactly, but the Slinkity chaps managed to keep this part of the Rollup functionality working and when the code was output this would generate chunk a + b {.css} and then inside any HTML files would link to said chunk a+b.css. That would be the ideal and meet expectations.

Happy to go with your suggestions as way forward though 👍🏻

Thanks again.

[boilemmashem]

I'm running into this issue also with my project where I need a separate TS file to be bundled in the document head. This is what I've been trying so far:

  eleventyConfig.addPlugin(EleventyVitePlugin, {
    viteOptions: {
      plugins: [tailwindcss()],
      build: {
        rollupOptions: {
          input: {
            head: path.resolve("src/_assets/js/head.ts"),
            main: path.resolve("src/_assets/js/main.ts"),
          },
          output: {
            entryFileNames: "assets/[name].js",
          },
        },
      },
    },
  });

My head script isn't too large so as a workaround for now I've been in-lining it as JS. For my use case it would be nice exclude this asset from the main bundle, and have another bundle that includes just this file.

[KiwiKilian]

I guess we will have to allow appending to the input, even though I guess it will be error prone. Right now the rollupOptions.input is generated as an array of the HTML files.

We will have to check, what's passed by the user, because array and object are allowed..

@boilemmashem if your script is that simple, you can also place a /public/head.js an reference this one. Vite will not modify it, only copy it to output. But then you wouldn't have to put it inline.

[boilemmashem]

Thanks @KiwiKilian In my case I was fetching / applying local storage changes in the <head> and then loading the rest of my scripts at the bottom of the body. I wasn't aware that vite bundled everything into the head, but going with the flow and putting everything together fixed my issue. I guess vite is smart enough that it knows my main.ts needs to be wrapped in something like DOMContentLoaded.

[groenroos]

+1 to being able to manually add to the list of inputs.

My use case is being able to build an SCSS asset designed to be hotlinked from an external project (instead of being used anywhere directly in my Eleventy project).

So, in tandem with the Eleventy build and its required assets, I'd like to be able to use the same build setup to also generate a separate external.css that I can then use elsewhere (e.g. a third-party hosted support portal).

I realise this would at a minimum require also a Vite plugin of some sort to filter out the hash from the filename, so that the URL is predictable - and that's obviously down to my individual project to implement. But since the Eleventy Vite plugin doesn't allow custom inputs currently, I'm not able to get that far yet.

[KiwiKilian]

I've released the merging of viteOptions.build.rollupOptions.input on v7.1.0-alpha.2. Please give it a spin and leave some feedback.