From 6dd2ddd3c11e3e3c28c71b3d7ecfe86e4ce0dfc2 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 20 Jul 2024 20:48:15 -0400
Subject: [PATCH] patching with greenwood super css

---
 greenwood.config.js                         |   4 +-
 patches/@greenwood+cli+0.30.0-alpha.4.patch | 273 ++++++++------------
 postcss.config.cjs                          |   1 -
 postcss.config.mjs                          |   1 -
 4 files changed, 111 insertions(+), 168 deletions(-)

diff --git a/greenwood.config.js b/greenwood.config.js
index a1c77fc..0fa2665 100644
--- a/greenwood.config.js
+++ b/greenwood.config.js
@@ -1,7 +1,7 @@
 import { greenwoodPluginFontAwesome } from '@analogstudiosri/greenwood-plugin-font-awesome';
 import { greenwoodPluginGoogleAnalytics } from '@greenwood/plugin-google-analytics';
 import { greenwoodPluginTypeScript } from '@greenwood/plugin-typescript';
-// import { greenwoodPluginPostCss } from '@greenwood/plugin-postcss';
+import { greenwoodPluginPostCss } from '@greenwood/plugin-postcss';
 import analyze from 'rollup-plugin-analyzer';
 import { visualizer } from 'rollup-plugin-visualizer';
 import dynamicImportVariables from '@rollup/plugin-dynamic-import-vars';
@@ -14,7 +14,7 @@ export default {
     }
   },
   plugins: [
-    // greenwoodPluginPostCss(),
+    greenwoodPluginPostCss(),
     greenwoodPluginFontAwesome(),
     greenwoodPluginTypeScript(),
     // https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
diff --git a/patches/@greenwood+cli+0.30.0-alpha.4.patch b/patches/@greenwood+cli+0.30.0-alpha.4.patch
index a700183..057367b 100644
--- a/patches/@greenwood+cli+0.30.0-alpha.4.patch
+++ b/patches/@greenwood+cli+0.30.0-alpha.4.patch
@@ -1,35 +1,58 @@
 diff --git a/node_modules/@greenwood/cli/src/config/rollup.config.js b/node_modules/@greenwood/cli/src/config/rollup.config.js
-index 7771d11..9f338e1 100644
+index 7771d11..5d48e0c 100644
 --- a/node_modules/@greenwood/cli/src/config/rollup.config.js
 +++ b/node_modules/@greenwood/cli/src/config/rollup.config.js
-@@ -21,7 +21,7 @@ function greenwoodResourceLoader (compilation) {
+@@ -12,7 +12,9 @@ function cleanRollupId(id) {
+   return id.replace('\x00', '').replace('?commonjs-proxy', '');
+ }
+ 
+-function greenwoodResourceLoader (compilation) {
++function greenwoodResourceLoader (compilation, browser = false) {
++  // ConstructableStylesheets, JSON Modules
++  const externalizedResources = ['css', 'json'];
+   const resourcePlugins = compilation.config.plugins.filter((plugin) => {
+     return plugin.type === 'resource';
+   }).map((plugin) => {
+@@ -21,16 +23,29 @@ function greenwoodResourceLoader (compilation) {
  
    return {
      name: 'greenwood-resource-loader',
 -    async resolveId(id) {
+-      const normalizedId = cleanRollupId(id); // idUrl.pathname;
+-      const { projectDirectory, userWorkspace } = compilation.context;
+-
+-      if (normalizedId.startsWith('.') && !normalizedId.startsWith(projectDirectory.pathname)) {
 +    async resolveId(id, importer) {
-       const normalizedId = cleanRollupId(id); // idUrl.pathname;
-       const { projectDirectory, userWorkspace } = compilation.context;
- 
-@@ -29,8 +29,15 @@ function greenwoodResourceLoader (compilation) {
++      const normalizedId = cleanRollupId(id);
++      const { userWorkspace } = compilation.context;
++
++      // check for non bare paths and resolve them to the user's workspace
++      // or Greenwood's scratch dir, like when bundling inline <script> tags
++      if (normalizedId.startsWith('.')) {
++        const importerUrl = new URL(normalizedId, `file://${importer}`);
++        const extension = importerUrl.pathname.split('.').pop();
++        const external = externalizedResources.includes(extension) && browser && !importerUrl.searchParams.has('type');
++        const isUserWorkspaceUrl = importerUrl.pathname.startsWith(userWorkspace.pathname);
          const prefix = normalizedId.startsWith('..') ? './' : '';
-         const userWorkspaceUrl = new URL(`${prefix}${normalizedId.replace(/\.\.\//g, '')}`, userWorkspace);
- 
+-        const userWorkspaceUrl = new URL(`${prefix}${normalizedId.replace(/\.\.\//g, '')}`, userWorkspace);
+-
 -        if (await checkResourceExists(userWorkspaceUrl)) {
 -          return normalizePathnameForWindows(userWorkspaceUrl);
-+        // console.log('1111', { id, importer, userWorkspaceUrl });
-+        if (await checkResourceExists(new URL(id, `file://${importer}`))) {
-+          const external = userWorkspaceUrl.pathname.endsWith('.css');
-+          // console.log({ external });
++        // if its not in the users workspace, we clean up the dot-dots and check that against the user's workspace
++        const resolvedUrl = isUserWorkspaceUrl
++          ? importerUrl
++          : new URL(`${prefix}${normalizedId.replace(/\.\.\//g, '')}`, userWorkspace);
 +
++        // console.log({ normalizedId, importerUrl, external });
++        if (await checkResourceExists(resolvedUrl)) {
 +          return {
-+            id: normalizePathnameForWindows(new URL(id, `file://${importer}`)),
++            id: normalizePathnameForWindows(resolvedUrl),
 +            external
 +          };
          }
        }
      },
-@@ -364,6 +371,7 @@ function greenwoodImportMetaUrl(compilation) {
+@@ -364,6 +379,7 @@ function greenwoodImportMetaUrl(compilation) {
        };
      },
  
@@ -37,7 +60,7 @@ index 7771d11..9f338e1 100644
      generateBundle(options, bundles) {
        for (const bundle in bundles) {
          const bundleExtension = bundle.split('.').pop();
-@@ -398,6 +406,180 @@ function greenwoodImportMetaUrl(compilation) {
+@@ -398,6 +414,120 @@ function greenwoodImportMetaUrl(compilation) {
    };
  }
  
@@ -45,7 +68,7 @@ index 7771d11..9f338e1 100644
 +// to corresponding static bundles, instead of being bundled and shipped as JavaScript
 +// e.g. import theme from './theme.css' with { type: 'css' }
 +//   -> import theme from './theme.ab345dcc.css' with { type: 'css' }
-+// 
++//
 +// this includes:
 +// - replace all instances of assert with with (until Rollup supports with keyword)
 +// - sync externalized import attribute paths with bundled CSS paths
@@ -55,94 +78,35 @@ index 7771d11..9f338e1 100644
 +  return {
 +    name: 'greenwood-sync-import-attributes',
 +
-+    // transform doesn't have assert keyword at this point, so we just want inject bundle ref for one-off routes
-+    // transform(code, id) {
-+    //   console.log('@@@@ sync import attributes#transform', id);
-+    //   const transformUrl = new URL(`file://${id}`);
-+
-+    //   if (transformUrl.pathname.endsWith('.js')) {
-+    //     const ast = this.parse(code);
-+    //     const transformedCode = code;
-+
-+    //     walk.simple(ast, {
-+    //       // TOOO should really get import attributes through the actual AST, not sure if possible though...
-+    //       ImportDeclaration(node) {
-+    //         console.log('ImportDeclaration ########', node.source.raw);
-+    //         const statement = code.slice(node.start, node.end);
-+    //         const { value } = node.source;
-+    //         console.log({ value, statement });
-+
-+    //         // TODO will this also happen to module.css, need to filter somehow?
-+    //         if (value.endsWith('.css')) {
-+    //           // Rollup currently emits externals with assert keyword
-+    //           let preBundled = false;
-+    //           // transformedCode = bundles[bundle].code.replace(/assert{/g, 'with{');
-+
-+    //           // check for app level assets, like say a shared theme.css
-+    //           compilation.resources.forEach((resource, key) => {
-+    //             if (resource.sourcePathURL.pathname === new URL(value, compilation.context.projectDirectory).pathname) {
-+    //               // console.log('$$$ found pre-bundled CSS!!!', resource.optimizedFileName);
-+    //               // bundles[bundle].code = bundles[bundle].code.replace(value, `/${resource.optimizedFileName}`);
-+    //               preBundled = true;
-+    //             }
-+    //           });
-+
-+    //           // otherwise emit "one-offs" as Rollup assets
-+    //           if (!preBundled) {
-+    //             console.log('#### not pre bundled', { value, id });
-+    //             const source = fs.readFileSync(new URL(value, compilation.context.projectDirectory), 'utf-8')
-+    //             // TODO otherwise emit "one-offs" as Rollup assets
-+    //             const type = 'asset';
-+    //             const emitConfig = { type, name: value.split('/').pop(), source };
-+    //             const ref = that.emitFile(emitConfig);
-+    //             const importRef = `import.meta.ROLLUP_FILE_URL_${ref}`;
-+
-+    //             console.log({ importRef });
-+    //             transformedCode = transformedCode.replace(value, `/${importRef}`);
-+    //             // modifiedCode = code
-+    //             //   .replace(`'${relativeAssetPath}'`, importRef)
-+    //             //   .replace(`"${relativeAssetPath}"`, importRef);   
-+    //           }
-+    //         }
-+    //       }
-+    //     });
-+
-+    //     return {
-+    //       code: transformedCode,
-+    //       map: null
-+    //     };
-+    //   }
-+    // },
-+
 +    generateBundle(options, bundles) {
 +      // TODO do we need to run all resource lifecycles  here?
 +      const that = this;
 +      for (const bundle in bundles) {
-+        // console.log({ bundle });
++        //  console.log({ bundle });
 +
-+        if(!bundle.endsWith('.map')) {
-+          console.log('sync import attributes', { bundle });
++        if (!bundle.endsWith('.map')) {
++          // console.log('sync import attributes', { bundle });
 +          const { code } = bundles[bundle];
 +          const ast = this.parse(code);
-+    
++
 +          walk.simple(ast, {
 +            // TOOO should really get import attributes through the actual AST, not sure if possible though...
 +            ImportDeclaration(node) {
-+              console.log('ImportDeclaration ########', node.source.raw);
-+              const statement = code.slice(node.start, node.end);
++              // console.log('ImportDeclaration ########', node.source.raw);
++              // const statement = code.slice(node.start, node.end);
 +              const { value } = node.source;
-+              console.log({ value, statement });
++              // console.log({ value, statement });
 +
 +              // TODO will this also happen to module.css, need to filter somehow?
-+              if (value.endsWith('.css')) {
++              if (value.endsWith('.css') || value.endsWith('.json')) {
 +                // Rollup currently emits externals with assert keyword
 +                let preBundled = false;
 +                bundles[bundle].code = bundles[bundle].code.replace(/assert{/g, 'with{');
 +
 +                // check for app level assets, like say a shared theme.css
-+                compilation.resources.forEach((resource, key) => {
++                compilation.resources.forEach((resource) => {
 +                  if (resource.sourcePathURL.pathname === new URL(value, compilation.context.projectDirectory).pathname) {
-+                    // console.log('$$$ found pre-bundled CSS!!!', resource.optimizedFileName);
++                    //  console.log('$$$ found pre-bundled CSS!!!', resource.optimizedFileName);
 +                    bundles[bundle].code = bundles[bundle].code.replace(value, `/${resource.optimizedFileName}`);
 +                    preBundled = true;
 +                  }
@@ -150,20 +114,19 @@ index 7771d11..9f338e1 100644
 +
 +                // otherwise emit "one-offs" as Rollup assets
 +                if (!preBundled) {
-+                  console.log('#### not pre bundled', { value, bundle });
-+                  const source = fs.readFileSync(new URL(value, compilation.context.projectDirectory), 'utf-8')
-+                  // TODO otherwise emit "one-offs" as Rollup assets
++                  // console.log('#### not pre bundled', { value, bundle });
++                  const source = fs.readFileSync(new URL(value, compilation.context.projectDirectory), 'utf-8');
 +                  const type = 'asset';
 +                  const emitConfig = { type, name: value.split('/').pop(), source, needsCodeReference: true };
 +                  const ref = that.emitFile(emitConfig);
 +                  const importRef = `import.meta.ROLLUP_ASSET_URL_${ref}`;
 +
-+                  console.log({ importRef });
++                  // console.log({ importRef });
 +                  bundles[bundle].code = bundles[bundle].code.replace(value, `/${importRef}`);
-+                  if(!unbundledAssetsRefMapper[emitConfig.name]) {
++                  if (!unbundledAssetsRefMapper[emitConfig.name]) {
 +                    unbundledAssetsRefMapper[emitConfig.name] = {
 +                      importers: [],
-+                      importRefs: [],
++                      importRefs: []
 +                    };
 +                  }
 +
@@ -183,73 +146,72 @@ index 7771d11..9f338e1 100644
 +    // since it seems that Rollup will not do it after the bundling hook
 +    // https://github.com/rollup/rollup/blob/v3.29.4/docs/plugin-development/index.md#generatebundle
 +    writeBundle(options, bundles) {
-+      console.log('WRITE BUNDLE', { unbundledAssetsRefMapper });
-+      for(const asset in unbundledAssetsRefMapper) {
-+        console.log({ asset });
-+        const ext = asset.split('.').pop();
-+        const key = asset.replace(`.${ext}`, '');
++      // console.log('WRITE BUNDLE', { unbundledAssetsRefMapper });
++      for (const asset in unbundledAssetsRefMapper) {
++        // console.log({ asset });
++        // const ext = asset.split('.').pop();
++        // const key = asset.replace(`.${ext}`, '');
 +
 +        for (const bundle in bundles) {
-+          const { name, fileName } = bundles[bundle];
++          const { fileName } = bundles[bundle];
++          const hash = fileName.split('.')[fileName.split('.').length - 2];
 +
 +          // console.log(bundles[bundle])
-+          console.log('CHECKING....', { bundle, fileName, name, key })
-+
-+          if(bundle?.startsWith(`assets/${key}`)) {
-+            console.log('MONEY!!!!!!', unbundledAssetsRefMapper[asset], fileName);
++          // console.log('CHECKING....', { bundle, fileName, name, key });
 +
++          if (fileName.replace(`.${hash}`, '') === asset) {
++            // console.log('MONEY!!!!!!', unbundledAssetsRefMapper[asset], fileName);
 +            unbundledAssetsRefMapper[asset].importers.forEach((importer, idx) => {
 +              let contents = fs.readFileSync(new URL(`./${importer}`, compilation.context.outputDir), 'utf-8');
 +
 +              contents = contents.replace(unbundledAssetsRefMapper[asset].importRefs[idx], fileName);
-+  
-+              fs.writeFileSync(new URL(`./${importer}`, compilation.context.outputDir), contents)
-+            })
++
++              fs.writeFileSync(new URL(`./${importer}`, compilation.context.outputDir), contents);
++            });
 +          }
 +        }
-+        console.log('====================')
++        // console.log('====================');
 +      }
 +    }
-+  }
-+  
++  };
++
 +}
 +
 +// TODO should rename this to something like getRollupConfigForBrowser
  const getRollupConfigForScriptResources = async (compilation) => {
    const { outputDir } = compilation.context;
    const input = [...compilation.resources.values()]
-@@ -421,6 +603,7 @@ const getRollupConfigForScriptResources = async (compilation) => {
+@@ -416,11 +546,13 @@ const getRollupConfigForScriptResources = async (compilation) => {
+       dir: normalizePathnameForWindows(outputDir),
+       entryFileNames: '[name].[hash].js',
+       chunkFileNames: '[name].[hash].js',
++      assetFileNames: '[name].[hash].[ext]',
+       sourcemap: true
+     },
      plugins: [
-       greenwoodResourceLoader(compilation),
+-      greenwoodResourceLoader(compilation),
++      greenwoodResourceLoader(compilation, true),
        greenwoodSyncPageResourceBundlesPlugin(compilation),
 +      greenwoodSyncImportAttributes(compilation),
        greenwoodImportMetaUrl(compilation),
        ...customRollupPlugins
      ],
 diff --git a/node_modules/@greenwood/cli/src/lifecycles/bundle.js b/node_modules/@greenwood/cli/src/lifecycles/bundle.js
-index 21636a9..b1b39a7 100644
+index 21636a9..f3b814b 100644
 --- a/node_modules/@greenwood/cli/src/lifecycles/bundle.js
 +++ b/node_modules/@greenwood/cli/src/lifecycles/bundle.js
-@@ -105,7 +105,7 @@ async function optimizeStaticPages(compilation, plugins) {
-       }
- 
-       // clean up optimization markers
--      const body = (await response.text()).replace(/data-gwd-opt=".*[a-z]"/g, '');
-+      const body = (await response.text()).replace(/data-gwd-opt=".*?[a-z]"/g, '');
- 
-       await fs.writeFile(new URL(`.${outputPath}`, outputDir), body);
-     })
 @@ -353,10 +353,12 @@ const bundleCompilation = async (compilation) => {
  
        console.info('bundling static assets...');
  
 +      // need styles bundled first for usage with import attributes syncing in Rollup
-+      await bundleStyleResources(compilation, optimizeResourcePlugins)
++      await bundleStyleResources(compilation, optimizeResourcePlugins);
 +
        await Promise.all([
          await bundleApiRoutes(compilation),
-         await bundleScriptResources(compilation),
+-        await bundleScriptResources(compilation),
 -        await bundleStyleResources(compilation, optimizeResourcePlugins)
++        await bundleScriptResources(compilation)
        ]);
  
        // bundleSsrPages depends on bundleScriptResources having run first
@@ -266,10 +228,10 @@ index 657ab4e..792f43c 100644
        scratchDir: new URL(`file://${process.cwd()}/.greenwood/`)
      },
 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 b0cdbcb..deace8b 100644
+index b0cdbcb..d8409ea 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
-@@ -49,23 +49,27 @@ function bundleCss(body, url, compilation) {
+@@ -49,23 +49,26 @@ function bundleCss(body, url, compilation) {
            barePath = barePath.replace('/', '');
          }
  
@@ -279,27 +241,24 @@ index b0cdbcb..deace8b 100644
            : new URL(`./${barePath}`, userWorkspace);
  
          if (fs.existsSync(locationUrl)) {
++          const isDev = process.env.__GWD_COMMAND__ === 'develop'; // eslint-disable-line no-underscore-dangle
            const hash = hashString(fs.readFileSync(locationUrl, 'utf-8'));
            const ext = barePath.split('.').pop();
 -          const hashedRoot = barePath.replace(`.${ext}`, `.${hash}.${ext}`);
--
++          const hashedRoot = isDev ? barePath : barePath.replace(`.${ext}`, `.${hash}.${ext}`);
+ 
 -          fs.mkdirSync(new URL(`./${path.dirname(barePath)}/`, outputDir), {
 -            recursive: true
 -          });
--
++          if (!isDev) {
++            fs.mkdirSync(new URL(`./${path.dirname(hashedRoot)}/`, outputDir), {
++              recursive: true
++            });
+ 
 -          fs.promises.copyFile(
 -            locationUrl,
 -            new URL(`./${hashedRoot}`, outputDir)
 -          );
-+          const hashedRoot = process.env.__GWD_COMMAND__ === 'develop'
-+            ? barePath
-+            : barePath.replace(`.${ext}`, `.${hash}.${ext}`)
-+
-+          if (process.env.__GWD_COMMAND__ !== 'develop') {
-+            fs.mkdirSync(new URL(`./${path.dirname(hashedRoot)}/`, outputDir), {
-+              recursive: true
-+            });
-+
 +            fs.promises.copyFile(
 +              locationUrl,
 +              new URL(`./${hashedRoot}`, outputDir)
@@ -308,11 +267,13 @@ index b0cdbcb..deace8b 100644
  
            optimizedCss += `url('${basePath}${hashedRoot}')`;
          } else {
-@@ -304,39 +308,42 @@ class StandardCssResource extends ResourceInterface {
+@@ -303,39 +306,25 @@ class StandardCssResource extends ResourceInterface {
+     });
    }
  
-   async shouldIntercept(url, request) {
+-  async shouldIntercept(url, request) {
 -    const { pathname, searchParams } = url;
++  async shouldIntercept(url) {
 +    const { pathname } = url;
      const ext = pathname.split('.').pop();
  
@@ -323,17 +284,15 @@ index b0cdbcb..deace8b 100644
    async intercept(url, request, response) {
 -    const contents = (await response.text()).replace(/\r?\n|\r/g, ' ').replace(/\\/g, '\\\\');
 -    const body = `const sheet = new CSSStyleSheet();sheet.replaceSync(\`${contents}\`);export default sheet;`;
-+    let body = bundleCss(await response.text(), url, this.compilation);
-+    let headers = {};
- 
+-
 -    return new Response(body, {
 -      headers: {
 -        'Content-Type': 'text/javascript'
 -      }
 -    });
 -  }
-+    if (request.headers.get('Accept')?.indexOf('text/javascript') >= 0 && !url.searchParams.has('type')) {
-+      const contents = (body).replace(/\r?\n|\r/g, ' ').replace(/\\/g, '\\\\');
++    let body = bundleCss(await response.text(), url, this.compilation);
++    let headers = {};
  
 -  async shouldOptimize(url, response) {
 -    const { protocol, pathname, searchParams } = url;
@@ -341,35 +300,21 @@ index b0cdbcb..deace8b 100644
 -      && protocol === 'file:'
 -      && response.headers.get('Content-Type').indexOf(this.contentType) >= 0
 -      && searchParams.get('type') !== 'css';
-+      body = `const sheet = new CSSStyleSheet();sheet.replaceSync(\`${contents}\`);export default sheet;`;
-+      headers['Content-Type'] = 'text/javascript';
-+    }
++    if (request.headers.get('Accept')?.indexOf('text/javascript') >= 0 && !url.searchParams.has('type')) {
++      const contents = body.replace(/\r?\n|\r/g, ' ').replace(/\\/g, '\\\\');
  
 -    return this.compilation.config.optimization !== 'none' && isValidCss;
-+    return new Response(body, { headers });
-   }
- 
+-  }
+-
 -  async optimize(url, response) {
 -    const body = await response.text();
 -    const optimizedBody = bundleCss(body, url, this.compilation);
-+  // async shouldOptimize(url, response) {
-+  //   const { protocol, pathname, searchParams } = url;
-+  //   const isValidCss = pathname.split('.').pop() === this.extensions[0]
-+  //     && protocol === 'file:'
-+  //     && response.headers.get('Content-Type').indexOf(this.contentType) >= 0
-+  //     && searchParams.get('type') !== 'css';
++      body = `const sheet = new CSSStyleSheet();sheet.replaceSync(\`${contents}\`);export default sheet;`;
++      headers['Content-Type'] = 'text/javascript';
++    }
  
 -    return new Response(optimizedBody);
--  }
-+  //   return this.compilation.config.optimization !== 'none' && isValidCss;
-+  // }
-+
-+  // async optimize(url, response) {
-+  //   const body = await response.text();
-+  //   const optimizedBody = bundleCss(body, url, this.compilation);
-+
-+  //   return new Response(optimizedBody);
-+  // }
++    return new Response(body, { headers });
+   }
  }
  
- const greenwoodPluginStandardCss = {
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 9b6a503..80bcdda 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: [
-    require('postcss-import'),
     require('postcss-nested')
   ]
 };
\ No newline at end of file
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 0fc70d7..0b5e170 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -3,7 +3,6 @@
 // https://github.com/ProjectEvergreen/greenwood/discussions/1002
 export default {
   plugins: [
-    (await import('postcss-import')).default,
     (await import('postcss-nested')).default
   ]
 };
\ No newline at end of file