Duplicated css in output with v4.2 vs v3.1

[crisward]

After updating to 4.2 I saw a massive increase in bundle size for our css. When checking the content it looks like the css had been added to the output file multiple times.

Dependency Versions

@rollup/plugin-commonjs@17.1.0
@rollup/plugin-json@6.0.0
@rollup/plugin-node-resolve@11.2.1
rollup-plugin-css-only@4.2.0
rollup-plugin-inject-process-env@1.3.1
rollup-plugin-output-manifest@2.0.0
rollup-plugin-svelte@7.1.6
rollup@2.79.1
svelte@3.59.2

Rollup

import svelte from 'rollup-plugin-svelte';
import css from 'rollup-plugin-css-only'
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import injectProcessEnv from 'rollup-plugin-inject-process-env';
import outputManifest from 'rollup-plugin-output-manifest';
import json from "@rollup/plugin-json";

export default [
  {
    input:'./client/admin.js',
    output: {
      sourcemap: process.env.NODE_ENV != "production",
      format: 'es',
      name: 'app',
      dir: 'storage/public/resources/site_tmp',
      manualChunks: undefined
    },
    plugins:[
       svelte({ emitCss:true }), 
       resolve({ browser: true, dedupe: ['svelte'] }), 
       commonjs(), 
       json(),
       css({ output: cssFilename }),
       injectProcessEnv({'NODE_ENV': process.env.NODE_ENV == "production" ? 'production' : 'development' }),
       outputManifest({isMerge:true})
    ]
  }

bundle	4.2 Size	3.1 Size	Number of duplicates
admin.css	146kb	106kb	2
editor.css	812kb	147kb	18
site.css	743kb	101kb	15

The number of duplicate copies of the css seems related to the number of dynamic import() statements used within the specific bundle.

Hope that helps you reproduce and fix this issue.

[thgh]

Do you mind checking out https://www.npmjs.com/package/rollup-plugin-import-css or https://www.npmjs.com/package/rollup-plugin-styles and see if those work for you?

I'm using higher level frameworks nowadays so won't fix bugs. Happy to merge a fix though!

[crisward]

I may just keep using v3.1 for now. I'll check the above out if it becomes necessary.

If you're not planning on supporting this rollup plugin ( which I totally understand BTW ) , it may be worth letting the svelte team know as they still point to it as a way to compile your css. ( https://github.com/sveltejs/rollup-plugin-svelte#extracting-css ).

I'll leave it up to you if you'd like to close this, or leave it open so it doesn't get re-reported. Thanks again.

[rallets]

@crisward FYI I just replaced rollup-plugin-css-only 4.3.0 with rollup-plugin-import-css 3.3.4 and everything worked as before.

[pioug]

Should be fixed in v4.5.2. Feel free to reopen if it still reproducible.