diff --git a/eslint.config.js b/eslint.config.js index da8ea93f..1bc722f8 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -2,6 +2,17 @@ import eslintConfigPrettier from "eslint-config-prettier"; import babelParser from "@babel/eslint-parser"; export default [ + { + // https://github.com/eslint/eslint/discussions/18304#discussioncomment-9069706 + ignores: [ + ".greenwood/*", + "node_modules/*", + "public/*", + "reports/*", + "storybook-static/**", + "patches/**", + ], + }, { languageOptions: { parser: babelParser, @@ -18,14 +29,6 @@ export default [ node: true, }, }, - ignores: [ - ".greenwood/*", - "node_modules/*", - "public/*", - "reports/*", - "storybook-static/**", - "patches/**", - ], rules: { "comma-dangle": [2, "never"], "no-cond-assign": 2, diff --git a/package-lock.json b/package-lock.json index 5ce6f15e..c91fdf37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,8 +19,8 @@ "@babel/plugin-syntax-import-assertions": "^7.24.1", "@chromatic-com/storybook": "^1.3.1", "@esm-bundle/chai": "^4.3.4-fix.0", - "@greenwood/cli": "^0.30.0-alpha.4", - "@greenwood/plugin-import-raw": "^0.30.0-alpha.4", + "@greenwood/cli": "^0.30.0-alpha.5", + "@greenwood/plugin-import-raw": "^0.30.0-alpha.5", "@ls-lint/ls-lint": "^1.10.0", "@mapbox/rehype-prism": "^0.9.0", "@storybook/addon-essentials": "^8.0.6", @@ -2180,9 +2180,9 @@ "license": "MIT" }, "node_modules/@greenwood/cli": { - "version": "0.30.0-alpha.4", - "resolved": "https://registry.npmjs.org/@greenwood/cli/-/cli-0.30.0-alpha.4.tgz", - "integrity": "sha512-NYDoiR9fVz0HsF6JGKyWnYf4FUxj7zLSizXf0xLbyiGoD58MoTJ0COc/Gb2h0KKS2gIkOyPZ3mjMeaAQPtr/Rg==", + "version": "0.30.0-alpha.5", + "resolved": "https://registry.npmjs.org/@greenwood/cli/-/cli-0.30.0-alpha.5.tgz", + "integrity": "sha512-DKehMtT5hkErzkOO08lA2eXz2SvjC5o/gr7O7TdnJRg5mSl8aNfwxtkk1I2sgz/qXxm1TdIZm6kQcyz/j/53NA==", "dev": true, "dependencies": { "@rollup/plugin-commonjs": "^25.0.0", @@ -2217,9 +2217,9 @@ } }, "node_modules/@greenwood/plugin-import-raw": { - "version": "0.30.0-alpha.4", - "resolved": "https://registry.npmjs.org/@greenwood/plugin-import-raw/-/plugin-import-raw-0.30.0-alpha.4.tgz", - "integrity": "sha512-xwRS+bzn9Y2MyoyDqJuzeMy3vS1I/SYwOTeertmptmPvMzcMMgFagswvORnddWzA0smGBvYsEXqExBIOw5N5BA==", + "version": "0.30.0-alpha.5", + "resolved": "https://registry.npmjs.org/@greenwood/plugin-import-raw/-/plugin-import-raw-0.30.0-alpha.5.tgz", + "integrity": "sha512-oF/FWUUMGPYlSyBKEcIFN+5e0eAjWx119K5ZTFgVpqYmmN4g9+f28YoTknlxM8Pzjbi17P7ogaKfc5LyzaSFMw==", "dev": true, "peerDependencies": { "@greenwood/cli": "^0.4.0" diff --git a/package.json b/package.json index 84fa25e4..a856151c 100644 --- a/package.json +++ b/package.json @@ -43,8 +43,8 @@ "@babel/plugin-syntax-import-assertions": "^7.24.1", "@chromatic-com/storybook": "^1.3.1", "@esm-bundle/chai": "^4.3.4-fix.0", - "@greenwood/cli": "^0.30.0-alpha.4", - "@greenwood/plugin-import-raw": "^0.30.0-alpha.4", + "@greenwood/cli": "^0.30.0-alpha.5", + "@greenwood/plugin-import-raw": "^0.30.0-alpha.5", "@ls-lint/ls-lint": "^1.10.0", "@mapbox/rehype-prism": "^0.9.0", "@storybook/addon-essentials": "^8.0.6", diff --git a/patches/@greenwood+cli+0.30.0-alpha.5.patch b/patches/@greenwood+cli+0.30.0-alpha.5.patch new file mode 100644 index 00000000..d2e86687 --- /dev/null +++ b/patches/@greenwood+cli+0.30.0-alpha.5.patch @@ -0,0 +1,35 @@ +diff --git a/node_modules/@greenwood/cli/src/config/rollup.config.js b/node_modules/@greenwood/cli/src/config/rollup.config.js +index 1354e66..e50e2aa 100644 +--- a/node_modules/@greenwood/cli/src/config/rollup.config.js ++++ b/node_modules/@greenwood/cli/src/config/rollup.config.js +@@ -530,8 +530,8 @@ function greenwoodSyncImportAttributes(compilation) { + // since we can't do async work inside a sync AST operation + if (!asset.preBundled) { + const assetUrl = unbundledAssetsRefMapper[asset].sourceURL; +- const request = new Request(assetUrl, { headers: { 'Content-Type': 'text/css' } }); +- let response = new Response(unbundledAssetsRefMapper[asset].source); ++ const request = new Request(assetUrl, { headers: { 'Accept': 'text/css' } }); ++ let response = new Response(unbundledAssetsRefMapper[asset].source, { headers: { 'Content-Type': 'text/css' } }); + + for (const plugin of resourcePlugins) { + if (plugin.shouldPreIntercept && await plugin.shouldPreIntercept(assetUrl, request, response.clone())) { +diff --git a/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js b/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js +index d8409ea..27bfbce 100644 +--- a/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js ++++ b/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js +@@ -306,11 +306,13 @@ class StandardCssResource extends ResourceInterface { + }); + } + +- async shouldIntercept(url) { ++ async shouldIntercept(url, request, response) { + const { pathname } = url; + const ext = pathname.split('.').pop(); + +- return url.protocol === 'file:' && ext === this.extensions[0]; ++ return url.protocol === 'file:' ++ && ext === this.extensions[0] ++ && (response.headers.get('Content-Type')?.indexOf('text/css') >= 0 || request.headers.get('Accept')?.indexOf('text/javascript') >= 0); + } + + async intercept(url, request, response) { diff --git a/vite.config.js b/vite.config.js index ff59b45f..5fc733f0 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,8 +4,13 @@ import path from "path"; import { greenwoodPluginStandardCss } from "@greenwood/cli/src/plugins/resource/plugin-standard-css.js"; import { greenwoodPluginImportRaw } from "@greenwood/plugin-import-raw"; -const standardCssResource = greenwoodPluginStandardCss.provider({}); -const rawResource = greenwoodPluginImportRaw()[0].provider({}); +const compilation = { + context: { + projectDirectory: import.meta.url, + }, +}; +const standardCssResource = greenwoodPluginStandardCss.provider(compilation); +const rawResource = greenwoodPluginImportRaw()[0].provider(compilation); // Vite doesn't support import attributes :/ // https://github.com/vitejs/vite/pull/15654 @@ -16,7 +21,7 @@ const rawResource = greenwoodPluginImportRaw()[0].provider({}); // https://github.com/vitejs/vite/issues/15322#issuecomment-1858878697 function transformConstructableStylesheetsPlugin() { return { - name: "transform-css-module-scripts", + name: "transform-constructable-stylesheets", enforce: "pre", resolveId: (id, importer) => { if ( @@ -24,7 +29,7 @@ function transformConstructableStylesheetsPlugin() { id.endsWith(".css") && !id.endsWith(".module.css") ) { - // add .type so CSS modules are not precessed by the default pipeline + // add .type so Constructable Stylesheets are not precessed by Vite's default pipeline return path.join(path.dirname(importer), `${id}.type`); } }, @@ -32,7 +37,14 @@ function transformConstructableStylesheetsPlugin() { if (id.endsWith(".css.type")) { const filename = id.slice(0, -5); const contents = fs.readFileSync(filename, "utf-8"); - const response = await standardCssResource.intercept(null, null, new Response(contents)); + const url = new URL(`file://${id.replace(".type", "")}`); + // "coerce" native conststructable stylesheets into inline JS so Vite / Rollup do not complain + const request = new Request(url, { + headers: { + Accept: "text/javascript", + }, + }); + const response = await standardCssResource.intercept(url, request, new Response(contents)); const body = await response.text(); return body;