Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.

CSS selectors removed when actually still in use #842

Closed
happycollision opened this issue Aug 11, 2019 · 3 comments
Closed

CSS selectors removed when actually still in use #842

happycollision opened this issue Aug 11, 2019 · 3 comments
Labels

Comments

@happycollision
Copy link
Contributor

Describe the bug
Sapper/Svelte's unused CSS selector feature is removing some styles which are still in use. The edge case in which this happens is probably rare, but is something to be aware of. I am new to Svelte and Sapper, so I may be wrong about "why", but you can reproduce the "what" via the steps below.

When two route components define the exact same styles, only one is loaded into the DOM. (This is expected.) However, if one of those route components happens to have declared an unused selector, it is stripped from the style definition. If you visit the missing style route first, then follow a link to the other route which has the same style definitions, the previously unused selector remains stripped from the page. So even if the second route uses the style properly, it will be missing.

Admittedly, fixing the warning that the styles are unused will make the two definitions have a different hash, and therefore both will be loaded (and nothing will be stripped anyway). However, it is a warning and not an error that is thrown, so perhaps there is some concern there.

Logs
(Just some expected logs about unused css selectors)

To Reproduce

  1. Follow directions to start your first Sapper app: npx degit "sveltejs/sapper-template#webpack" my-app
  2. Copy src/routes/index.svelte to src/routes/missing.svelte
  3. Remove the <figure> entirely from the missing.svelte file. Do not adjust the styles.
  4. npm run dev (observe the "Unused CSS selector" warnings) and navigate to localhost:3000/missing.
  5. Click the home link.

Expected: Borat whose width does not exceed 400px.
Observed: Huge Borat.

  1. Reload the page, and: Borat whose width does not exceed 400px.

Information about your Sapper Installation:

  • Your browser and the version: Safari (doesn't matter)
  • Your operating system: macOS Mojave latest (probably doesn't matter)
  • Your hosting environment: (local dev)
  • Sapper version 0.27.8
  • Svelte version 3.7.1
  • If it is an exported (npm run export) or dynamic application: exported
  • Whether your application uses Webpack or Rollup: Webpack

Severity
Trivial. It is very easy to fix if the developer who is running into it knows what is going on, but it is surprising.

@happycollision
Copy link
Contributor Author

(The repro is pretty funny, though.)
Screen Shot 2019-08-11 at 12 53 54 AM

@antony antony added the bug label Feb 3, 2020
@mrbianchi
Copy link

same

@Conduitry
Copy link
Member

Conduitry commented Apr 19, 2020

Duplicate of sveltejs/svelte#4313

Edit: Actually, I see that this bug is older than the Svelte one. But this is a Svelte bug, not a Sapper one.

@Conduitry Conduitry marked this as a duplicate of sveltejs/svelte#4313 Apr 19, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

4 participants