convert non-standard CSS imports to use Import Attributes (CSS Modules)

[thescientist13]

In the next version of Greenwood, the project will support import attributes natively for CSS and JSON, which will provide a standards based way to do what we are currently doing in the Card component

// before
import styles from './card.css';

export default class Card extends HTMLElement {

  connectedCallback() {
    if (!this.shadowRoot) {
      // ...

      template.innerHTML = `
        <style>
          ${styles}
        </style>
        <div>
          <!-- ... -->
        </div>
      `;
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
}

customElements.define('app-card', Card);

// after
import sheet from './card.css' with {type: 'css'};

export default class Card extends HTMLElement {

  connectedCallback() {
    if (!this.shadowRoot) {
      // ...

      template.innerHTML = `
        <div>
          <!-- ... -->
        </div>
      `;
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }

  this.shadowRoot.adoptedStyleSheets = [sheet];
}

customElements.define('app-card', Card);

With this new feature, we shouldn't need the extra Greenwood plugin either! 🎉

---

Not sure Vercel supports this yet, it only support 18.19.x

SyntaxError [Error]: Unexpected token 'with'
14:22:57.610 | at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:152:18)
14:22:57.610 | at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:298:14)
14:22:57.610 |  
14:22:57.610 | Node.js v18.19.1
14:22:57.634 | Error: Command "node --loader ./node_modules/@greenwood/cli/src/loader.js ./node_modules/.bin/greenwood build" exited with 1
14:22:57.851