search

ProjectEvergreen / www.greenwoodjs.dev

Documentation website for Greenwood
https://super-tapioca-5987ce.netlify.app
1 stars 0 forks source link

CSS Modules #11

Closed thescientist13 closed 1 week ago

thescientist13 commented 6 months ago

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. [x] prerender / static optimization support
  2. [x] support recursively walking script imports (e.g. header.js depends on navigation.js)
  3. [x] scope class names
  4. [x] extract import lines out of JavaScript, aka zero "runtime" (only at build time?)
  5. [x] hash based class names (only at build time?)
  6. [x] check production build integration
  7. [x] Test interop with native CSS Modules
  8. [x] Track upstream plugin / CLI support per #37
  9. [x] remove header demo code, rebase after #26
  10. [ ] Update CONTRIBUTING.md and Storybook tech stack docs - will do as own PR

Questions / Discussions

Tracking this all here - https://github.com/ProjectEvergreen/greenwood/issues/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. [x] 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?)
  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 #13 Screenshot 2024-01-21 at 6 13 09 PM
  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'
1. [ ] Any flexibility in the usage of the import?
    ```js
     // 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>
  1. [x] Could use a better data structure for sheets, like a Map or Set?
netlify[bot] commented 6 months ago

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...

QR Code

Use your smartphone camera to open QR code link.

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