From 704f2d7250a4d6e41802de10743e1f5831c21cb5 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Wed, 30 Jun 2021 13:39:55 -0400
Subject: [PATCH 01/13] initial support for JS static overrides

---
 packages/cli/src/config/rollup.config.js      |  6 +-
 ...uild.config-optimization-overrides.spec.js | 85 +++++++++++++++++++
 .../greenwood.config.js                       |  3 +
 .../src/components/header.js                  | 19 +++++
 .../src/pages/index.html                      | 12 +++
 5 files changed, 122 insertions(+), 3 deletions(-)
 create mode 100644 packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
 create mode 100644 packages/cli/test/cases/build.config.optimization-overrides/greenwood.config.js
 create mode 100644 packages/cli/test/cases/build.config.optimization-overrides/src/components/header.js
 create mode 100644 packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html

diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
index e36a55df3..c173810f3 100644
--- a/packages/cli/src/config/rollup.config.js
+++ b/packages/cli/src/config/rollup.config.js
@@ -179,8 +179,8 @@ function greenwoodHtmlPlugin(compilation) {
      
             // handle <script type="module" src="some/path.js"></script>
             if (!isRemoteUrl(parsedAttributes.src) && parsedAttributes.type === 'module' && parsedAttributes.src && !mappedScripts.get(parsedAttributes.src)) {
-              if (optimization === 'static') {
-                // console.debug('dont emit ', parsedAttributes.src);
+              if (optimization === 'static' || parsedAttributes['data-gwd-opt'] === 'static') {
+                // dont need to bundle / emit this one
               } else {
                 const { src } = parsedAttributes;
                 const absoluteSrc = `${path.normalize(src.replace(/\.\.\//g, '').replace('./', ''))}`;
@@ -357,7 +357,7 @@ function greenwoodHtmlPlugin(compilation) {
                         <link rel="modulepreload" href="${newSrc}" as="script">
                       `);
                     }
-                  } else if (optimization === 'static' && newHtml.indexOf(pathToMatch) > 0) {
+                  } else if ((parsedAttributes['data-gwd-opt'] === 'static' || optimization === 'static') && newHtml.indexOf(pathToMatch) > 0) {
                     newHtml = newHtml.replace(scriptTag, '');
                   }
                 }
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js b/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
new file mode 100644
index 000000000..50a51353a
--- /dev/null
+++ b/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
@@ -0,0 +1,85 @@
+/*
+ * Use Case
+ * Run Greenwood build command with various override settings for optimization settings.
+ *
+ * User Result
+ * Should generate a Greenwood build that respects optimization setting overrides for all <script> and <link> tags.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * Default
+ *
+ * Custom Workspace
+ * src/
+ *   components/
+ *     header.js
+ *   pages/
+ *     index.html
+ */
+const expect = require('chai').expect;
+const glob = require('glob-promise');
+const { JSDOM } = require('jsdom');
+const path = require('path');
+const { getSetupFiles, getOutputTeardownFiles } = require('../../../../../test/utils');
+const Runner = require('gallinago').Runner;
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Optimization Overrides';
+  const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
+  const outputPath = __dirname;
+  let runner;
+
+  before(async function() {
+    this.context = {
+      publicDir: path.join(outputPath, 'public')
+    };
+    runner = new Runner();
+  });
+
+  describe(LABEL, function() {
+
+    before(async function() {
+      await runner.setup(outputPath, getSetupFiles(outputPath));
+      await runner.runCommand(cliPath, 'build');
+    });
+
+    describe('JavaScript <script> tag and static optimization override', function() {
+      let dom;
+
+      before(async function() {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
+      });
+
+      it('should emit no javascript files to the output directory', async function() {
+        const jsFiles = await glob.promise(path.join(this.context.publicDir, '*.js'));
+        
+        expect(jsFiles).to.have.lengthOf(0);
+      });
+
+      it('should contain no <link> tags in the <head>', function() {
+        const linkTags = dom.window.document.querySelectorAll('head link');
+
+        expect(linkTags.length).to.be.equal(0);
+      });
+      
+      it('should have no <script> tags in the <head>', function() {
+        const scriptTags = dom.window.document.querySelectorAll('head script');
+
+        expect(scriptTags.length).to.be.equal(0);
+      });
+
+      it('should contain the expected content from <app-header> in the <body>', function() {
+        const header = dom.window.document.querySelectorAll('body header');
+
+        expect(header.length).to.be.equal(1);
+        expect(header[0].textContent).to.be.equal('This is the header component.');
+      });
+    });
+  });
+
+  after(function() {
+    runner.teardown(getOutputTeardownFiles(outputPath));
+  });
+});
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/greenwood.config.js b/packages/cli/test/cases/build.config.optimization-overrides/greenwood.config.js
new file mode 100644
index 000000000..97dacb7fa
--- /dev/null
+++ b/packages/cli/test/cases/build.config.optimization-overrides/greenwood.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  // optimization: 'static'
+};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/src/components/header.js b/packages/cli/test/cases/build.config.optimization-overrides/src/components/header.js
new file mode 100644
index 000000000..e365570bc
--- /dev/null
+++ b/packages/cli/test/cases/build.config.optimization-overrides/src/components/header.js
@@ -0,0 +1,19 @@
+
+const template = document.createElement('template');
+      
+template.innerHTML = `
+  <header>This is the header component.</header>
+`;
+
+class HeaderComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+customElements.define('app-header', HeaderComponent);
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html b/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
new file mode 100644
index 000000000..42fe990d0
--- /dev/null
+++ b/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+
+  <head>
+    <script type="module" src="/components/header.js" data-gwd-opt="static"></script>
+  </head>
+
+  <body>
+    <app-header></app-header>
+  </body>
+
+</html>
\ No newline at end of file

From 29c25a4699fe0816419f613242f0638322a4c2b1 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Wed, 30 Jun 2021 19:50:47 -0400
Subject: [PATCH 02/13] add support for inline overrides

---
 packages/cli/src/config/rollup.config.js      |  8 +--
 ...uild.config-optimization-overrides.spec.js | 70 ++++++++++++++++---
 .../src/components/footer.js                  | 16 +++++
 .../src/components/header.js                  |  1 -
 .../src/pages/index.html                      |  2 +
 5 files changed, 82 insertions(+), 15 deletions(-)
 create mode 100644 packages/cli/test/cases/build.config.optimization-overrides/src/components/footer.js

diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
index c173810f3..8c54c7196 100644
--- a/packages/cli/src/config/rollup.config.js
+++ b/packages/cli/src/config/rollup.config.js
@@ -295,8 +295,8 @@ function greenwoodHtmlPlugin(compilation) {
       }));
     },
 
-    // crawl through all entry HTML files and map bundled JavaScript and CSS filenames 
-    // back to original <script> / <link> tags and update to their bundled filename in the HTML
+    // crawl through all entry HTML files and map Rollup bundled JavaScript and CSS filenames
+    // back to their original <script> / <link> tags, and update the HTML to their new bundled filenames
     generateBundle(outputOptions, bundles) {      
       for (const bundleId of Object.keys(bundles)) {
         try {
@@ -351,7 +351,7 @@ function greenwoodHtmlPlugin(compilation) {
                     
                     newHtml = newHtml.replace(src, newSrc);
                     
-                    if (optimization !== 'none' && optimization !== 'inline') {
+                    if (!parsedAttributes['data-gwd-opt'] && optimization === 'default') {
                       newHtml = newHtml.replace('<head>', `
                         <head>
                         <link rel="modulepreload" href="${newSrc}" as="script">
@@ -421,7 +421,7 @@ function greenwoodHtmlPlugin(compilation) {
             const parsedAttributes = parseTagForAttributes(scriptTag);
             const isScriptSrcTag = parsedAttributes.src && parsedAttributes.type === 'module';
 
-            if (optimization === 'inline' && isScriptSrcTag && !isRemoteUrl(parsedAttributes.src)) {
+            if ((parsedAttributes['data-gwd-opt'] === 'inline' || optimization === 'inline') && isScriptSrcTag && !isRemoteUrl(parsedAttributes.src)) {
               const src = parsedAttributes.src;
               const basePath = src.indexOf(tokenNodeModules) >= 0 
                 ? process.cwd()
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js b/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
index 50a51353a..11047bc2a 100644
--- a/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
+++ b/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
@@ -45,36 +45,86 @@ describe('Build Greenwood With: ', function() {
       await runner.runCommand(cliPath, 'build');
     });
 
-    describe('JavaScript <script> tag and static optimization override', function() {
+    describe('Cumulative output based on all settings', function() {
+      // TODO
+      // total JS files emitted
+      // total script tags
+      // total preload tags
+    });
+
+    describe('JavaScript <script> tag and static optimization override for <app-header>', function() {
       let dom;
 
       before(async function() {
         dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
       });
 
-      it('should emit no javascript files to the output directory', async function() {
-        const jsFiles = await glob.promise(path.join(this.context.publicDir, '*.js'));
+      it('should emit no header javascript files to the output directory', async function() {
+        const jsFiles = await glob.promise(path.join(this.context.publicDir, 'header.*.js'));
         
         expect(jsFiles).to.have.lengthOf(0);
       });
 
       it('should contain no <link> tags in the <head>', function() {
-        const linkTags = dom.window.document.querySelectorAll('head link');
+        const headerLinkTags = Array.from(dom.window.document.querySelectorAll('head link'))
+          .filter(link => link.getAttribute('href').indexOf('header') >= 0);
 
-        expect(linkTags.length).to.be.equal(0);
+        expect(headerLinkTags.length).to.be.equal(0);
       });
       
       it('should have no <script> tags in the <head>', function() {
-        const scriptTags = dom.window.document.querySelectorAll('head script');
+        const headerScriptTags = Array.from(dom.window.document.querySelectorAll('head script'))
+          .filter(script => script.getAttribute('src') && script.getAttribute('src').indexOf('header') >= 0);
 
-        expect(scriptTags.length).to.be.equal(0);
+        expect(headerScriptTags.length).to.be.equal(0);
       });
 
       it('should contain the expected content from <app-header> in the <body>', function() {
-        const header = dom.window.document.querySelectorAll('body header');
+        const headerScriptTags = dom.window.document.querySelectorAll('body header');
+
+        expect(headerScriptTags.length).to.be.equal(1);
+        expect(headerScriptTags[0].textContent).to.be.equal('This is the header component.');
+      });
+    });
+
+    describe('JavaScript <script> tag and inline optimization override for <app-footer>', function() {
+      let dom;
+
+      before(async function() {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
+      });
+
+      // TODO should we clean this up since the final bundle just gets inlined anyway
+      // and thus would actally be a length of zero
+      it('should emit one footer javascript file to the output directory', async function() {
+        const jsFiles = await glob.promise(path.join(this.context.publicDir, 'footer.*.js'));
+        
+        expect(jsFiles).to.have.lengthOf(1);
+      });
+
+      it('should contain no <link> tags in the <head>', function() {
+        const footerLinkTags = Array.from(dom.window.document.querySelectorAll('head link'))
+          .filter(link => link.getAttribute('href').indexOf('footer') >= 0);
+
+        expect(footerLinkTags.length).to.be.equal(0);
+      });
+      
+      it('should have an inline <script> tag in the <head>', function() {
+        const footerScriptTags = Array.from(dom.window.document.querySelectorAll('head script'))
+          .filter((script) => {
+            // eslint-disable-next-line max-len
+            return script.textContent.indexOf('const e=document.createElement("template");e.innerHTML="<footer>This is the footer component.</footer>";class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.shadowRoot.appendChild(e.content.cloneNode(!0))}}customElements.define("app-footer",t);') >= 0 
+              && !script.getAttribute('src');
+          });
+
+        expect(footerScriptTags.length).to.be.equal(1);
+      });
+
+      it('should contain the expected content from <app-footer> in the <body>', function() {
+        const footer = dom.window.document.querySelectorAll('body footer');
 
-        expect(header.length).to.be.equal(1);
-        expect(header[0].textContent).to.be.equal('This is the header component.');
+        expect(footer.length).to.be.equal(1);
+        expect(footer[0].textContent).to.be.equal('This is the footer component.');
       });
     });
   });
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/src/components/footer.js b/packages/cli/test/cases/build.config.optimization-overrides/src/components/footer.js
new file mode 100644
index 000000000..041fbca0f
--- /dev/null
+++ b/packages/cli/test/cases/build.config.optimization-overrides/src/components/footer.js
@@ -0,0 +1,16 @@
+const template = document.createElement('template');
+      
+template.innerHTML = '<footer>This is the footer component.</footer>';
+
+class FooterComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+customElements.define('app-footer', FooterComponent);
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/src/components/header.js b/packages/cli/test/cases/build.config.optimization-overrides/src/components/header.js
index e365570bc..0d198c640 100644
--- a/packages/cli/test/cases/build.config.optimization-overrides/src/components/header.js
+++ b/packages/cli/test/cases/build.config.optimization-overrides/src/components/header.js
@@ -1,4 +1,3 @@
-
 const template = document.createElement('template');
       
 template.innerHTML = `
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html b/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
index 42fe990d0..3b82422ff 100644
--- a/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
+++ b/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
@@ -3,10 +3,12 @@
 
   <head>
     <script type="module" src="/components/header.js" data-gwd-opt="static"></script>
+    <script type="module" src="/components/footer.js" data-gwd-opt="inline"></script>
   </head>
 
   <body>
     <app-header></app-header>
+    <app-footer></app-footer>
   </body>
 
 </html>
\ No newline at end of file

From 789322d56382cf636ac5ec278a84a88ea54672fb Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Thu, 1 Jul 2021 11:38:00 -0400
Subject: [PATCH 03/13] fix typo

---
 .../build.config-optimization-none.spec.js                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/test/cases/build.config.optimization-none/build.config-optimization-none.spec.js b/packages/cli/test/cases/build.config.optimization-none/build.config-optimization-none.spec.js
index ad2d2a294..e00ebd566 100644
--- a/packages/cli/test/cases/build.config.optimization-none/build.config-optimization-none.spec.js
+++ b/packages/cli/test/cases/build.config.optimization-none/build.config-optimization-none.spec.js
@@ -68,7 +68,7 @@ describe('Build Greenwood With: ', function() {
       });
       
       describe('<script> tag and preloading', function() {
-        it('should contain one unminifed javasccript file in the output directory', async function() {
+        it('should contain one unminifed javascript file in the output directory', async function() {
           expect(jsFiles).to.have.lengthOf(1);
         });
 

From 95cb274476fd49520c880d7a90c41e5e4c86bffe Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Thu, 1 Jul 2021 11:40:04 -0400
Subject: [PATCH 04/13] comment

---
 packages/cli/src/config/rollup.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
index 8c54c7196..92e98535e 100644
--- a/packages/cli/src/config/rollup.config.js
+++ b/packages/cli/src/config/rollup.config.js
@@ -421,6 +421,7 @@ function greenwoodHtmlPlugin(compilation) {
             const parsedAttributes = parseTagForAttributes(scriptTag);
             const isScriptSrcTag = parsedAttributes.src && parsedAttributes.type === 'module';
 
+            // handle <script type="module" src="..."></script>
             if ((parsedAttributes['data-gwd-opt'] === 'inline' || optimization === 'inline') && isScriptSrcTag && !isRemoteUrl(parsedAttributes.src)) {
               const src = parsedAttributes.src;
               const basePath = src.indexOf(tokenNodeModules) >= 0 

From c8700cd8ca37d85ae08231d876647c5f78f8b8c8 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Thu, 1 Jul 2021 12:15:37 -0400
Subject: [PATCH 05/13] support style inline override

---
 packages/cli/src/config/rollup.config.js      | 42 +++++++++---------
 ...uild.config-optimization-overrides.spec.js | 43 +++++++++++++++++--
 .../src/pages/index.html                      |  1 +
 .../src/styles/theme.css                      |  3 ++
 4 files changed, 64 insertions(+), 25 deletions(-)
 create mode 100644 packages/cli/test/cases/build.config.optimization-overrides/src/styles/theme.css

diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
index 92e98535e..1db0aafad 100644
--- a/packages/cli/src/config/rollup.config.js
+++ b/packages/cli/src/config/rollup.config.js
@@ -378,7 +378,8 @@ function greenwoodHtmlPlugin(compilation) {
                       
                       newHtml = newHtml.replace(href, newHref);
 
-                      if (optimization !== 'none' && optimization !== 'inline') {
+                      // TODO remove negatives
+                      if (!parsedAttributes['data-gwd-opt'] && (optimization !== 'none' && optimization !== 'inline')) {
                         newHtml = newHtml.replace('<head>', `
                           <head>
                           <link rel="preload" href="${newHref}" as="style" crossorigin="anonymous"></link>
@@ -465,27 +466,24 @@ function greenwoodHtmlPlugin(compilation) {
             }
           });
 
-          if (optimization === 'inline') {
-            headLinks
-              .forEach((linkTag) => {
-                const linkTagAttributes = parseTagForAttributes(linkTag);
-                const isLocalLinkTag = linkTagAttributes.rel === 'stylesheet'
-                  && !isRemoteUrl(linkTagAttributes.href);
-                
-                if (isLocalLinkTag) {
-                  const href = linkTagAttributes.href;
-                  const outputPath = path.join(outputDir, href);
-                  const css = fs.readFileSync(outputPath, 'utf-8');
-
-                  html = html.replace(`<link ${linkTag.rawAttrs}>`, `
-                    <style>
-                      ${css}
-                    </style>
-                  `);
-                }
-              });
-          }
-          
+          headLinks
+            .forEach((linkTag) => {
+              const parsedAttributes = parseTagForAttributes(linkTag);
+              const isLocalLinkTag = parsedAttributes.rel === 'stylesheet'
+                && !isRemoteUrl(parsedAttributes.href);
+              
+              if (isLocalLinkTag && (parsedAttributes['data-gwd-opt'] === 'inline' || optimization === 'inline')) {
+                const href = parsedAttributes.href;
+                const outputPath = path.join(outputDir, href);
+                const css = fs.readFileSync(outputPath, 'utf-8');
+
+                html = html.replace(`<link ${linkTag.rawAttrs}>`, `
+                  <style>
+                    ${css}
+                  </style>
+                `);
+              }
+            });
           // mark each HTML's sourcemap file (generated by Rollup) to be cleaned up
           // would be nice if we could just prevent Rollup from generating sourcemaps for just our input files in the first place (GFI)
           scratchFiles[`${htmlPath.replace(outputDir, '')}.map`] = true;
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js b/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
index 11047bc2a..4e9c21348 100644
--- a/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
+++ b/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
@@ -47,9 +47,9 @@ describe('Build Greenwood With: ', function() {
 
     describe('Cumulative output based on all settings', function() {
       // TODO
-      // total JS files emitted
-      // total script tags
-      // total preload tags
+      // total JS / CSS files expected
+      // total script / style tags expected
+      // total preload tags expected
     });
 
     describe('JavaScript <script> tag and static optimization override for <app-header>', function() {
@@ -127,6 +127,43 @@ describe('Build Greenwood With: ', function() {
         expect(footer[0].textContent).to.be.equal('This is the footer component.');
       });
     });
+
+    describe('CSS <link> tag and inline optimization override for theme.css', function() {
+      let dom;
+
+      before(async function() {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
+      });
+
+      // TODO should we clean this up since the final bundle just gets inlined anyway
+      // and thus would actally be a length of zero
+      it('should emit one theme.css file to the output directory', async function() {
+        const cssFiles = await glob.promise(path.join(this.context.publicDir, 'styles/*.css'));
+        
+        expect(cssFiles).to.have.lengthOf(1);
+      });
+
+      it('should contain no <link> tags in the <head>', function() {
+        const themeLinkTags = Array.from(dom.window.document.querySelectorAll('head link'))
+          .filter(link => link.getAttribute('href').indexOf('theme') >= 0);
+
+        expect(themeLinkTags.length).to.be.equal(0);
+      });
+      
+      it('should have an inline <style> tag in the <head>', function() {
+        const themeStyleTags = Array.from(dom.window.document.querySelectorAll('head style'))
+          .filter(style => style.textContent.indexOf('*{color:#00f}') >= 0);
+
+        expect(themeStyleTags.length).to.be.equal(1);
+      });
+
+      xit('should contain the expected content from <app-footer> in the <body>', function() {
+        const footer = dom.window.document.querySelectorAll('body footer');
+
+        expect(footer.length).to.be.equal(1);
+        expect(footer[0].textContent).to.be.equal('This is the footer component.');
+      });
+    });
   });
 
   after(function() {
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html b/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
index 3b82422ff..defd3fc21 100644
--- a/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
+++ b/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
@@ -4,6 +4,7 @@
   <head>
     <script type="module" src="/components/header.js" data-gwd-opt="static"></script>
     <script type="module" src="/components/footer.js" data-gwd-opt="inline"></script>
+    <link rel="stylesheet" href="/styles/theme.css" data-gwd-opt="inline"></script>
   </head>
 
   <body>
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/src/styles/theme.css b/packages/cli/test/cases/build.config.optimization-overrides/src/styles/theme.css
new file mode 100644
index 000000000..9a7b45f93
--- /dev/null
+++ b/packages/cli/test/cases/build.config.optimization-overrides/src/styles/theme.css
@@ -0,0 +1,3 @@
+* {
+  color: blue;
+}
\ No newline at end of file

From f140645ffcdb25eb4aa326a16567a08599e032f0 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 2 Jul 2021 10:48:32 -0400
Subject: [PATCH 06/13] add specs for cumulative optimization overrides output

---
 ...uild.config-optimization-overrides.spec.js | 47 ++++++++++++++++---
 1 file changed, 41 insertions(+), 6 deletions(-)

diff --git a/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js b/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
index 4e9c21348..2d2b99920 100644
--- a/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
+++ b/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
@@ -14,9 +14,12 @@
  * Custom Workspace
  * src/
  *   components/
+ *     footer.js
  *     header.js
  *   pages/
  *     index.html
+ *   styles/
+ *     theme.css
  */
 const expect = require('chai').expect;
 const glob = require('glob-promise');
@@ -45,11 +48,43 @@ describe('Build Greenwood With: ', function() {
       await runner.runCommand(cliPath, 'build');
     });
 
-    describe('Cumulative output based on all settings', function() {
-      // TODO
-      // total JS / CSS files expected
-      // total script / style tags expected
-      // total preload tags expected
+    describe('Cumulative output based on all override settings', function() {
+      let dom;
+
+      before(async function() {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
+      });
+
+      it('should emit one Javascript file to the output directory', async function() {
+        const jsFiles = await glob.promise(path.join(this.context.publicDir, '**/*.js'));
+        
+        expect(jsFiles).to.have.lengthOf(1);
+      });
+
+      it('should emit one CSS file to the output directory', async function() {
+        const cssFiles = await glob.promise(path.join(this.context.publicDir, '**/*.css'));
+        
+        expect(cssFiles).to.have.lengthOf(1);
+      });
+
+      it('should have one <script> tag in the <head>', function() {
+        const scriptTags = dom.window.document.querySelectorAll('head script');
+
+        expect(scriptTags.length).to.be.equal(1);
+      });
+
+      // one of these tags comes from puppeteer
+      it('should have two <style> tags in the <head>', function() {
+        const styleTags = dom.window.document.querySelectorAll('head style');
+
+        expect(styleTags.length).to.be.equal(2);
+      });
+
+      it('should have no <link> tags in the <head>', function() {
+        const linkTags = dom.window.document.querySelectorAll('head link');
+
+        expect(linkTags.length).to.be.equal(0);
+      });
     });
 
     describe('JavaScript <script> tag and static optimization override for <app-header>', function() {
@@ -157,7 +192,7 @@ describe('Build Greenwood With: ', function() {
         expect(themeStyleTags.length).to.be.equal(1);
       });
 
-      xit('should contain the expected content from <app-footer> in the <body>', function() {
+      it('should contain the expected content from <app-footer> in the <body>', function() {
         const footer = dom.window.document.querySelectorAll('body footer');
 
         expect(footer.length).to.be.equal(1);

From d09cf743bb95f78efe583afcf84d8e8bd5ca3718 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 2 Jul 2021 11:39:09 -0400
Subject: [PATCH 07/13] fix tag

---
 .../build.config.optimization-overrides/src/pages/index.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html b/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
index defd3fc21..f60ba23a6 100644
--- a/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
+++ b/packages/cli/test/cases/build.config.optimization-overrides/src/pages/index.html
@@ -4,7 +4,7 @@
   <head>
     <script type="module" src="/components/header.js" data-gwd-opt="static"></script>
     <script type="module" src="/components/footer.js" data-gwd-opt="inline"></script>
-    <link rel="stylesheet" href="/styles/theme.css" data-gwd-opt="inline"></script>
+    <link rel="stylesheet" href="/styles/theme.css" data-gwd-opt="inline"/>
   </head>
 
   <body>

From aed55410ed4e830b4bcdee06aed4a20c91d5585d Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 2 Jul 2021 11:39:37 -0400
Subject: [PATCH 08/13] add overrides section to optimization docs

---
 www/pages/docs/configuration.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/www/pages/docs/configuration.md b/www/pages/docs/configuration.md
index 274c4c890..71a8339fe 100644
--- a/www/pages/docs/configuration.md
+++ b/www/pages/docs/configuration.md
@@ -141,7 +141,19 @@ module.exports = {
 }
 ```
 
-> _These settings are currently expiremental, and more fine grained control and intelligent based defaults will be coming soon!_
+#### Overrides
+Additionally, you can apply overrides on a per `<link>` or `<script>` tag basis by addding a custom `data-gwd-opt` attribute to your HTML.  The following is supported for JavaScript and CSS.
+
+```html
+<!-- Javascript -->
+<script type="module" src="/path/to/file1.js" data-gwd-opt="static"></script>
+<script type="module" src="/path/to/file2.js" data-gwd-opt="inline"></script>
+
+<!-- CSS -->
+<link rel="stylesheet" href="/path/to/file1.css" data-gwd-opt="inline"/>
+```
+
+> _These settings are currently considered expiremental.  Additional improvements and considerations include adding [`none` override support](https://github.com/ProjectEvergreen/greenwood/discussions/545#discussioncomment-957320), [SSR + hydration](https://github.com/ProjectEvergreen/greenwood/discussions/576), and [side effect free templates and pages](https://github.com/ProjectEvergreen/greenwood/discussions/644)._
 
 ### Prerender
 

From b26b8cee018aa76f1c576237fc3b8ec0fd7da977 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 2 Jul 2021 12:18:44 -0400
Subject: [PATCH 09/13] apply static overrides for website

---
 www/components/footer/footer.css | 2 +-
 www/pages/index.html             | 2 +-
 www/templates/app.html           | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/www/components/footer/footer.css b/www/components/footer/footer.css
index 3ab8d4c26..5f1e0dbf5 100644
--- a/www/components/footer/footer.css
+++ b/www/components/footer/footer.css
@@ -8,7 +8,7 @@
 
     & h4 {
       width: 90%;
-      margin: 0 auto;
+      margin: 0 auto!important;
       padding: 0;
       text-align: center;
     }
diff --git a/www/pages/index.html b/www/pages/index.html
index e0cffc00a..0e7d7ad41 100644
--- a/www/pages/index.html
+++ b/www/pages/index.html
@@ -3,7 +3,7 @@
 
   <head>
     <script type="module" src="../components/banner/banner.js"></script>
-    <script type="module" src="../components/card/card.js"></script>
+    <script type="module" src="../components/card/card.js" data-gwd-opt="static"></script>
 
     <link rel="stylesheet" href="/node_modules/prismjs/themes/prism-tomorrow.css"/>
     <link rel="stylesheet" href="../styles/home.css"/>
diff --git a/www/templates/app.html b/www/templates/app.html
index c0ded2903..a7b3b0e96 100644
--- a/www/templates/app.html
+++ b/www/templates/app.html
@@ -22,8 +22,8 @@
       import '@evergreen-wc/eve-container';
     </script>
     
-    <script type="module" src="../components/footer/footer.js"></script>
-    <script type="module" src="../components/header/header.js"></script>
+    <script type="module" src="../components/footer/footer.js" data-gwd-opt="static"></script>
+    <script type="module" src="../components/header/header.js" data-gwd-opt="static"></script>
     
   </head>
 

From 23c17c62df11039bcd5d610f3f3bac3fefdeb99c Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 2 Jul 2021 12:27:59 -0400
Subject: [PATCH 10/13] remove unused config file

---
 .../build.config.optimization-overrides/greenwood.config.js    | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 packages/cli/test/cases/build.config.optimization-overrides/greenwood.config.js

diff --git a/packages/cli/test/cases/build.config.optimization-overrides/greenwood.config.js b/packages/cli/test/cases/build.config.optimization-overrides/greenwood.config.js
deleted file mode 100644
index 97dacb7fa..000000000
--- a/packages/cli/test/cases/build.config.optimization-overrides/greenwood.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  // optimization: 'static'
-};
\ No newline at end of file

From 20fe59de6f929521f2a6dd00f584861bd7f37d25 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 2 Jul 2021 12:47:23 -0400
Subject: [PATCH 11/13] document global styles for CSS in JS

---
 www/pages/docs/configuration.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/www/pages/docs/configuration.md b/www/pages/docs/configuration.md
index 71a8339fe..acc5f4522 100644
--- a/www/pages/docs/configuration.md
+++ b/www/pages/docs/configuration.md
@@ -134,6 +134,8 @@ Greenwood provides a number of different ways to send hints to Greenwood as to h
 |`none` | With this setting, _none_ of your JS or CSS will be minified or hinted at all. | The best choice if you want to handle everything yourself through custom [Resource plugins](/plugins/resource/). |
 |`static` | Only for `<script>` tags, but this setting will remove `<script>` tags from your HTML. | If your Web Components only need a single render just to emit some static HTML, or are otherwise not dynamic or needed at runtime, this will really speed up your site's performance by dropping uncessary HTTP requests. |
 
+> _These settings are currently considered expiremental.  Additional improvements and considerations include adding [`none` override support](https://github.com/ProjectEvergreen/greenwood/discussions/545#discussioncomment-957320), [SSR + hydration](https://github.com/ProjectEvergreen/greenwood/discussions/576), and [side effect free templates and pages](https://github.com/ProjectEvergreen/greenwood/discussions/644)._
+
 #### Example
 ```js
 module.exports = {
@@ -153,7 +155,7 @@ Additionally, you can apply overrides on a per `<link>` or `<script>` tag basis
 <link rel="stylesheet" href="/path/to/file1.css" data-gwd-opt="inline"/>
 ```
 
-> _These settings are currently considered expiremental.  Additional improvements and considerations include adding [`none` override support](https://github.com/ProjectEvergreen/greenwood/discussions/545#discussioncomment-957320), [SSR + hydration](https://github.com/ProjectEvergreen/greenwood/discussions/576), and [side effect free templates and pages](https://github.com/ProjectEvergreen/greenwood/discussions/644)._
+> _Just be mindful that style encapsulation provided by ShadowDOM (e.g. `:host`) for custom elements will now have their styles inlined in the `<head>` and mixed with all other global styles, and thus may collide and [be suceptible to the cascade](https://github.com/ProjectEvergreen/greenwood/pull/645#issuecomment-873125192) depending on their degree of specificity.  Increasing specificity of selectors or using only global styles will help resolve this._
 
 ### Prerender
 

From 4dff8c242d6c320b76fc4af007cb322171dbae71 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Wed, 7 Jul 2021 12:34:30 -0400
Subject: [PATCH 12/13] clean up inlined assets

---
 packages/cli/src/config/rollup.config.js      |  2 +
 ...uild.config-optimization-overrides.spec.js | 37 ++-----------------
 2 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
index 1db0aafad..d82873352 100644
--- a/packages/cli/src/config/rollup.config.js
+++ b/packages/cli/src/config/rollup.config.js
@@ -430,6 +430,7 @@ function greenwoodHtmlPlugin(compilation) {
                 : outputDir;
               const outputPath = path.join(basePath, src);
               const js = fs.readFileSync(outputPath, 'utf-8');
+              scratchFiles[src] = true;
 
               html = html.replace(`<script ${scriptTag.rawAttrs}></script>`, `
                 <script type="module">
@@ -476,6 +477,7 @@ function greenwoodHtmlPlugin(compilation) {
                 const href = parsedAttributes.href;
                 const outputPath = path.join(outputDir, href);
                 const css = fs.readFileSync(outputPath, 'utf-8');
+                scratchFiles[href] = true;
 
                 html = html.replace(`<link ${linkTag.rawAttrs}>`, `
                   <style>
diff --git a/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js b/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
index 2d2b99920..45acf3130 100644
--- a/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
+++ b/packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js
@@ -55,16 +55,16 @@ describe('Build Greenwood With: ', function() {
         dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
       });
 
-      it('should emit one Javascript file to the output directory', async function() {
+      it('should emit no Javascript files to the output directory', async function() {
         const jsFiles = await glob.promise(path.join(this.context.publicDir, '**/*.js'));
         
-        expect(jsFiles).to.have.lengthOf(1);
+        expect(jsFiles).to.have.lengthOf(0);
       });
 
-      it('should emit one CSS file to the output directory', async function() {
+      it('should emit no CSS files to the output directory', async function() {
         const cssFiles = await glob.promise(path.join(this.context.publicDir, '**/*.css'));
         
-        expect(cssFiles).to.have.lengthOf(1);
+        expect(cssFiles).to.have.lengthOf(0);
       });
 
       it('should have one <script> tag in the <head>', function() {
@@ -94,12 +94,6 @@ describe('Build Greenwood With: ', function() {
         dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
       });
 
-      it('should emit no header javascript files to the output directory', async function() {
-        const jsFiles = await glob.promise(path.join(this.context.publicDir, 'header.*.js'));
-        
-        expect(jsFiles).to.have.lengthOf(0);
-      });
-
       it('should contain no <link> tags in the <head>', function() {
         const headerLinkTags = Array.from(dom.window.document.querySelectorAll('head link'))
           .filter(link => link.getAttribute('href').indexOf('header') >= 0);
@@ -129,14 +123,6 @@ describe('Build Greenwood With: ', function() {
         dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
       });
 
-      // TODO should we clean this up since the final bundle just gets inlined anyway
-      // and thus would actally be a length of zero
-      it('should emit one footer javascript file to the output directory', async function() {
-        const jsFiles = await glob.promise(path.join(this.context.publicDir, 'footer.*.js'));
-        
-        expect(jsFiles).to.have.lengthOf(1);
-      });
-
       it('should contain no <link> tags in the <head>', function() {
         const footerLinkTags = Array.from(dom.window.document.querySelectorAll('head link'))
           .filter(link => link.getAttribute('href').indexOf('footer') >= 0);
@@ -170,14 +156,6 @@ describe('Build Greenwood With: ', function() {
         dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
       });
 
-      // TODO should we clean this up since the final bundle just gets inlined anyway
-      // and thus would actally be a length of zero
-      it('should emit one theme.css file to the output directory', async function() {
-        const cssFiles = await glob.promise(path.join(this.context.publicDir, 'styles/*.css'));
-        
-        expect(cssFiles).to.have.lengthOf(1);
-      });
-
       it('should contain no <link> tags in the <head>', function() {
         const themeLinkTags = Array.from(dom.window.document.querySelectorAll('head link'))
           .filter(link => link.getAttribute('href').indexOf('theme') >= 0);
@@ -191,13 +169,6 @@ describe('Build Greenwood With: ', function() {
 
         expect(themeStyleTags.length).to.be.equal(1);
       });
-
-      it('should contain the expected content from <app-footer> in the <body>', function() {
-        const footer = dom.window.document.querySelectorAll('body footer');
-
-        expect(footer.length).to.be.equal(1);
-        expect(footer[0].textContent).to.be.equal('This is the footer component.');
-      });
     });
   });
 

From 9539cd47d6d9119349d69fdabe10bf60861db3d7 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Wed, 7 Jul 2021 12:36:42 -0400
Subject: [PATCH 13/13] cleanup TODOs

---
 packages/cli/src/config/rollup.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
index d82873352..e0d1a212b 100644
--- a/packages/cli/src/config/rollup.config.js
+++ b/packages/cli/src/config/rollup.config.js
@@ -378,7 +378,6 @@ function greenwoodHtmlPlugin(compilation) {
                       
                       newHtml = newHtml.replace(href, newHref);
 
-                      // TODO remove negatives
                       if (!parsedAttributes['data-gwd-opt'] && (optimization !== 'none' && optimization !== 'inline')) {
                         newHtml = newHtml.replace('<head>', `
                           <head>