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

Open
thescientist13 opened this issue May 18, 2024 · 0 comments · Fixed by #1234 · May be fixed by #1208
Open

CSS Modules ™️ plugin #1233

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

Comments

@thescientist13
Copy link
Member

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. documentation around only being useful for Light DOM use cases?
  2. should we shim / conform to Constructable Stylesheets API? This actually gets us the CSS rules 🤩 .
    Screenshot 2024-01-21 at 6 13 09 PM
  3. Any flexibility of the import usage API, e.g. 
    // hardcoded import
import styles from './something.module.css'

// vs
import myCss from './something.module.css'
  4. 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?)
@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
This was referenced May 18, 2024
Open
Merged
Draft
@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
Open
This was linked to pull requests Jun 22, 2024
release/0.30.0 #1208
Draft
enhancement/general improvements and fixes for custom resource plugin integrations #1234
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@thescientist13 thescientist13

Labels
alpha.5 CLI documentation Greenwood specific docs feature New feature or request Plugins Greenwood Plugins v0.30.0
Projects
[Greenwood] Phase 9 - Standards and Conventions
Status: 🔖 Ready
Milestone
1.0
1 participant
@thescientist13