Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.
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

Description

@happycollision

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions