From b233f0697a006fb68a8934bc2aaa988dc55d8d20 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Wed, 12 Mar 2025 22:17:29 -0400 Subject: [PATCH 1/2] update storybook and CSS related greenwood plugins docs example refinement --- .storybook/main.js | 2 +- src/pages/guides/ecosystem/storybook.md | 19 ++++++++++++++++--- vite.config.js | 22 +++++++++++++++++----- 3 files changed, 34 insertions(+), 9 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index e0948259..1a6c1406 100644 --- a/.storybook/main.js +++ b/.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: [ diff --git a/src/pages/guides/ecosystem/storybook.md b/src/pages/guides/ecosystem/storybook.md index 96e36cdd..36ae78d0 100644 --- a/src/pages/guides/ecosystem/storybook.md +++ b/src/pages/guides/ecosystem/storybook.md @@ -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 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; @@ -264,6 +276,7 @@ For example, if you're using Greenwood's [Raw Plugin](https://github.com/Project }; } + export default defineConfig({ // 5) add it the plugins option plugins: [transformRawImports()], diff --git a/vite.config.js b/vite.config.js index 0cb00af9..93ae9264 100644 --- a/vite.config.js +++ b/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; From 0ebbcd88acaff06b16f0068b922505e77bf63ace Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Wed, 19 Mar 2025 21:15:25 -0400 Subject: [PATCH 2/2] grammar --- src/pages/guides/ecosystem/storybook.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/guides/ecosystem/storybook.md b/src/pages/guides/ecosystem/storybook.md index 36ae78d0..86e9fa2b 100644 --- a/src/pages/guides/ecosystem/storybook.md +++ b/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`); } }, @@ -259,7 +259,7 @@ For example, if you're using Greenwood's [Raw Plugin](https://github.com/Project if ( id.endsWith(hint) ) { - // append .type so .css file paths so they are not precessed by Vite's default CSS pipeline + // 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}`); } }, @@ -276,7 +276,6 @@ For example, if you're using Greenwood's [Raw Plugin](https://github.com/Project }; } - export default defineConfig({ // 5) add it the plugins option plugins: [transformRawImports()],