search

AnalogStudiosRI / www.analogstudios.net

New frontend website for Analog Studios (under development)
http://www.analogstudios.net
Apache License 2.0
4 stars 1 forks source link

deduped CSS and refactored to not use Shadow DOM #56

Open thescientist13 opened 2 years ago

thescientist13 commented 2 years ago

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" - https://github.com/fernandopasik/lit-redux-router/issues/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

netlify[bot] commented 2 years ago

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

🔨 Explore the source changes: 5314489469004ee8837059d5893c2c626447ee2d

🔍 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 commented 2 years ago

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

Also this seems like an interesting conversation to track.