CSS Modules (#11)

.ls-lint.yml

@@ -1,5 +1,6 @@
 ls:
   .config.js: kebabcase
+  .module.css: kebabcase
   .spec.js: kebabcase
   .stories.js: kebabcase
   .js: kebabcase

.storybook/main.js

@@ -1,4 +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
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@chromatic-com/storybook"],

greenwood.config.js

@@ -1,6 +1,7 @@
 import { greenwoodPluginImportRaw } from "@greenwood/plugin-import-raw";
+import { greenwoodPluginCssModules } from "./plugin-css-modules.js";
 
 export default {
   prerender: true,
-  plugins: [greenwoodPluginImportRaw()],
+  plugins: [greenwoodPluginImportRaw(), greenwoodPluginCssModules()],
 };

package.json

@@ -67,6 +67,9 @@
     "stylelint-prettier": "^5.0.0",
     "vite": "^5.2.8"
   },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.17.2"
+  },
   "lint-staged": {
     "*.js": "npm run lint:js",
     "*.css": "npm run lint:css",

patches/@greenwood+cli+0.30.0-alpha.2.patch

@@ -1,5 +1,157 @@
+diff --git a/node_modules/@greenwood/cli/src/config/rollup.config.js b/node_modules/@greenwood/cli/src/config/rollup.config.js
+index 73ddb24..14d2467 100644
+--- a/node_modules/@greenwood/cli/src/config/rollup.config.js
++++ b/node_modules/@greenwood/cli/src/config/rollup.config.js
+@@ -44,6 +44,7 @@ function greenwoodResourceLoader (compilation) {
+       };
+
+       // filter first for any bare specifiers
++      // TODO test - if (await checkResourceExists(idUrl)) {
+       if (await checkResourceExists(idUrl) && extension !== 'js') {
+         for (const plugin of resourcePlugins) {
+           if (plugin.shouldResolve && await plugin.shouldResolve(idUrl)) {
+@@ -74,6 +75,12 @@ function greenwoodResourceLoader (compilation) {
+           }
+         }
+
++        for (const plugin of resourcePlugins) {
++          if (plugin.shouldOptimize && await plugin.shouldOptimize(idUrl, response.clone())) {
++            response = await plugin.optimize(idUrl, response.clone());
++          }
++        }
++
+         return await response.text();
+       }
+     }
+diff --git a/node_modules/@greenwood/cli/src/lib/resource-utils.js b/node_modules/@greenwood/cli/src/lib/resource-utils.js
+index a08cd9c..bd993b5 100644
+--- a/node_modules/@greenwood/cli/src/lib/resource-utils.js
++++ b/node_modules/@greenwood/cli/src/lib/resource-utils.js
+@@ -89,10 +89,16 @@ async function checkResourceExists(url) {
+ // * and a nested path in the template - ../../styles/theme.css
+ // so will get resolved as `${rootUrl}/styles/theme.css`
+ async function resolveForRelativeUrl(url, rootUrl) {
++  // console.log('resolveForRelativeUrl', url, rootUrl)
+   const search = url.search || '';
+   let reducedUrl;
+
+-  if (await checkResourceExists(new URL(`.${url.pathname}`, rootUrl))) {
++  // TODO validate we still need this
++  if(!rootUrl) {
++    return url;
++  }
++
++  if (url.protocol !== 'file:' && await checkResourceExists(new URL(`.${url.pathname}`, rootUrl))) {
+     return new URL(`.${url.pathname}${search}`, rootUrl);
+   }
+
+diff --git a/node_modules/@greenwood/cli/src/lifecycles/serve.js b/node_modules/@greenwood/cli/src/lifecycles/serve.js
+index 6201ea8..855c3fd 100644
+--- a/node_modules/@greenwood/cli/src/lifecycles/serve.js
++++ b/node_modules/@greenwood/cli/src/lifecycles/serve.js
+@@ -70,7 +70,7 @@ async function getDevServer(compilation) {
+           const merged = mergeResponse(response.clone(), current.clone());
+
+           response = merged;
+-          break;
++          // break;
+         }
+       }
+
+diff --git a/node_modules/@greenwood/cli/src/loader.js b/node_modules/@greenwood/cli/src/loader.js
+index 5d347bc..ea11358 100644
+--- a/node_modules/@greenwood/cli/src/loader.js
++++ b/node_modules/@greenwood/cli/src/loader.js
+@@ -1,42 +1,63 @@
+ import { readAndMergeConfig as initConfig } from './lifecycles/config.js';
++import { mergeResponse } from './lib/resource-utils.js';
+
+ const config = await initConfig();
+-const resourcePlugins = config.plugins.filter(plugin => plugin.type === 'resource').map(plugin => plugin.provider({
+-  context: {
+-    projectDirectory: new URL(`file://${process.cwd()}`)
+-  },
+-  config: {
+-    devServer: {}
+-  },
+-  graph: []
+-}));
+-
+-async function getCustomLoaderResponse(url, checkOnly = false) {
++const resourcePlugins = config.plugins
++  .filter(plugin => plugin.type === 'resource')
++  .filter(plugin => plugin.name !== 'plugin-node-modules:resource')
++  .filter(plugin => plugin.name !== 'plugin-user-workspace')
++  .map(plugin => plugin.provider({
++    context: {
++      projectDirectory: new URL(`file://${process.cwd()}/`),
++      scratchDir: new URL(`file://${process.cwd()}/.greenwood/`)
++    },
++    config: {
++      devServer: {}
++    },
++    graph: []
++  }));
++
++async function getCustomLoaderResponse(initUrl, checkOnly = false) {
++  // console.log('CUSTOM LOADER RESPONSE', { initUrl })
+   const headers = {
+     'Accept': 'text/javascript',
+     'Sec-Fetch-Dest': 'empty'
+   };
+-  const request = new Request(url, { headers });
+   const initResponse = new Response('');
++  let request = new Request(initUrl, { headers });
++  let url = initUrl;
+   let response = initResponse.clone();
+   let shouldHandle = false;
+
+   for (const plugin of resourcePlugins) {
+-    if (plugin.shouldServe && await plugin.shouldServe(url, request)) {
++    if (initUrl.protocol === 'file:' && plugin.shouldResolve && await plugin.shouldResolve(initUrl, request)) {
+       shouldHandle = true;
+
+       if (!checkOnly) {
+-        response = await plugin.serve(url, request);
++        // request = await plugin.resolve(url, request);
++        url =  new URL((await plugin.resolve(initUrl, request)).url);
++        // console.log('checking....', { url });
+       }
+     }
+   }
+
++  for (const plugin of resourcePlugins) {
++    if (plugin.shouldServe && await plugin.shouldServe(initUrl, request)) {
++      shouldHandle = true;
++
++      if (!checkOnly) {
++        response = mergeResponse(response, await plugin.serve(initUrl, request));
++      }
++    }
++  }
++
++  // TODO confirm we need mergeResponse
+   for (const plugin of resourcePlugins) {
+     if (plugin.shouldPreIntercept && await plugin.shouldPreIntercept(url, request, response.clone())) {
+       shouldHandle = true;
+
+       if (!checkOnly) {
+-        response = await plugin.preIntercept(url, request, response.clone());
++        response = mergeResponse(response, await plugin.preIntercept(url, request, response.clone()));
+       }
+     }
+
+@@ -44,7 +65,7 @@ async function getCustomLoaderResponse(url, checkOnly = false) {
+       shouldHandle = true;
+
+       if (!checkOnly) {
+-        response = await plugin.intercept(url, request, response.clone());
++        response = mergeResponse(response, await plugin.intercept(url, 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 64c1ba0..d1cc0fb 100644
+index 64c1ba0..6e14cd4 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
 @@ -88,6 +88,7 @@ function bundleCss(body, url, compilation) {
@@ -18,3 +170,16 @@ index 64c1ba0..d1cc0fb 100644
                optimizedCss += ')';
                break;
              default:
+@@ -265,10 +267,12 @@ class StandardCssResource extends ResourceInterface {
+     const { pathname, searchParams } = url;
+     const ext = pathname.split('.').pop();
+
++    // TODO how to make sure this isn't clashing with other CSS in JS types...
+     return url.protocol === 'file:' && ext === this.extensions[0] && request.headers.get('Accept')?.indexOf('text/javascript') >= 0 && !searchParams.has('type');
+   }
+
+   async intercept(url, request, response) {
++    // console.log('INTERCEPT', { url });
+     const contents = (await response.text()).replace(/\r?\n|\r/g, ' ').replace(/\\/g, '\\\\');
+     const body = `const sheet = new CSSStyleSheet();sheet.replaceSync(\`${contents}\`);export default sheet;`;
+