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

CSS Modules ™️ plugin #1233

Closed
thescientist13 opened this issue May 18, 2024 · 0 comments · Fixed by #1208, #1234 or #1285
Closed

CSS Modules ™️ plugin #1233

thescientist13 opened this issue May 18, 2024 · 0 comments · Fixed by #1208, #1234 or #1285
Assignees
@thescientist13
Labels
alpha.7 CLI documentation Greenwood specific docs feature New feature or request Plugins Greenwood Plugins v0.30.0
Milestone
1.0

Comments

@thescientist13
Copy link
Member

thescientist13 commented May 18, 2024 •
edited
Loading

Summary

The new Greenwood website is piloting a plugin for supporting a very basic implementation of CSS Modules ™️ optimized for providing a nice co-located CSS DX in particular for Light DOM Web Components used for static templating.

Like a footer, for example

.wrapper {
  text-align: center;
  border-radius: var(--radius-4);
  padding: var(--size-fluid-3);
  box-shadow: var(--shadow-4);
}
import styles from "./footer.module.css";

export default class Footer extends HTMLElement {
  connectedCallback() {
    const year = `${new Date().getFullYear()}`;

    this.innerHTML = `
      <footer class="${styles.wrapper}">
        <h4>GreenwoodJS &copy;${year}</h4>
      </footer>
    `;
  }
}

customElements.define("app-footer", Footer);

Would strip out the import statement and add the CSS as a <style> tag to the HTML page, including for SSR, leaving you with something like this in your final HTML

<html>
  <head>
   <style>
     .footer-aca12vdvv-wrapper {
        text-align: center;
        border-radius: var(--radius-4);
        padding: var(--size-fluid-3);
        box-shadow: var(--shadow-4);
      }
   </style>
  </head>
  <body>
    <app-footer>
      <footer class="footer-aca12vdvv-wrapper">
        <h4>GreenwoodJS &copy;2024</h4>
      </footer>
    </app-footer>
  </body>

There are some patches needed for this too, so we should try and vet those first against Greenwood's test cases.

Details

As CSS Modules are a spec and can get quite complex, this should definitely be marked as experimental and YMMV, but did want something nice to compliment a .css first authoring experience with minimal fuss / happy path only support. The below are probably a couple things we can handle for the PR

  1. Make sure this is covered as a test case - bug/issue 1257 refine standard CSS plugin intercepting #1262
  2. DX considerations / prototyping carry overs
    • list unused class names
    • build race condition bug
  3. documentation around only being useful for Light DOM use cases?
  4. should we shim / conform to Constructable Stylesheets API? This actually gets us the CSS rules 🤩 .
    Screenshot 2024-01-21 at 6 13 09 PM
  5. Any flexibility of the import usage API, e.g. 
    // hardcoded import
import styles from './something.module.css'

// vs
import myCss from './something.module.css'
  6. 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>

Discussions

And these are probably better left to putting into a discussion

  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. conform to icss specification (leverage postcss-modules package?)
  3. Check out known issue here - demo/home page greenwood Super CSS (SCSS) optimizations www.greenwoodjs.dev#74
@thescientist13 thescientist13 added Plugins Greenwood Plugins CLI feature New feature or request v0.30.0 labels May 18, 2024
@thescientist13 thescientist13 added this to the 1.0 milestone May 18, 2024
@thescientist13 thescientist13 mentioned this issue May 18, 2024
Closed
This was referenced May 18, 2024
Merged
Merged
@thescientist13 thescientist13 added the documentation Greenwood specific docs label May 18, 2024
@thescientist13 thescientist13 self-assigned this May 18, 2024
@thescientist13 thescientist13 mentioned this issue May 25, 2024
Merged
4 tasks
@thescientist13 thescientist13 mentioned this issue Jun 9, 2024
Closed
This was linked to pull requests Jun 22, 2024
release/0.30.0 #1208
Merged
enhancement/general improvements and fixes for custom resource plugin integrations #1234
Merged
@thescientist13 thescientist13 mentioned this issue Jul 21, 2024
Merged
36 tasks
@thescientist13 thescientist13 mentioned this issue Aug 8, 2024
Merged
1 task
@thescientist13 thescientist13 moved this from 🔖 Ready to 🏗 In progress in [Greenwood] Phase 9 - Standards and Conventions Oct 7, 2024
@thescientist13 thescientist13 mentioned this issue Oct 7, 2024
Merged
12 tasks
@thescientist13 thescientist13 linked a pull request Oct 8, 2024 that will close this issue
feature/issue 1233 CSS Modules ™️ plugin #1285
Merged
12 tasks
@thescientist13 thescientist13 mentioned this issue Oct 8, 2024
Merged
3 tasks
@thescientist13 thescientist13 moved this from 🏗 In progress to 👀 In review in [Greenwood] Phase 9 - Standards and Conventions Oct 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@thescientist13 thescientist13

Labels
alpha.7 CLI documentation Greenwood specific docs feature New feature or request Plugins Greenwood Plugins v0.30.0
Projects
No open projects
[Greenwood] Phase 9 - Standards and Conventions
Status: ✅ Done
Milestone
1.0
1 participant
@thescientist13