Sapper: Sapper generates duplicate CSS files

Created on 30 Jan 2020 · 12Comments · Source: sveltejs/sapper

When building or exporting a Sapper application, it generates client.hash.css and main.hash.css both files are the same.

{
  "bundler": "rollup",
  "shimport": "1.0.1",
  "assets": { "main": "client.c810e122.js" },
  "css": {
    "main": "main.1877335015.css",
    "chunks": { "index.svelte": ["index.9a007eef.css", "client.c810e122.css"] }
  }
}

Is this __sapper__/build/build.json the main.1877335015.css and client.c810e122.css files are the same.

This behavior is reproducible in the sapper-template-rollup.

Sapper: 0.27.9
Svelte: 3.18.1
Ubuntu: 19.10

bug

Source

s0kil

👍15

Most helpful comment

We confirmed this particular issue is only with Rollup. The issue is in this repo, not rollup-plugin-svelte, but it is code that only runs when bundling with Rollup, not Webpack.

If you'd like to try the fix, we published a fork that includes the fix in the linked PR as @mapgrid/sapper which we are using in production until the PR is merged.

@Conduitry our CSS bundle size went from 600kb to 300kb (on a large production site) with this fix.

mapgrid on 24 Feb 2020

🚀3

All 12 comments

I have tried to reproduce this with sapper-template-webpack using mini-css-extract-plugin and css-loader and the it generates three files: global.css, main.css and id.css, this is the correct behavior.
So it seems the problem comes from rollup-plugin-svelte

s0kil on 30 Jan 2020

Not sure if this is related but we are evaluating Sapper and ran into an issue where an API call that we were making fromindex.svelte was removed from the code, and yet in the debugger we could see the call was still being made. Searching for the API call in the project revealed that it had been wrapped into __sapper__/build/dev/client/index.hash.js, of which there were several versions.

I understand there is a transpilation step to make the svelte goodness happen, but this is a bit disconcerting and smells of a bit too much magic going on under the hood if I can´t be sure if what I am running is current or some errant version from the past Why are different versions being kept around? Even if we are expected to clear the build directory ourselves in a build step, it still seems strange that anything other than the latest build would even be considered for actually running by the sapper mechanism.

"sapper": "^0.27.0"
"svelte": "^3.0.0"
"rollup": "^1.20.0"
"rollup-plugin-svelte": "^5.0.1"

unozerocode on 31 Jan 2020

I have generated the webpack project even the webpack project have the same issue

Sidd27 on 24 Feb 2020

@Sidd27 Have you checked to see if the CSS files are exactly the same?

When I tried to reproduce with WebPack, the CSS file contents was not the same.

s0kil on 24 Feb 2020

We confirmed this particular issue is only with Rollup. The issue is in this repo, not rollup-plugin-svelte, but it is code that only runs when bundling with Rollup, not Webpack.

If you'd like to try the fix, we published a fork that includes the fix in the linked PR as @mapgrid/sapper which we are using in production until the PR is merged.

@Conduitry our CSS bundle size went from 600kb to 300kb (on a large production site) with this fix.

mapgrid on 24 Feb 2020

🚀3

@mapgrid Thanks a lot for the PR!

s0kil on 24 Feb 2020

@s0kil The issue also persist in webpack
Check the below attached Image

Sidd27 on 25 Feb 2020

One class definition exist in

Normal Style tag

and Other Class Definition exist in style tag with Id attribute

Sidd27 on 25 Feb 2020

@Sidd27 I can reproduce the issue with CSS being inlined.
The problem is that CSS get's inlined with a style tag during compile time (build, export) and once the JavaScript client is loaded, it inlines a style tag with an id attribute containing duplicate CSS.

s0kil on 25 Feb 2020

On a unrelated note: Whilst inspecting the output of HTML generated by Sapper, there are some missing closing tags:

index.html

<!doctype html>
<html lang=en>
  <head>
    <meta charset=utf-8>
    <meta content="width=device-width,initial-scale=1" name=viewport>
    <meta content=#333333 name=theme-color>
    <base href=/ >
    <link href=global.css rel=stylesheet>
    <link href=manifest.json rel=manifest crossorigin=use-credentials>
    <link href=favicon.png rel=icon type=image/png>
    <style>main.svelte-1uhnsl8{position:relative;max-width:56em;background-color:#fff;padding:2em;margin:0 auto;box-sizing:border-box}nav.svelte-1dbd5up{border-bottom:1px solid rgba(255,62,0,.1);font-weight:300;padding:0 1em}ul.svelte-1dbd5up{margin:0;padding:0}ul.svelte-1dbd5up::after{content:'';display:block;clear:both}li.svelte-1dbd5up{display:block;float:left}[aria-current].svelte-1dbd5up{position:relative;display:inline-block}[aria-current].svelte-1dbd5up::after{position:absolute;content:'';width:calc(100% - 1em);height:2px;background-color:#ff3e00;display:block;bottom:-1px}a.svelte-1dbd5up{text-decoration:none;padding:1em .5em;display:block}figure.svelte-1kk9opm,h1.svelte-1kk9opm,p.svelte-1kk9opm{text-align:center;margin:0 auto}h1.svelte-1kk9opm{font-size:2.8em;text-transform:uppercase;font-weight:700;margin:0 0 .5em 0}figure.svelte-1kk9opm{margin:0 0 1em 0}img.svelte-1kk9opm{width:100%;max-width:400px;margin:0 0 1em 0}p.svelte-1kk9opm{margin:1em auto}@media(min-width:480px){h1.svelte-1kk9opm{font-size:4em}}</style>
    <noscript id=sapper-head-start></noscript>
    <title>Sapper project template</title>
    <noscript id=sapper-head-end></noscript>
    <link href=/client/c30f67d5f444719868d3/main.js rel=preload as=script>
    <link href=/client/c30f67d5f444719868d3/index.3.js rel=preload as=script>
  </head>
  <body>
    <div id=sapper>
      <nav class=svelte-1dbd5up>
        <ul class=svelte-1dbd5up>
          <li class=svelte-1dbd5up>
            <a class=svelte-1dbd5up href=. aria-current=page>home</a>
          </li>
          <li class=svelte-1dbd5up>
            <a class=svelte-1dbd5up href=about>about</a>
          </li>
          <li class=svelte-1dbd5up>
            <a class=svelte-1dbd5up href=blog rel=prefetch>blog</a>
          </li>
        </ul>
      </nav>
      <main class=svelte-1uhnsl8>
        <h1 class=svelte-1kk9opm>Great success!</h1>
        <figure class=svelte-1kk9opm>
          <img alt=Borat class=svelte-1kk9opm src=great-success.png>
          <figcaption>HIGH FIVE!</figcaption>
        </figure>
        <p class=svelte-1kk9opm>
          <strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong>
        </p>
      </main>
    </div>
    <script>__SAPPER__={baseUrl:"",preloaded:[void 0,{}]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/service-worker.js');</script>
    <script src=/client/c30f67d5f444719868d3/main.js></script>

In this snippet, </body> and </html> are missing
Is this intentional?
Maybe to save space (14 bytes, lol)? Because browser engines are resilient?

s0kil on 25 Feb 2020

Yes, that is correct, the duplicate inline styles should be a separate issue (maybe stemming from hydratable not deduplicating inline styles?)

The lack of </body></html> should also be a separate issue (if it mattered).

This issue is specifically about duplicate, physical .css files. Let's avoid the noise.