You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 11, 2023. It is now read-only.
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
Follow directions to start your first Sapper app: npx degit "sveltejs/sapper-template#webpack" my-app
Copy src/routes/index.svelte to src/routes/missing.svelte
Remove the <figure> entirely from the missing.svelte file. Do not adjust the styles.
npm run dev (observe the "Unused CSS selector" warnings) and navigate to localhost:3000/missing.
Click the home link.
Expected: Borat whose width does not exceed 400px.
Observed: Huge Borat.
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.
The text was updated successfully, but these errors were encountered:
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
npx degit "sveltejs/sapper-template#webpack" my-app
src/routes/index.svelte
tosrc/routes/missing.svelte
<figure>
entirely from themissing.svelte
file. Do not adjust the styles.npm run dev
(observe the "Unused CSS selector" warnings) and navigate tolocalhost:3000/missing
.Expected: Borat whose width does not exceed 400px.
Observed: Huge Borat.
Information about your Sapper Installation:
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.
The text was updated successfully, but these errors were encountered: