Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

deduped CSS and refactored to not use Shadow DOM #56

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

deduped CSS and refactored to not use Shadow DOM #56

wants to merge 2 commits into from

Conversation

thescientist13
Copy link
Contributor

@thescientist13 thescientist13 commented Dec 9, 2021 •
edited
Loading

Related Issue

related to #28

Summary of Changes

  1. Made all CSS global by having all WCs that need global styles access override createRenderRoot and just spit out <style> tags
  2. Removed all dupe @imports and made all CSS "singletons" and each WC isn't carrying a copy of FA and Bootstrap

This has significantly improved bundle size!

Before

JS + CSS = 1.3MB
Screen Shot 2021-12-09 at 5 47 04 PM

After

JS + CSS = 289 KB 😮
Screen Shot 2021-12-09 at 5 46 27 PM

TODO

Looks like the router is "blocking" all global CSS because it introduces its own Shadow "boundary" - fernandopasik/lit-redux-router#60

  1. Header navigation styles are off (could be related to lit-router)
  2. FA icons are missing (could be related to lit-router)
  3. Posts / Events font sizes are smaller compared to previous version

Screen Shot 2021-12-09 at 6 24 27 PM
Screen Shot 2021-12-09 at 6 24 21 PM

@thescientist13 thescientist13 added this to the Jamstack Migration milestone Dec 9, 2021
@netlify
Copy link

netlify bot commented Dec 9, 2021 •
edited
Loading

✔️ Deploy Preview for practical-fermat-fa2c48 ready!

🔨 Explore the source changes: 5314489

🔍 Inspect the deploy log: https://app.netlify.com/sites/practical-fermat-fa2c48/deploys/61c64ccd5e60a100087b8b6f

😎 Browse the preview: https://deploy-preview-56--practical-fermat-fa2c48.netlify.app/

@thescientist13 thescientist13 linked an issue Dec 9, 2021 that may be closed by this pull request
CSS bundling / refactoring (SASS plugin?) #28
Open
8 tasks
@thescientist13 thescientist13 changed the title deduped CSS and refactored some WCs to emit light DOM and not use Sha… deduped CSS and refactored to not not use Shadow DOM Dec 9, 2021
@thescientist13 thescientist13 changed the title deduped CSS and refactored to not not use Shadow DOM deduped CSS and refactored to not use Shadow DOM Dec 9, 2021
@thescientist13 thescientist13 added bounty:eligible help wanted Extra attention is needed labels Dec 9, 2021
@thescientist13 thescientist13 self-assigned this Dec 9, 2021
@thescientist13
Copy link
Contributor Author

thescientist13 commented Dec 20, 2021 •
edited
Loading

Not sure if this guide would help, since Tailwind is also "global"?

Also this seems like an interesting conversation to track.

@thescientist13 thescientist13 mentioned this pull request Dec 24, 2021
Closed
@thescientist13 thescientist13 mentioned this pull request Jan 5, 2022
Closed
3 tasks
This was referenced Jan 14, 2022
Open
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@thescientist13 thescientist13

Labels
bounty:eligible chore help wanted Extra attention is needed
Projects
None yet
Milestone
Jamstack Migration
Development

Successfully merging this pull request may close these issues.

CSS bundling / refactoring (SASS plugin?)
1 participant
@thescientist13