rollup@19.1.0 outputs invalid CSS chunk names

[tivac]

Outputs files like:

chunk2.css
chunk23.css
chunk234.css

modular-css/packages/rollup/rollup.js

Lines 189 to 195 in 87ea915

	// Want to use source chunk name when code-splitting, otherwise match bundle name
	let identifier = outputOptions.dir ? name : path.basename(entry, path.extname(entry));
	// Replicate rollup chunk name de-duping logic here since that isn't exposed for us
	while(out.has(identifier)) {
	identifier = `${identifier}${++counter}`;
	}

Should be something like:

let base = outputOptions.dir ? name : path.basename(entry, path.extname(entry));
let identifier = base;

console.log(identifier);

// Replicate rollup chunk name de-duping logic here since that isn't exposed for us
while(out.has(identifier)) {
    identifier = `${base}${++counter}`;
}

[tivac]

Rollup already handles deduping asset names, so I should rework this to use an array instead of a Map and let rollup do its thing.

One catch, source maps will need to use this.getAssetFileName(id) to get the name of the file & do a .replace(".css", ".css.map"). Otherwise they end up as chunk.css.map, chunk.css2.map, etc. which then won't get correctly loaded.

[tivac]

One unfortunate wrinkle:

Passing rollup a name like "chunk.css" twice results in "chunk2.css", but passing something like "chunk.css.map" twice results in "chunk.css2.map".

-chunk2.css
+chunk.css2.map

Since the names don't match up now browsers won't auto-load the sourcemap, which isn't great. Working around this is gonna be tricky since rollup supports [hash] in name templates.

[tivac]

Thought about using the postcss { map : { annotation } } field to adjust the auto-injected sourcemap comment, but turns out that this.getAssetFileName() can't be called until the asset source is set. Leads to a nasty chicken-and-egg problem.

Maps will need to be written out using fs.writeFile(), there's no way to say "this thing was already hashed please ignore" via the rollup plugin api.