Sapper generates duplicate CSS files #1076

s0kil · 2020-01-30T08:53:43Z

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

The text was updated successfully, but these errors were encountered:

s0kil · 2020-01-30T09:46:03Z

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

unozerocode · 2020-01-31T14:58:22Z

Not sure if this is related but we are evaluating Sapper and ran into an issue where an API call that we were making from index.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"

Sidd27 · 2020-02-24T18:39:29Z

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

s0kil · 2020-02-24T20:52:01Z

@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.

mapgrid · 2020-02-24T21:06:41Z

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.

s0kil · 2020-02-24T21:34:12Z

@mapgrid Thanks a lot for the PR!

Sidd27 · 2020-02-25T05:46:25Z

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

Sidd27 · 2020-02-25T05:51:01Z

One class definition exist in

Normal Style tag

and Other Class Definition exist in style tag with Id attribute

s0kil · 2020-02-25T06:44:48Z

@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 · 2020-02-25T06:52:11Z

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?

nathancahill · 2020-02-25T09:40:58Z

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.

s0kil · 2020-02-25T16:08:55Z

@Sidd27 Please create a new issue with the problems you outlined.

s0kil mentioned this issue Jan 30, 2020

Error: Multiple @font-face with the same font-family/font-style/font-weight Munter/subfont#77

Closed

Conduitry added the bug label Feb 21, 2020

mapgrid mentioned this issue Feb 23, 2020

Leftover css should read from unclaimed modules #1098

Merged

antony added the has pr label Feb 24, 2020

Conduitry closed this as completed in #1098 Feb 25, 2020

Conduitry mentioned this issue Mar 12, 2020

Revisit inline <style> issue #1115

Open

Conduitry mentioned this issue Mar 21, 2020

Svelte/Sapper duplicates CSS styles #1127

Closed

benmccann mentioned this issue Sep 7, 2020

Svelte REPL broken on svelte.dev #1493

Closed

canadaduane mentioned this issue Sep 19, 2020

Duplicated CSS orlov-vo/parcel-transformer-svelte#8

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sapper generates duplicate CSS files #1076

Sapper generates duplicate CSS files #1076

s0kil commented Jan 30, 2020 •

edited

Loading

s0kil commented Jan 30, 2020

unozerocode commented Jan 31, 2020

Sidd27 commented Feb 24, 2020

s0kil commented Feb 24, 2020 •

edited

Loading

mapgrid commented Feb 24, 2020

s0kil commented Feb 24, 2020 •

edited

Loading

Sidd27 commented Feb 25, 2020

Sidd27 commented Feb 25, 2020

s0kil commented Feb 25, 2020 •

edited

Loading

s0kil commented Feb 25, 2020 •

edited

Loading

nathancahill commented Feb 25, 2020

s0kil commented Feb 25, 2020

Sapper generates duplicate CSS files #1076

Sapper generates duplicate CSS files #1076

Comments

s0kil commented Jan 30, 2020 • edited Loading

s0kil commented Jan 30, 2020

unozerocode commented Jan 31, 2020

Sidd27 commented Feb 24, 2020

s0kil commented Feb 24, 2020 • edited Loading

mapgrid commented Feb 24, 2020

s0kil commented Feb 24, 2020 • edited Loading

Sidd27 commented Feb 25, 2020

Sidd27 commented Feb 25, 2020

s0kil commented Feb 25, 2020 • edited Loading

s0kil commented Feb 25, 2020 • edited Loading

nathancahill commented Feb 25, 2020

s0kil commented Feb 25, 2020

s0kil commented Jan 30, 2020 •

edited

Loading

s0kil commented Feb 24, 2020 •

edited

Loading

s0kil commented Feb 24, 2020 •

edited

Loading

s0kil commented Feb 25, 2020 •

edited

Loading

s0kil commented Feb 25, 2020 •

edited

Loading