sapper icon indicating copy to clipboard operation
sapper copied to clipboard

treeshaking of css

Open ivanhofer opened this issue 4 years ago • 8 comments

Describe the bug I have a Component that injects some CSS in DEV mode. I don't want this style to be applied in my production build. To do this I created a the InjectDevStyle.svelte-component with only following content:

<script>
  import "../styles/dev.css";
</script>

Then i use this component in my _layout.svelte file like this:

{#if DEVELOPMENT}
  <InjectDevStyle />
{/if}

where DEVELOPMENT is a variable that is statically set with the @rollup/plugin-replace plugin.

Until sapper 0.28.2 the style only appeared in dev mode. But since sapper 0.28.3 the style is also being bundled into my production build.

To Reproduce

Please see this repo: https://github.com/ivanhofer/sapper-style-bug

To simplify the example, I replaced DEVELOPMENT with false and added a dev.css with following content:

body {
  background-color: red;
}

Run npm run build and see that the content of dev.css is also inside the __sapper__/build-folder. When starting the application, the background-color will be red.

When going back one version of sapper with npm i [email protected] and running the build process again, the dev.css style is missing like expected.

Expected behavior I would expect sapper to treeshake the InjectDevStyle-component completely.

Information about your Sapper Installation:

System: OS: Windows 10 10.0.19041 CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz Memory: 20.16 GB / 31.73 GB Binaries: Node: 13.13.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - C:\Program Files\nodejs\yarn.CMD npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 85.0.4183.102 Edge: Spartan (44.19041.423.0), ChromiumDev (87.0.634.0) Internet Explorer: 11.0.19041.1 npmPackages: rollup: ^2.26.11 => 2.26.11 sapper: ^0.28.3 => 0.28.3 svelte: ^3.25.0 => 3.25.0

Severity This issue blocks me from an update to the latest version of sapper, since I need this additional CSS for debugging.

A workaround would be to comment out the InjectDevStyle-component every time I do a production deployment, but its error-prone and I'm sure I will forget it someday.

ivanhofer avatar Sep 14 '20 12:09 ivanhofer