docs/issue 192 update storybook and CSS related greenwood plugins docs example refinement (#193)

Author: thescientist13

.storybook/main.js

@@ -1,6 +1,6 @@
-/** @type { import('@storybook/web-components-vite').StorybookConfig } */
 // had to add @rollup/rollup-linux-x64-gnu as an optional dep
 // https://github.com/vitejs/vite/discussions/15532
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [

src/pages/guides/ecosystem/storybook.md

@@ -184,7 +184,7 @@ In this example we are handling for CSS Module scripts:
           id.endsWith(".css") &&
           !id.endsWith(".module.css")
         ) {
-          // add .type so Constructable Stylesheets  are not precessed by Vite's default pipeline
+          // append .type to the end of Constructable Stylesheet file paths so that they are not automatically precessed by Vite's default pipeline
           return path.join(path.dirname(importer), `${id}.type`);
         }
       },
@@ -233,6 +233,7 @@ For example, if you're using Greenwood's [Raw Plugin](https://github.com/Project
   ```js
   import { defineConfig } from "vite";
   import fs from "fs/promises";
+  import path from 'path';
   // 1) import the greenwood plugin and lifecycle helpers
   import { greenwoodPluginImportRaw } from "@greenwood/plugin-import-raw";
   import { readAndMergeConfig } from "@greenwood/cli/src/lifecycles/config.js";
@@ -248,14 +249,25 @@ For example, if you're using Greenwood's [Raw Plugin](https://github.com/Project
 
   // 4) customize Vite
   function transformRawImports() {
+    const hint = "?type=raw";
+
     return {
       name: "transform-raw-imports",
       enforce: "pre",
+      resolveId: (id, importer) => {
+
+        if (
+          id.endsWith(hint)
+        ) {
+          // append .type to the end of .css file paths so they are not automatically precessed by Vite's default CSS pipeline
+          return path.join(path.dirname(importer), `${id.slice(0, id.indexOf(hint))}.type${hint}`);
+        }
+      },
       load: async (id) => {
-        if (id.endsWith("?type=raw")) {
-          const filename = id.slice(0, -9);
+        if (id.endsWith(hint)) {
+          const filename = id.slice(0, id.indexOf(`.type${hint}`));
           const contents = await fs.readFile(filename, "utf-8");
-          const response = await rawResource.intercept(null, null, new Response(contents));
+          const response = await rawResource.intercept(new URL(`file://${filename}`), null, new Response(contents));
           const body = await response.text();
 
           return body;

vite.config.js

@@ -30,7 +30,7 @@ function transformConstructableStylesheetsPlugin() {
         id.endsWith(".css") &&
         !id.endsWith(".module.css")
       ) {
-        // add .type so Constructable Stylesheets  are not precessed by Vite's default pipeline
+        // add .type so Constructable Stylesheets are not precessed by Vite's default pipeline
         return path.join(path.dirname(importer), `${id}.type`);
       }
     },
@@ -39,7 +39,7 @@ function transformConstructableStylesheetsPlugin() {
         const filename = id.slice(0, -5);
         const contents = await fs.readFile(filename, "utf-8");
         const url = new URL(`file://${id.replace(".type", "")}`);
-        // "coerce" native conststructable stylesheets into inline JS so Vite / Rollup do not complain
+        // "coerce" native constructable stylesheets into inline JS so Vite / Rollup do not complain
         const request = new Request(url, {
           headers: {
             Accept: "text/javascript",
@@ -55,14 +55,26 @@ function transformConstructableStylesheetsPlugin() {
 }
 
 function transformRawImports() {
+  const hint = "?type=raw";
+
   return {
     name: "transform-raw-imports",
     enforce: "pre",
+    resolveId: (id, importer) => {
+      if (id.endsWith(hint)) {
+        // append .type so .css file paths so they are not precessed by Vite's default CSS pipeline
+        return path.join(path.dirname(importer), `${id.slice(0, id.indexOf(hint))}.type${hint}`);
+      }
+    },
     load: async (id) => {
-      if (id.endsWith("?type=raw")) {
-        const filename = id.slice(0, -9);
+      if (id.endsWith(hint)) {
+        const filename = id.slice(0, id.indexOf(`.type${hint}`));
         const contents = await fs.readFile(filename, "utf-8");
-        const response = await rawResource.intercept(null, null, new Response(contents));
+        const response = await rawResource.intercept(
+          new URL(`file://${filename}`),
+          null,
+          new Response(contents),
+        );
         const body = await response.text();
 
         return body;