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

Correctly calculate leftover css #1413

Closed
wants to merge 1 commit into from

Conversation

benmccann
Copy link
Member

Closes #1397

It looks like the bug was introduced by #471, which made leftover include the css entry_modules. I don't understand the issue there or how to test that this doesn't reintroduce the issue that was being addressed

@benmccann benmccann changed the title Extract css Correctly calculate leftover css Aug 17, 2020
@Conduitry
Copy link
Member

There's another related issue that appears to have emerged in either in Sapper 0.28 or upon upgrading Rollup or one of its plugins.

Previously, you were able to simply import './path/to/some.css' in any .svelte or .js file and that CSS file would be included on any page that used that file. This is no longer working on 0.28 with the latest template nor when using this PR.

I suspect it was this type of CSS that #471 was dealing with. If both the _layout and a particular page depended on some particular CSS (not a <style> tag in a component), it sounds like these styles were getting incorrectly skipped.

Separately, it looks like this PR also causes the same or similar issues as #1098 did - that all of the component styles are now getting inlined into a <style> tag in the server-rendered HTML.

@Conduitry
Copy link
Member

Conduitry commented Aug 17, 2020

Using the current template but downgrading to Rollup 1 seems to make the import 'foo.css' thing partly work again.

With Sapper 0.28.0 and Rollup 1, CSS files imported from components end up in both the server-rendered HTML.

With this PR and Rollup 1, CSS files imported from components only seem to end up in the client-rendered versions of the components. The styles are not applied until js is run.

edit: Looking at the list of breaking changes in Rollup 2, the only one that jumps out at me as being relevant is:

Modules that are completely tree-shaken will no longer be listed as part of any chunks in generateBundle

@benmccann
Copy link
Member Author

Previously, you were able to simply import './path/to/some.css' in any .svelte or .js file and that CSS file would be included on any page that used that file.

Is that a Svelte feature or purely a Sapper feature?

Modules that are completely tree-shaken will no longer be listed as part of any chunks in generateBundle

That's what #1306 was supposed to address. They were being tree-shaken with Rollup 2, so we added an option telling it to stop tree shaking them

@Conduitry
Copy link
Member

Just a Sapper feature. The compiler doesn't touch any of the imports in any of your components, and rollup-plugin-svelte doesn't have any special handling of them. I think some handling of this is built into webpack.

@benmccann benmccann marked this pull request as draft August 17, 2020 15:38
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[email protected] generates 2 css files with identical content
2 participants