real but not for real import attributes

CONTRIBUTING.md

@@ -119,7 +119,7 @@ For interactive components that would require client side interactivity, like ev
 ```
 
 ```js
-import styles from "./card.css?type=raw";
+import sheet from "./card.css" with { type: "css" };
 
 export default class Card extends HTMLElement {
   selectItem() {
@@ -142,10 +142,12 @@ export default class Card extends HTMLElement {
           <button>View Item Details</button>
         </div>
       `;
+
       this.attachShadow({ mode: "open" });
       this.shadowRoot.appendChild(template.content.cloneNode(true));
     }
 
+    this.shadowRoot.adoptedStyleSheets = [sheet];
     this.shadowRoot?.querySelector("button").addEventListener("click", this.selectItem.bind(this));
   }
 }

greenwood.config.js

@@ -4,6 +4,9 @@ import { greenwoodPluginCssModules } from "./plugin-css-modules.js";
 export default {
   prerender: true,
   plugins: [greenwoodPluginCssModules(), greenwoodPluginImportRaw()],
+  polyfills: {
+    importAttributes: ["css", "json"],
+  },
   markdown: {
     plugins: ["@mapbox/rehype-prism"],
   },

package.json

@@ -55,6 +55,7 @@
     "@storybook/web-components-vite": "^8.0.6",
     "@web/test-runner": "^0.18.1",
     "@web/test-runner-junit-reporter": "^0.7.1",
+    "acorn-import-attributes": "^1.9.5",
     "eslint": "^9.1.1",
     "eslint-config-prettier": "^9.1.0",
     "http-server": "^14.1.1",

src/components/capabilities/capabilities.js

@@ -1,5 +1,5 @@
-import styles from "./capabilities.css?type=raw";
-import theme from "../../styles/theme.css?type=raw";
+import sheet from "./capabilities.css" with { type: "css" };
+import themeSheet from "../../styles/theme.css" with { type: "css" };
 import api from "../../assets/api-routes.svg?type=raw";
 import ssg from "../../assets/build-ssg.svg?type=raw";
 import html from "../../assets/html.svg?type=raw";
@@ -30,10 +30,6 @@ export default class Capabilities extends HTMLElement {
     if (this.contentItems.length > 0) {
       template.innerHTML = `
         <div class="capabilities">
-          <style>
-            ${theme}
-            ${styles}
-          </style>
           <div class="container">
             <h2 class="heading">Go from zero to fullstack with web standards</h2>
 
@@ -66,6 +62,7 @@ export default class Capabilities extends HTMLElement {
 
       this.attachShadow({ mode: "open" });
       this.shadowRoot.appendChild(template.content.cloneNode(true));
+      this.shadowRoot.adoptedStyleSheets = [themeSheet, sheet];
       this.shadowRoot
         .querySelectorAll(".section")
         .forEach((item) => item.addEventListener("click", this.selectItem.bind(this)));

src/components/copy-to-clipboard/copy-to-clipboard.js

@@ -1,12 +1,9 @@
 import copy from "../../assets/copy-button.svg?type=raw";
-import styles from "./copy-to-clipboard.css?type=raw";
+import sheet from "./copy-to-clipboard.css" with { type: "css" };
 
 const template = document.createElement("template");
 
 template.innerHTML = `
-  <style>
-    ${styles}
-  </style>
   <button id="icon" title="Copy to clipboard">${copy}</button>
 `;
 
@@ -17,6 +14,8 @@ export default class CopyToClipboard extends HTMLElement {
       this.shadowRoot.appendChild(template.content.cloneNode(true));
     }
 
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+
     this.shadowRoot.getElementById("icon")?.addEventListener("click", () => {
       const contents = this.getAttribute("content") ?? undefined;