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.

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

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

Open
thescientist13 opened this issue Apr 3, 2024 · 0 comments
Assignees
Labels
enhancement New feature or request

Comments

@thescientist13
Copy link
Owner

thescientist13 commented Apr 3, 2024

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
@thescientist13 thescientist13 added the enhancement New feature or request label Apr 3, 2024
@thescientist13 thescientist13 changed the title convert CSS imports to use Import Attributes (CSS Modules) convert non-standard CSS imports to use Import Attributes (CSS Modules) Apr 3, 2024
@thescientist13 thescientist13 self-assigned this Apr 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant