CSS Modules

[thescientist13]

Related Issue

Final part of #7, to compliment our usage of #38

Summary of Changes

1. A very early and naive implementation of CSS Modules

TODOs

1. prerender / static optimization support
2. support recursively walking script imports (e.g. header.js depends on navigation.js)
3. scope class names
4. extract import lines out of JavaScript, aka zero "runtime" (only at build time?)
5. hash based class names (only at build time?)
6. check production build integration
7. Test interop with native CSS Modules
8. Track upstream plugin / CLI support per upstream feature / fixes tracking #37
   • break fix? - leverage Sec-Fetch-Dest header for better filtering within Greenwood resource plugins greenwood#1222
   • make as a custom greenwood plugin
   • track as a use case within Isomorphic (Reflected) Import Attributes Support greenwood#1216
9. remove header demo code, rebase after Header Component #26
10. Update CONTRIBUTING.md and Storybook tech stack docs - will do as own PR

Questions / Discussions

Tracking this all here - ProjectEvergreen/greenwood#1233

1. refactor to avoid having to use intermediate output file (I think this is needed for prerendering because things run in a Worker Thread? 🤔 )
2. Should hashing / runtime removal only happen at build time, or also have it happen in dev too? (avoid extra work when not necessary, especially when using a dev server) - not much of a big deal, since we have to fetch the contents anyway, and this helps with naming collisions
3. conform to icss specification (leverage postcss-modules package?)
   • Re-evaluate Lightning CSS - https://lightningcss.dev/css-modules.html
4. only useful for Light DOM use cases?
5. should we shim / conform to Constructable Stylesheets API? This actually gets us the CSS rules 🤩 . Also see demo/home page with prototype of HTML / CSS modules (separation of technologies) #13
   
6. Any flexibility of the import usage API, e.g.

   // hardcoded import
   import styles from './something.module.css'
   
   // vs
   import myCss from './something.module.css'

7. Any flexibility in the usage of the import?

    // needs to reference the import name
    <h1 class="${styles.heading}">Welcome to Greenwood!</h1>
   
    // as opposed to
    const { heading } = styles;
    <h1 class="${heading}">Welcome to Greenwood!</h1>

8. Could use a better data structure for sheets, like a Map or Set?

[netlify]

✅ Deploy Preview for super-tapioca-5987ce ready!

Name	Link
🔨 Latest commit
🔍 Latest deploy log	https://app.netlify.com/sites/super-tapioca-5987ce/deploys/665240157d71399f0d49f8bb
😎 Deploy Preview	https://deploy-preview-11--super-tapioca-5987ce.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[thescientist13]

Lol, just a little copy 🍝 here 😅

[thescientist13]

TODO - how to handle other file types / extensions? Do we even need to check, can was assume something should already be there to handle it?