diff --git a/.eslintignore b/.eslintignore
index 7862cff23..8e786af06 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,4 +3,5 @@
 **/node_modules/**
 !.eslintrc.cjs
 !.mocharc.js
-packages/plugin-babel/test/cases/**/*main.js
\ No newline at end of file
+packages/plugin-babel/test/cases/**/*main.js
+TODO.md
\ No newline at end of file
diff --git a/packages/cli/package.json b/packages/cli/package.json
index ec716fca9..7ac5e3ee9 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -34,7 +34,6 @@
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.3.4",
     "@rollup/plugin-terser": "^0.1.0",
-    "@web/rollup-plugin-import-meta-assets": "^1.0.0",
     "acorn": "^8.0.1",
     "acorn-walk": "^8.0.0",
     "commander": "^2.20.0",
diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
index df59ef61f..4c7156860 100644
--- a/packages/cli/src/config/rollup.config.js
+++ b/packages/cli/src/config/rollup.config.js
@@ -1,20 +1,27 @@
-import fs from 'fs/promises';
+import fs from 'fs';
+import path from 'path';
 import { checkResourceExists, normalizePathnameForWindows } from '../lib/resource-utils.js';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
-import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
+import * as walk from 'acorn-walk';
 
-// specifically to handle escodegen using require for package.json
+// https://github.com/rollup/rollup/issues/2121
+function cleanRollupId(id) {
+  return id.replace('\x00', '');
+}
+
+// specifically to handle escodegen and other node modules
+// using require for package.json or other json files
 // https://github.com/estools/escodegen/issues/455
 function greenwoodJsonLoader() {
   return {
     name: 'greenwood-json-loader',
     async load(id) {
-      const extension = id.split('.').pop();
+      const idUrl = new URL(`file://${cleanRollupId(id)}`);
+      const extension = idUrl.pathname.split('.').pop();
 
       if (extension === 'json') {
-        const url = new URL(`file://${id}`);
-        const json = JSON.parse(await fs.readFile(url, 'utf-8'));
+        const json = JSON.parse(await fs.promises.readFile(idUrl, 'utf-8'));
         const contents = `export default ${JSON.stringify(json)}`;
 
         return contents;
@@ -33,11 +40,11 @@ function greenwoodResourceLoader (compilation) {
   return {
     name: 'greenwood-resource-loader',
     async resolveId(id) {
-      const normalizedId = id.replace(/\?type=(.*)/, '');
+      const normalizedId = cleanRollupId(id); // idUrl.pathname;
       const { projectDirectory, userWorkspace } = compilation.context;
 
-      if (id.startsWith('.') && !id.startsWith(projectDirectory.pathname)) {
-        const prefix = id.startsWith('..') ? './' : '';
+      if (normalizedId.startsWith('.') && !normalizedId.startsWith(projectDirectory.pathname)) {
+        const prefix = normalizedId.startsWith('..') ? './' : '';
         const userWorkspaceUrl = new URL(`${prefix}${normalizedId.replace(/\.\.\//g, '')}`, userWorkspace);
 
         if (await checkResourceExists(userWorkspaceUrl)) {
@@ -46,11 +53,13 @@ function greenwoodResourceLoader (compilation) {
       }
     },
     async load(id) {
-      const pathname = id.indexOf('?') >= 0 ? id.slice(0, id.indexOf('?')) : id;
+      const idUrl = new URL(`file://${cleanRollupId(id)}`);
+      const { pathname } = idUrl;
       const extension = pathname.split('.').pop();
 
-      if (extension !== '' && extension !== 'js') {
-        const url = new URL(`file://${pathname}?type=${extension}`);
+      // filter first for any bare specifiers
+      if (await checkResourceExists(idUrl) && extension !== '' && extension !== 'js') {
+        const url = new URL(`${idUrl.href}?type=${extension}`);
         const request = new Request(url.href);
         let response = new Response('');
 
@@ -116,12 +125,12 @@ function greenwoodSyncPageResourceBundlesPlugin(compilation) {
             compilation.resources.set(resource.sourcePathURL.pathname, {
               ...compilation.resources.get(resource.sourcePathURL.pathname),
               optimizedFileName: fileName,
-              optimizedFileContents: await fs.readFile(outputPath, 'utf-8'),
+              optimizedFileContents: await fs.promises.readFile(outputPath, 'utf-8'),
               contents
             });
 
             if (noop) {
-              await fs.writeFile(outputPath, contents);
+              await fs.promises.writeFile(outputPath, contents);
             }
           }
         }
@@ -130,6 +139,138 @@ function greenwoodSyncPageResourceBundlesPlugin(compilation) {
   };
 }
 
+function getMetaImportPath(node) {
+  return node.arguments[0].value.split('/').join(path.sep);
+}
+
+function isNewUrlImportMetaUrl(node) {
+  return (
+    node.type === 'NewExpression' &&
+    node.callee.type === 'Identifier' &&
+    node.callee.name === 'URL' &&
+    node.arguments.length === 2 &&
+    node.arguments[0].type === 'Literal' &&
+    typeof getMetaImportPath(node) === 'string' &&
+    node.arguments[1].type === 'MemberExpression' &&
+    node.arguments[1].object.type === 'MetaProperty' &&
+    node.arguments[1].property.type === 'Identifier' &&
+    node.arguments[1].property.name === 'url'
+  );
+}
+
+// adapted from, and with credit to @web/rollup-plugin-import-meta-assets
+// https://modern-web.dev/docs/building/rollup-plugin-import-meta-assets/
+function greenwoodImportMetaUrl(compilation) {
+
+  return {
+    name: 'greenwood-import-meta-url',
+
+    async transform(code, id) {
+      const resourcePlugins = compilation.config.plugins.filter((plugin) => {
+        return plugin.type === 'resource';
+      }).map((plugin) => {
+        return plugin.provider(compilation);
+      });
+      const customResourcePlugins = compilation.config.plugins.filter((plugin) => {
+        return plugin.type === 'resource' && !plugin.isGreenwoodDefaultPlugin;
+      }).map((plugin) => {
+        return plugin.provider(compilation);
+      });
+      const idUrl = new URL(`file://${cleanRollupId(id)}`);
+      const { pathname } = idUrl;
+      const extension = pathname.split('.').pop();
+      const urlWithType = new URL(`${idUrl.href}?type=${extension}`);
+      const request = new Request(urlWithType.href);
+      let canTransform = false;
+      let response = new Response(code);
+
+      // handle any custom imports or pre-processing needed before passing to Rollup this.parse
+      if (await checkResourceExists(idUrl) && extension !== '' && extension !== 'json') {
+        for (const plugin of resourcePlugins) {
+          if (plugin.shouldServe && await plugin.shouldServe(urlWithType, request)) {
+            response = await plugin.serve(urlWithType, request);
+            canTransform = true;
+          }
+        }
+
+        for (const plugin of resourcePlugins) {
+          if (plugin.shouldIntercept && await plugin.shouldIntercept(urlWithType, request, response.clone())) {
+            response = await plugin.intercept(urlWithType, request, response.clone());
+            canTransform = true;
+          }
+        }
+      }
+
+      if (!canTransform) {
+        return null;
+      }
+
+      const ast = this.parse(await response.text());
+      const assetUrls = [];
+      let modifiedCode = false;
+
+      // aggregate all references of new URL + import.meta.url
+      walk.simple(ast, {
+        NewExpression(node) {
+          if (isNewUrlImportMetaUrl(node)) {
+            const absoluteScriptDir = path.dirname(id);
+            const relativeAssetPath = getMetaImportPath(node);
+            const absoluteAssetPath = path.resolve(absoluteScriptDir, relativeAssetPath);
+            const assetName = path.basename(absoluteAssetPath);
+            const assetExtension = assetName.split('.').pop();
+
+            assetUrls.push({
+              url: new URL(`file://${absoluteAssetPath}?type=${assetExtension}`),
+              relativeAssetPath
+            });
+          }
+        }
+      });
+
+      for (const assetUrl of assetUrls) {
+        const { url } = assetUrl;
+        const { pathname } = url;
+        const { relativeAssetPath } = assetUrl;
+        const assetName = path.basename(pathname);
+        const assetExtension = assetName.split('.').pop();
+        const assetContents = await fs.promises.readFile(url, 'utf-8');
+        const name = assetName.replace(`.${assetExtension}`, '');
+        let bundleExtensions = ['js'];
+
+        for (const plugin of customResourcePlugins) {
+          if (plugin.shouldServe && await plugin.shouldServe(url)) {
+            const response = await plugin.serve(url);
+
+            if (response?.headers?.get('content-type') || ''.indexOf('text/javascript') >= 0) {
+              bundleExtensions = [...bundleExtensions, ...plugin.extensions];
+            }
+          }
+        }
+
+        const type = bundleExtensions.indexOf(assetExtension) >= 0
+          ? 'chunk'
+          : 'asset';
+        const emitConfig = type === 'chunk'
+          ? { type, id: normalizePathnameForWindows(url), name }
+          : { type, name: assetName, source: assetContents };
+        const ref = this.emitFile(emitConfig);
+        // handle Windows style paths
+        const normalizedRelativeAssetPath = relativeAssetPath.replace(/\\/g, '/');
+        const importRef = `import.meta.ROLLUP_FILE_URL_${ref}`;
+
+        modifiedCode = code
+          .replace(`'${normalizedRelativeAssetPath}'`, importRef)
+          .replace(`"${normalizedRelativeAssetPath}"`, importRef);
+      }
+
+      return {
+        code: modifiedCode ? modifiedCode : code,
+        map: null
+      };
+    }
+  };
+}
+
 // TODO could we use this instead?
 // https://github.com/rollup/rollup/blob/v2.79.1/docs/05-plugin-development.md#resolveimportmeta
 // https://github.com/ProjectEvergreen/greenwood/issues/1087
@@ -177,6 +318,7 @@ const getRollupConfigForScriptResources = async (compilation) => {
     plugins: [
       greenwoodResourceLoader(compilation),
       greenwoodSyncPageResourceBundlesPlugin(compilation),
+      greenwoodImportMetaUrl(compilation),
       ...customRollupPlugins
     ],
     context: 'window',
@@ -216,6 +358,11 @@ const getRollupConfigForApis = async (compilation) => {
   const input = [...compilation.manifest.apis.values()]
     .map(api => normalizePathnameForWindows(new URL(`.${api.path}`, userWorkspace)));
 
+  // why is this needed?
+  await fs.promises.mkdir(new URL('./api/assets/', outputDir), {
+    recursive: true
+  });
+
   // TODO should routes and APIs have chunks?
   // https://github.com/ProjectEvergreen/greenwood/issues/1118
   return [{
@@ -227,9 +374,10 @@ const getRollupConfigForApis = async (compilation) => {
     },
     plugins: [
       greenwoodJsonLoader(),
+      greenwoodResourceLoader(compilation),
       nodeResolve(),
       commonjs(),
-      importMetaAssets()
+      greenwoodImportMetaUrl(compilation)
     ]
   }];
 };
@@ -248,6 +396,7 @@ const getRollupConfigForSsr = async (compilation, input) => {
     },
     plugins: [
       greenwoodJsonLoader(),
+      greenwoodResourceLoader(compilation),
       // TODO let this through for lit to enable nodeResolve({ preferBuiltins: true })
       // https://github.com/lit/lit/issues/449
       // https://github.com/ProjectEvergreen/greenwood/issues/1118
@@ -255,7 +404,7 @@ const getRollupConfigForSsr = async (compilation, input) => {
         preferBuiltins: true
       }),
       commonjs(),
-      importMetaAssets(),
+      greenwoodImportMetaUrl(compilation),
       greenwoodPatchSsrPagesEntryPointRuntimeImport() // TODO a little hacky but works for now
     ],
     onwarn: (errorObj) => {
diff --git a/packages/cli/test/cases/serve.default.ssr/serve.default.ssr.spec.js b/packages/cli/test/cases/serve.default.ssr/serve.default.ssr.spec.js
index 6dde6c7fa..bf60ae24c 100644
--- a/packages/cli/test/cases/serve.default.ssr/serve.default.ssr.spec.js
+++ b/packages/cli/test/cases/serve.default.ssr/serve.default.ssr.spec.js
@@ -18,6 +18,8 @@
  *   components/
  *     card.js
  *     counter.js
+ *   images/
+ *     logo.svg
  *   pages/
  *     about.md
  *     artists.js
@@ -300,6 +302,60 @@ describe('Serve Greenwood With: ', function() {
       });
     });
 
+    describe('Bundled image using new URL and import.meta.url', function() {
+      const bundledName = 'assets/logo-abb2e884.svg';
+      let bundledImageResponse = {};
+      let usersResponse = {};
+
+      before(async function() {
+        await new Promise((resolve, reject) => {
+          request.get(`${hostname}/${bundledName}`, (err, res, body) => {
+            if (err) {
+              reject();
+            }
+
+            bundledImageResponse = res;
+            bundledImageResponse.body = body;
+
+            resolve();
+          });
+        });
+
+        await new Promise((resolve, reject) => {
+          request.get(`${hostname}/_users.js`, (err, res, body) => {
+            if (err) {
+              reject();
+            }
+
+            usersResponse = res;
+            usersResponse.body = body;
+
+            resolve();
+          });
+        });
+      });
+
+      it('should return a 200 status for the image', function(done) {
+        expect(bundledImageResponse.statusCode).to.equal(200);
+        done();
+      });
+
+      it('should return the expected content-type for the image', function(done) {
+        expect(bundledImageResponse.headers['content-type']).to.equal('image/svg+xml');
+        done();
+      });
+
+      it('should return the expected body for the image', function(done) {
+        expect(bundledImageResponse.body.startsWith('<svg')).to.equal(true);
+        done();
+      });
+
+      it('should return the expected bundled image name inside the bundled page route', function(done) {
+        expect(usersResponse.body.indexOf(bundledName) >= 0).to.equal(true);
+        done();
+      });
+    });
+
     describe('Serve command with 404 not found behavior', function() {
       let response = {};
 
diff --git a/packages/cli/test/cases/serve.default.ssr/src/components/card.js b/packages/cli/test/cases/serve.default.ssr/src/components/card.js
index 21456531a..e6579a592 100644
--- a/packages/cli/test/cases/serve.default.ssr/src/components/card.js
+++ b/packages/cli/test/cases/serve.default.ssr/src/components/card.js
@@ -1,3 +1,4 @@
+const logo = new URL('../images/logo.svg', import.meta.url);
 const template = document.createElement('template');
 
 template.innerHTML = `
@@ -23,6 +24,7 @@ template.innerHTML = `
   </style>
 
   <div class="card">
+    <img alt="logo" href="${logo.pathname}">
     <slot name="title">My default title</slot>
     <slot name="image"></slot>
   </div>
diff --git a/packages/cli/test/cases/serve.default.ssr/src/images/logo.svg b/packages/cli/test/cases/serve.default.ssr/src/images/logo.svg
new file mode 100644
index 000000000..75abb3ff2
--- /dev/null
+++ b/packages/cli/test/cases/serve.default.ssr/src/images/logo.svg
@@ -0,0 +1,45 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" style="fill: green" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+  <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+  fill="green" stroke="none">
+    <path d="M2047 5097 c-34 -34 -47 -85 -47 -193 l0 -91 -52 -16 c-29 -9 -73
+    -21 -98 -26 -127 -28 -394 -137 -544 -222 -546 -312 -934 -788 -1129 -1384
+    -37 -111 -87 -326 -94 -401 -12 -132 33 -235 121 -275 107 -48 273 4 336 105
+    12 21 31 86 45 163 46 236 127 456 237 643 238 404 624 716 1063 859 l120 39
+    5 -187 c5 -205 13 -231 68 -252 64 -25 91 -12 541 257 463 276 481 290 481
+    364 0 47 -29 92 -82 127 -24 16 -221 137 -438 268 -374 227 -397 239 -452 243
+    -50 4 -59 1 -81 -21z"/>
+    <path d="M3772 4342 c-60 -22 -118 -71 -138 -119 -8 -18 -14 -59 -14 -91 0
+    -92 40 -163 145 -253 309 -265 538 -658 620 -1065 57 -278 53 -553 -11 -826
+    -9 -38 -18 -68 -20 -68 -2 0 -54 30 -115 66 -131 78 -159 87 -211 73 -42 -11
+    -66 -40 -78 -93 -4 -19 -4 -255 1 -526 7 -424 11 -496 25 -526 23 -48 50 -64
+    110 -64 48 0 73 13 465 236 228 130 429 250 446 267 34 32 50 80 38 116 -12
+    40 -55 79 -145 132 -49 29 -90 57 -90 62 0 5 11 46 25 91 102 336 123 766 54
+    1124 -74 390 -240 750 -489 1067 -35 44 -122 139 -195 211 -102 102 -146 138
+    -196 162 -84 41 -156 49 -227 24z"/>
+    <path d="M2724 3688 c-37 -32 -66 -87 -164 -308 -39 -89 -150 -335 -193 -430
+    -69 -154 -199 -442 -460 -1027 -159 -355 -167 -375 -167 -435 0 -77 23 -131
+    74 -176 32 -28 44 -32 91 -32 81 0 118 37 183 183 220 490 295 658 349 777 27
+    60 92 203 256 570 58 129 140 312 182 405 101 223 104 231 104 295 1 70 -34
+    147 -81 184 -27 20 -46 26 -86 26 -44 0 -57 -5 -88 -32z"/>
+    <path d="M1260 3283 c-45 -23 -531 -656 -554 -722 -21 -60 -20 -146 3 -197 10
+    -22 63 -99 118 -170 54 -71 161 -211 236 -310 159 -211 174 -227 222 -241 102
+    -32 205 69 208 203 3 99 -6 114 -185 352 -94 125 -179 236 -189 247 -18 21
+    -16 24 157 250 97 127 186 250 197 275 32 69 28 162 -9 230 -16 29 -41 62 -55
+    73 -38 28 -106 32 -149 10z"/>
+    <path d="M3430 3289 c-97 -40 -145 -206 -93 -319 11 -25 100 -148 197 -275
+    173 -226 175 -229 157 -250 -10 -11 -95 -122 -189 -247 -179 -238 -188 -253
+    -185 -352 3 -134 106 -235 208 -203 48 14 63 30 222 241 75 99 182 239 236
+    310 55 71 108 148 118 170 23 52 24 146 1 203 -20 50 -502 686 -537 709 -31
+    20 -102 27 -135 13z"/>
+    <path d="M373 1796 c-24 -20 -34 -40 -42 -79 -14 -68 -33 -971 -21 -1021 14
+    -61 50 -91 109 -90 43 0 66 11 177 77 l128 76 100 -97 c339 -327 782 -549
+    1261 -633 154 -27 494 -37 657 -19 209 22 492 91 597 144 52 27 115 87 138
+    131 25 47 29 147 8 201 -35 92 -115 154 -199 154 -26 0 -93 -16 -158 -39 -221
+    -75 -397 -105 -628 -105 -194 0 -299 12 -470 55 -221 55 -414 140 -601 265
+    -97 64 -250 186 -256 203 -2 3 36 28 83 56 112 65 144 101 144 162 0 41 -5 50
+    -39 82 -21 20 -222 139 -446 265 -357 201 -414 230 -459 234 -45 4 -56 1 -83
+    -22z"/>
+  </g>
+</svg>
diff --git a/packages/plugin-import-css/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js b/packages/plugin-import-css/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js
new file mode 100644
index 000000000..3a2b29f72
--- /dev/null
+++ b/packages/plugin-import-css/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js
@@ -0,0 +1,178 @@
+/*
+ * Use Case
+ * Run Greenwood with an API and SSR routes that import CSS.
+ *
+ * User Result
+ * Should generate a Greenwood build that correctly builds and bundles all assets.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * {
+ *   plugins: [
+ *      greenwoodPluginImportCss()
+ *   ]
+ * }
+ *
+ * User Workspace
+ *  src/
+ *   api/
+ *     fragment.js
+ *   components/
+ *     card.js
+ *     card.css
+ *   pages/
+ *     products.js
+ *   services/
+ *     products.js
+ *   styles/
+ *     some.css
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import path from 'path';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import request from 'request';
+import { Runner } from 'gallinago';
+import { fileURLToPath } from 'url';
+
+const expect = chai.expect;
+
+describe('Serve Greenwood With: ', function() {
+  const LABEL = 'A Server Rendered Application (SSR) with API Routes importing CSS';
+  const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
+  const outputPath = fileURLToPath(new URL('.', import.meta.url));
+  const hostname = 'http://127.0.0.1:8080';
+  let runner;
+
+  before(async function() {
+    this.context = {
+      publicDir: path.join(outputPath, 'public'),
+      hostname
+    };
+    runner = new Runner(false, true);
+  });
+
+  describe(LABEL, function() {
+
+    before(async function() {
+      await runner.setup(outputPath, getSetupFiles(outputPath));
+      await runner.runCommand(cliPath, 'build');
+
+      return new Promise(async (resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, 10000);
+
+        await runner.runCommand(cliPath, 'serve');
+      });
+    });
+
+    describe('Serve command with HTML route response for products page', function() {
+      let response = {};
+      let productsPageDom;
+
+      before(async function() {
+        return new Promise((resolve, reject) => {
+          request.get(`${hostname}/products/`, (err, res, body) => {
+            if (err) {
+              reject();
+            }
+
+            response = res;
+            response.body = body;
+            productsPageDom = new JSDOM(body);
+
+            resolve();
+          });
+        });
+      });
+
+      it('should return a 200 status', function(done) {
+        expect(response.statusCode).to.equal(200);
+        done();
+      });
+
+      it('should return the correct content type', function(done) {
+        expect(response.headers['content-type']).to.equal('text/html');
+        done();
+      });
+
+      it('should return a response body', function(done) {
+        expect(response.body).to.not.be.undefined;
+        done();
+      });
+
+      it('should have the expected import CSS in the page in the response body', function(done) {
+        const styleTag = productsPageDom.window.document.querySelectorAll('body > style');
+
+        expect(styleTag.length).to.equal(1);
+        expect(styleTag[0].textContent.replace(/ /g, '').replace(/\n/, '')).contain('h1{color:red;}');
+        done();
+      });
+
+      it('should make sure to have the expected CSS inlined into the page for each <app-card>', function(done) {
+        const cardComponents = productsPageDom.window.document.querySelectorAll('body app-card');
+
+        expect(cardComponents.length).to.equal(2);
+        Array.from(cardComponents).forEach((card) => {
+          expect(card.innerHTML).contain('display: flex;');
+        });
+        done();
+      });
+    });
+
+    describe('Serve command with API specific behaviors for an HTML ("fragment") API', function() {
+      let response = {};
+      let fragmentsApiDom;
+
+      before(async function() {
+        return new Promise((resolve, reject) => {
+          request.get(`${hostname}/api/fragment`, (err, res, body) => {
+            if (err) {
+              reject();
+            }
+
+            response = res;
+            response.body = body;
+            fragmentsApiDom = new JSDOM(body);
+
+            resolve();
+          });
+        });
+      });
+
+      it('should return a 200 status', function(done) {
+        expect(response.statusCode).to.equal(200);
+        done();
+      });
+
+      it('should return a custom status message', function(done) {
+        expect(response.statusMessage).to.equal('OK');
+        done();
+      });
+
+      it('should return the correct content type', function(done) {
+        expect(response.headers['content-type']).to.equal('text/html');
+        done();
+      });
+
+      it('should make sure to have the expected CSS inlined into the page for each <app-card>', function(done) {
+        const cardComponents = fragmentsApiDom.window.document.querySelectorAll('body > app-card');
+
+        expect(cardComponents.length).to.equal(2);
+        Array.from(cardComponents).forEach((card) => {
+          expect(card.innerHTML).contain('display: flex;');
+        });
+        done();
+      });
+    });
+  });
+
+  after(function() {
+    runner.teardown(getOutputTeardownFiles(outputPath));
+    runner.stopCommand();
+  });
+
+});
\ No newline at end of file
diff --git a/packages/plugin-import-css/test/cases/exp-serve.ssr/greenwood.config.js b/packages/plugin-import-css/test/cases/exp-serve.ssr/greenwood.config.js
new file mode 100644
index 000000000..9c52e8e22
--- /dev/null
+++ b/packages/plugin-import-css/test/cases/exp-serve.ssr/greenwood.config.js
@@ -0,0 +1,7 @@
+import { greenwoodPluginImportCss } from '../../../src/index.js';
+
+export default {
+  plugins: [
+    ...greenwoodPluginImportCss()
+  ]
+};
\ No newline at end of file
diff --git a/packages/plugin-import-css/test/cases/exp-serve.ssr/package.json b/packages/plugin-import-css/test/cases/exp-serve.ssr/package.json
new file mode 100644
index 000000000..96fd81923
--- /dev/null
+++ b/packages/plugin-import-css/test/cases/exp-serve.ssr/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "test-plugin-import-css-serve-ssr",
+  "type": "module"
+}
\ No newline at end of file
diff --git a/packages/plugin-import-css/test/cases/exp-serve.ssr/src/api/fragment.js b/packages/plugin-import-css/test/cases/exp-serve.ssr/src/api/fragment.js
new file mode 100644
index 000000000..af4ced829
--- /dev/null
+++ b/packages/plugin-import-css/test/cases/exp-serve.ssr/src/api/fragment.js
@@ -0,0 +1,28 @@
+import { renderFromHTML } from 'wc-compiler';
+import { getProducts } from '../services/products.js';
+
+export async function handler() {
+  const products = await getProducts();
+  const { html } = await renderFromHTML(`
+    ${
+      products.map((product) => {
+        const { name, thumbnail } = product;
+
+        return `
+          <app-card
+            title="${name}"
+            thumbnail="${thumbnail}"
+          ></app-card>
+        `;
+      }).join('')
+    }
+  `, [
+    new URL('../components/card.js', import.meta.url)
+  ]);
+
+  return new Response(html, {
+    headers: new Headers({
+      'Content-Type': 'text/html'
+    })
+  });
+}
\ No newline at end of file
diff --git a/packages/plugin-import-css/test/cases/exp-serve.ssr/src/components/card.css b/packages/plugin-import-css/test/cases/exp-serve.ssr/src/components/card.css
new file mode 100644
index 000000000..db18c7c4a
--- /dev/null
+++ b/packages/plugin-import-css/test/cases/exp-serve.ssr/src/components/card.css
@@ -0,0 +1,44 @@
+div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid #818181;
+  width: fit-content;
+  border-radius: 10px;
+  padding: 2rem 1rem;
+  height: 680px;
+  justify-content: space-between;
+  background-color: #fff;
+  overflow-x: hidden;
+}
+
+button {
+  background: var(--color-accent);
+  color: var(--color-white);
+  padding: 1rem 2rem;
+  border: 0;
+  font-size: 1rem;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+img {
+  max-width: 500px;
+  min-width: 500px;
+  width: 100%;
+}
+
+h3 {
+  font-size: 1.85rem;
+}
+
+@media(max-width: 768px) {
+  img {
+    max-width: 300px;
+    min-width: 300px;
+  }
+  div {
+    height: 500px;
+  }
+}
\ No newline at end of file
diff --git a/packages/plugin-import-css/test/cases/exp-serve.ssr/src/components/card.js b/packages/plugin-import-css/test/cases/exp-serve.ssr/src/components/card.js
new file mode 100644
index 000000000..faf3e725e
--- /dev/null
+++ b/packages/plugin-import-css/test/cases/exp-serve.ssr/src/components/card.js
@@ -0,0 +1,31 @@
+import styles from './card.css';
+
+export default class Card extends HTMLElement {
+
+  selectItem() {
+    alert(`selected item is => ${this.getAttribute('title')}!`);
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const thumbnail = this.getAttribute('thumbnail');
+      const title = this.getAttribute('title');
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+        <style>
+          ${styles}
+        </style>
+        <div>
+          <h3>${title}</h3>
+          <img src="${thumbnail}" alt="${title}" loading="lazy" width="100%">
+          <button onclick="this.parentNode.parentNode.host.selectItem()">View Item Details</button>
+        </div>
+      `;
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+}
+
+customElements.define('app-card', Card);
\ No newline at end of file
diff --git a/packages/plugin-import-css/test/cases/exp-serve.ssr/src/pages/products.js b/packages/plugin-import-css/test/cases/exp-serve.ssr/src/pages/products.js
new file mode 100644
index 000000000..e5bf7b5bb
--- /dev/null
+++ b/packages/plugin-import-css/test/cases/exp-serve.ssr/src/pages/products.js
@@ -0,0 +1,31 @@
+import '../components/card.js';
+import { getProducts } from '../services/products.js';
+import styles from '../styles/some.css';
+
+export default class ProductsPage extends HTMLElement {
+  async connectedCallback() {
+    const products = await getProducts();
+    const html = products.map(product => {
+      const { name, thumbnail } = product;
+
+      return `
+        <app-card
+          title="${name}"
+          thumbnail="${thumbnail}"
+        >
+        </app-card>
+      `;
+    }).join('');
+
+    this.innerHTML = `
+      <h2>SSR Page (w/ WCC)</h2>
+      <h3>List of Products: ${products.length}</h3>
+      <style>
+        ${styles}
+      </style>
+      <div class="products-cards-container">
+        ${html}
+      </div>
+    `;
+  }
+}
\ No newline at end of file
diff --git a/packages/plugin-import-css/test/cases/exp-serve.ssr/src/services/products.js b/packages/plugin-import-css/test/cases/exp-serve.ssr/src/services/products.js
new file mode 100644
index 000000000..96c999dac
--- /dev/null
+++ b/packages/plugin-import-css/test/cases/exp-serve.ssr/src/services/products.js
@@ -0,0 +1,11 @@
+async function getProducts() {
+  return [{
+    name: 'iPhone 12',
+    thumbnail: 'iphone-12.png'
+  }, {
+    name: 'Samsung Galaxy',
+    thumbnail: 'samsung-galaxy.png'
+  }];
+}
+
+export { getProducts };
\ No newline at end of file
diff --git a/packages/plugin-import-css/test/cases/exp-serve.ssr/src/styles/some.css b/packages/plugin-import-css/test/cases/exp-serve.ssr/src/styles/some.css
new file mode 100644
index 000000000..9054080ff
--- /dev/null
+++ b/packages/plugin-import-css/test/cases/exp-serve.ssr/src/styles/some.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
\ No newline at end of file
diff --git a/packages/plugin-import-json/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js b/packages/plugin-import-json/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js
new file mode 100644
index 000000000..53035bf97
--- /dev/null
+++ b/packages/plugin-import-json/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js
@@ -0,0 +1,161 @@
+/*
+ * Use Case
+ * Run Greenwood with an API and SSR routes that import JSON.
+ *
+ * User Result
+ * Should generate a Greenwood build that correctly builds and bundles all assets.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * {
+ *   plugins: [
+ *      greenwoodPluginImportCss()
+ *   ]
+ * }
+ *
+ * User Workspace
+ *  src/
+ *   api/
+ *     fragment.js
+ *   components/
+ *     card.js
+ *   data/
+ *     products.json
+ *   pages/
+ *     products.js
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import path from 'path';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import request from 'request';
+import { Runner } from 'gallinago';
+import { fileURLToPath } from 'url';
+
+const expect = chai.expect;
+
+describe('Serve Greenwood With: ', function() {
+  const LABEL = 'A Server Rendered Application (SSR) with API Routes importing JSON';
+  const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
+  const outputPath = fileURLToPath(new URL('.', import.meta.url));
+  const hostname = 'http://127.0.0.1:8080';
+  let runner;
+
+  before(async function() {
+    this.context = {
+      publicDir: path.join(outputPath, 'public'),
+      hostname
+    };
+    runner = new Runner(false, true);
+  });
+
+  describe(LABEL, function() {
+
+    before(async function() {
+      await runner.setup(outputPath, getSetupFiles(outputPath));
+      await runner.runCommand(cliPath, 'build');
+
+      return new Promise(async (resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, 10000);
+
+        await runner.runCommand(cliPath, 'serve');
+      });
+    });
+
+    describe('Serve command with HTML route response for products page', function() {
+      let response = {};
+      let productsPageDom;
+
+      before(async function() {
+        return new Promise((resolve, reject) => {
+          request.get(`${hostname}/products/`, (err, res, body) => {
+            if (err) {
+              reject();
+            }
+
+            response = res;
+            response.body = body;
+            productsPageDom = new JSDOM(body);
+
+            resolve();
+          });
+        });
+      });
+
+      it('should return a 200 status', function(done) {
+        expect(response.statusCode).to.equal(200);
+        done();
+      });
+
+      it('should return the correct content type', function(done) {
+        expect(response.headers['content-type']).to.equal('text/html');
+        done();
+      });
+
+      it('should return a response body', function(done) {
+        expect(response.body).to.not.be.undefined;
+        done();
+      });
+
+      it('should make sure to have the expected number of <app-card> components on the page', function(done) {
+        const cardComponents = productsPageDom.window.document.querySelectorAll('body app-card');
+
+        expect(cardComponents.length).to.equal(2);
+        done();
+      });
+    });
+
+    describe('Serve command with API specific behaviors for an HTML ("fragment") API', function() {
+      let response = {};
+      let fragmentsApiDom;
+
+      before(async function() {
+        return new Promise((resolve, reject) => {
+          request.get(`${hostname}/api/fragment`, (err, res, body) => {
+            if (err) {
+              reject();
+            }
+
+            response = res;
+            response.body = body;
+            fragmentsApiDom = new JSDOM(body);
+
+            resolve();
+          });
+        });
+      });
+
+      it('should return a 200 status', function(done) {
+        expect(response.statusCode).to.equal(200);
+        done();
+      });
+
+      it('should return a custom status message', function(done) {
+        expect(response.statusMessage).to.equal('OK');
+        done();
+      });
+
+      it('should return the correct content type', function(done) {
+        expect(response.headers['content-type']).to.equal('text/html');
+        done();
+      });
+
+      it('should make sure to have the expected number of <app-card> components in the fragment', function(done) {
+        const cardComponents = fragmentsApiDom.window.document.querySelectorAll('body > app-card');
+
+        expect(cardComponents.length).to.equal(2);
+        done();
+      });
+    });
+  });
+
+  after(function() {
+    runner.teardown(getOutputTeardownFiles(outputPath));
+    runner.stopCommand();
+  });
+
+});
\ No newline at end of file
diff --git a/packages/plugin-import-json/test/cases/exp-serve.ssr/greenwood.config.js b/packages/plugin-import-json/test/cases/exp-serve.ssr/greenwood.config.js
new file mode 100644
index 000000000..f1d82b86b
--- /dev/null
+++ b/packages/plugin-import-json/test/cases/exp-serve.ssr/greenwood.config.js
@@ -0,0 +1,7 @@
+import { greenwoodPluginImportJson } from '../../../src/index.js';
+
+export default {
+  plugins: [
+    ...greenwoodPluginImportJson()
+  ]
+};
\ No newline at end of file
diff --git a/packages/plugin-import-json/test/cases/exp-serve.ssr/package.json b/packages/plugin-import-json/test/cases/exp-serve.ssr/package.json
new file mode 100644
index 000000000..e8ffeb80f
--- /dev/null
+++ b/packages/plugin-import-json/test/cases/exp-serve.ssr/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "test-plugin-import-json-serve-ssr",
+  "type": "module"
+}
\ No newline at end of file
diff --git a/packages/plugin-import-json/test/cases/exp-serve.ssr/src/api/fragment.js b/packages/plugin-import-json/test/cases/exp-serve.ssr/src/api/fragment.js
new file mode 100644
index 000000000..5c87399f3
--- /dev/null
+++ b/packages/plugin-import-json/test/cases/exp-serve.ssr/src/api/fragment.js
@@ -0,0 +1,27 @@
+import { renderFromHTML } from 'wc-compiler';
+import products from '../data/products.json';
+
+export async function handler() {
+  const { html } = await renderFromHTML(`
+    ${
+      products.map((product) => {
+        const { name, thumbnail } = product;
+
+        return `
+          <app-card
+            title="${name}"
+            thumbnail="${thumbnail}"
+          ></app-card>
+        `;
+      }).join('')
+    }
+  `, [
+    new URL('../components/card.js', import.meta.url)
+  ]);
+
+  return new Response(html, {
+    headers: new Headers({
+      'Content-Type': 'text/html'
+    })
+  });
+}
\ No newline at end of file
diff --git a/packages/plugin-import-json/test/cases/exp-serve.ssr/src/components/card.js b/packages/plugin-import-json/test/cases/exp-serve.ssr/src/components/card.js
new file mode 100644
index 000000000..f87ff6dd8
--- /dev/null
+++ b/packages/plugin-import-json/test/cases/exp-serve.ssr/src/components/card.js
@@ -0,0 +1,26 @@
+export default class Card extends HTMLElement {
+
+  selectItem() {
+    alert(`selected item is => ${this.getAttribute('title')}!`);
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const thumbnail = this.getAttribute('thumbnail');
+      const title = this.getAttribute('title');
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+        <div>
+          <h3>${title}</h3>
+          <img src="${thumbnail}" alt="${title}" loading="lazy" width="100%">
+          <button onclick="this.parentNode.parentNode.host.selectItem()">View Item Details</button>
+        </div>
+      `;
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+}
+
+customElements.define('app-card', Card);
\ No newline at end of file
diff --git a/packages/plugin-import-json/test/cases/exp-serve.ssr/src/data/products.json b/packages/plugin-import-json/test/cases/exp-serve.ssr/src/data/products.json
new file mode 100644
index 000000000..8cc5afbec
--- /dev/null
+++ b/packages/plugin-import-json/test/cases/exp-serve.ssr/src/data/products.json
@@ -0,0 +1,7 @@
+[{
+  "name": "iPhone 12",
+  "thumbnail": "iphone-12.png"
+}, {
+  "name": "Samsung Galaxy",
+  "thumbnail": "samsung-galaxy.png"
+}]
\ No newline at end of file
diff --git a/packages/plugin-import-json/test/cases/exp-serve.ssr/src/pages/products.js b/packages/plugin-import-json/test/cases/exp-serve.ssr/src/pages/products.js
new file mode 100644
index 000000000..1358f8a57
--- /dev/null
+++ b/packages/plugin-import-json/test/cases/exp-serve.ssr/src/pages/products.js
@@ -0,0 +1,26 @@
+import '../components/card.js';
+import products from '../data/products.json';
+
+export default class ProductsPage extends HTMLElement {
+  async connectedCallback() {
+    const html = products.map(product => {
+      const { name, thumbnail } = product;
+
+      return `
+        <app-card
+          title="${name}"
+          thumbnail="${thumbnail}"
+        >
+        </app-card>
+      `;
+    }).join('');
+
+    this.innerHTML = `
+      <h2>SSR Page (w/ WCC)</h2>
+      <h3>List of Products: ${products.length}</h3>
+      <div class="products-cards-container">
+        ${html}
+      </div>
+    `;
+  }
+}
\ No newline at end of file
diff --git a/packages/plugin-typescript/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js b/packages/plugin-typescript/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js
new file mode 100644
index 000000000..05af075d6
--- /dev/null
+++ b/packages/plugin-typescript/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js
@@ -0,0 +1,118 @@
+/*
+ * Use Case
+ * Run Greenwood with an API and SSR routes that import TypeScript.
+ *
+ * User Result
+ * Should generate a Greenwood build that correctly builds and bundles all assets.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * {
+ *   plugins: [
+ *      greenwoodPluginTypeScript()
+ *   ]
+ * }
+ *
+ * User Workspace
+ *  src/
+ *   api/
+ *     fragment.js
+ *   components/
+ *     card.ts
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import path from 'path';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import request from 'request';
+import { Runner } from 'gallinago';
+import { fileURLToPath } from 'url';
+
+const expect = chai.expect;
+
+describe('Serve Greenwood With: ', function() {
+  const LABEL = 'A Server Rendered Application (SSR) with API Routes importing TypeScript';
+  const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
+  const outputPath = fileURLToPath(new URL('.', import.meta.url));
+  const hostname = 'http://127.0.0.1:8080';
+  let runner;
+
+  before(async function() {
+    this.context = {
+      publicDir: path.join(outputPath, 'public'),
+      hostname
+    };
+    runner = new Runner(false, true);
+  });
+
+  describe(LABEL, function() {
+
+    before(async function() {
+      await runner.setup(outputPath, getSetupFiles(outputPath));
+      await runner.runCommand(cliPath, 'build');
+
+      return new Promise(async (resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, 10000);
+
+        await runner.runCommand(cliPath, 'serve');
+      });
+    });
+
+    describe('Serve command with API specific behaviors for an HTML ("fragment") API', function() {
+      let response = {};
+      let fragmentsApiDom;
+
+      before(async function() {
+        return new Promise((resolve, reject) => {
+          request.get(`${hostname}/api/fragment`, (err, res, body) => {
+            if (err) {
+              reject();
+            }
+
+            console.log({ body });
+            response = res;
+            response.body = body;
+            fragmentsApiDom = new JSDOM(body);
+
+            resolve();
+          });
+        });
+      });
+
+      it('should return a 200 status', function(done) {
+        expect(response.statusCode).to.equal(200);
+        done();
+      });
+
+      it('should return a custom status message', function(done) {
+        expect(response.statusMessage).to.equal('OK');
+        done();
+      });
+
+      it('should return the correct content type', function(done) {
+        expect(response.headers['content-type']).to.equal('text/html');
+        done();
+      });
+
+      it('should make sure to have the expected CSS inlined into the page for each <app-card>', function(done) {
+        const cardComponents = fragmentsApiDom.window.document.querySelectorAll('body > app-card');
+
+        expect(cardComponents.length).to.equal(2);
+        Array.from(cardComponents).forEach((card) => {
+          expect(card.innerHTML).contain('font-size: 1.85rem');
+        });
+        done();
+      });
+    });
+  });
+
+  after(function() {
+    runner.teardown(getOutputTeardownFiles(outputPath));
+    runner.stopCommand();
+  });
+
+});
\ No newline at end of file
diff --git a/packages/plugin-typescript/test/cases/exp-serve.ssr/greenwood.config.js b/packages/plugin-typescript/test/cases/exp-serve.ssr/greenwood.config.js
new file mode 100644
index 000000000..e0f06cfb5
--- /dev/null
+++ b/packages/plugin-typescript/test/cases/exp-serve.ssr/greenwood.config.js
@@ -0,0 +1,7 @@
+import { greenwoodPluginTypeScript } from '../../../src/index.js';
+
+export default {
+  plugins: [
+    ...greenwoodPluginTypeScript()
+  ]
+};
\ No newline at end of file
diff --git a/packages/plugin-typescript/test/cases/exp-serve.ssr/package.json b/packages/plugin-typescript/test/cases/exp-serve.ssr/package.json
new file mode 100644
index 000000000..4929e3519
--- /dev/null
+++ b/packages/plugin-typescript/test/cases/exp-serve.ssr/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "test-plugin-import-ts-serve-ssr",
+  "type": "module"
+}
\ No newline at end of file
diff --git a/packages/plugin-typescript/test/cases/exp-serve.ssr/src/api/fragment.js b/packages/plugin-typescript/test/cases/exp-serve.ssr/src/api/fragment.js
new file mode 100644
index 000000000..d03a8f3e6
--- /dev/null
+++ b/packages/plugin-typescript/test/cases/exp-serve.ssr/src/api/fragment.js
@@ -0,0 +1,33 @@
+import { renderFromHTML } from 'wc-compiler';
+
+export async function handler() {
+  const products = [{
+    name: 'iPhone 12',
+    thumbnail: 'iphone-12.png'
+  }, {
+    name: 'Samsung Galaxy',
+    thumbnail: 'samsung-galaxy.png'
+  }];
+  const { html } = await renderFromHTML(`
+    ${
+      products.map((product) => {
+        const { name, thumbnail } = product;
+
+        return `
+          <app-card
+            title="${name}"
+            thumbnail="${thumbnail}"
+          ></app-card>
+        `;
+      }).join('')
+    }
+  `, [
+    new URL('../components/card/card.ts', import.meta.url)
+  ]);
+
+  return new Response(html, {
+    headers: new Headers({
+      'Content-Type': 'text/html'
+    })
+  });
+}
\ No newline at end of file
diff --git a/packages/plugin-typescript/test/cases/exp-serve.ssr/src/components/card/card.ts b/packages/plugin-typescript/test/cases/exp-serve.ssr/src/components/card/card.ts
new file mode 100644
index 000000000..2cad71359
--- /dev/null
+++ b/packages/plugin-typescript/test/cases/exp-serve.ssr/src/components/card/card.ts
@@ -0,0 +1,33 @@
+import { styles } from './styles.ts';
+
+const fallbackImage = new URL('./logo.png', import.meta.url);
+
+export default class Card extends HTMLElement {
+
+  selectItem() {
+    alert(`selected item is => ${this.getAttribute('title')}!`);
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const thumbnail: String = this.getAttribute('thumbnail') || fallbackImage.href;
+      const title: String = this.getAttribute('title');
+      const template: any = document.createElement('template');
+
+      template.innerHTML = `
+        <style>
+          ${styles}
+        </style>
+        <div>
+          <h3>${title}</h3>
+          <img src="${thumbnail}" alt="${title}" loading="lazy" width="100%">
+          <button onclick="this.parentNode.parentNode.host.selectItem()">View Item Details</button>
+        </div>
+      `;
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+}
+
+customElements.define('app-card', Card);
\ No newline at end of file
diff --git a/packages/plugin-typescript/test/cases/exp-serve.ssr/src/components/card/logo.png b/packages/plugin-typescript/test/cases/exp-serve.ssr/src/components/card/logo.png
new file mode 100644
index 000000000..786360832
Binary files /dev/null and b/packages/plugin-typescript/test/cases/exp-serve.ssr/src/components/card/logo.png differ
diff --git a/packages/plugin-typescript/test/cases/exp-serve.ssr/src/components/card/styles.ts b/packages/plugin-typescript/test/cases/exp-serve.ssr/src/components/card/styles.ts
new file mode 100644
index 000000000..210e82df1
--- /dev/null
+++ b/packages/plugin-typescript/test/cases/exp-serve.ssr/src/components/card/styles.ts
@@ -0,0 +1,7 @@
+const styles: string = `
+  h3 {
+    font-size: 1.85rem;
+  }
+`;
+
+export { styles };
\ No newline at end of file
diff --git a/packages/plugin-typescript/test/cases/exp-serve.ssr/src/pages/index.html b/packages/plugin-typescript/test/cases/exp-serve.ssr/src/pages/index.html
new file mode 100644
index 000000000..555a68287
--- /dev/null
+++ b/packages/plugin-typescript/test/cases/exp-serve.ssr/src/pages/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+
+  <head>
+    <script type="module" src="../components/card/card.ts"></script>    
+  </head>
+
+  <body>
+    <h1>Hello World!</h1>
+    <app-card
+      title="foo"
+      thumbnail="bar.png"
+    ></app-card>
+  </body>
+  
+</html>
\ No newline at end of file
diff --git a/www/pages/docs/css-and-images.md b/www/pages/docs/css-and-images.md
index 657f048ee..893c01557 100644
--- a/www/pages/docs/css-and-images.md
+++ b/www/pages/docs/css-and-images.md
@@ -41,7 +41,7 @@ Styles can be done in any standards compliant way that will work in a browser.
 
 ### Assets
 
-For convenience, **Greenwood** does support an "assets" directory wherein anything copied into that will be present in the build output directory.  This is the recommended location for all your local images, fonts, etc.  Effectively anything that is not part of an `import`, `@import`, `<script>`, `<style>` or `<link>` will not be handled by **Greenwood**.
+For convenience, **Greenwood** does support an "assets" directory wherein anything included in that directory will automatically be copied into the build output directory.  This is the recommended location for all your local images, fonts, etc.  At this time, anything that is not referenced through an `import`, `@import`, `<script>`, `<style>` or `<link>` will not be handled by **Greenwood**.
 
 #### Example
 To use an image in a markdown file, you would reference it as so using standard markdown syntax:
@@ -61,25 +61,47 @@ You can do the same in your HTML
 </header>
 ```
 
+In your JavaScript, you can also use a combination of `new URL` and `import.meta.url` which means you can put the file anywhere in your project, not just the _assets/_ directory and it will be resolved automatically!  For production builds, Greenwood will generate a unique filename for the asset as well, e.g. _logo-83bc009f.svg_.
 
-> If you like an all-the-things-in-JS approach, Greenwood can be extended with [plugins](/plugins/) to support "webpack" like behavior as seen in the below example:
+> _We are looking to improve the developer experience around using `new URL` + `import.meta.url` as part of an overall isomorphic asset bundling strategy.  You can visit this [GitHub issue](https://github.com/ProjectEvergreen/greenwood/issues/1163) to follow along._
+
+```js
+const logo = new URL('../images/logo.svg', import.meta.url);
+
+class HeaderComponent extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <header>
+        <h1>Welcome to My Site!</h1>
+        <!-- handles nested routes / deeplinking, e.g. https://www.mysite.com/some/page/ -->
+        <img src="${logo.pathname.replace(window.location.pathname, '/')}" alt="Greenwood logo"/>
+      </header>
+    `;
+  }
+}
+
+customElements.define('x-header', HeaderComponent);
+```
+
+> If you like an all-the-things-in-JS approach, Greenwood can be extended with [plugins](/plugins/) to support "webpack" like behavior as seen in the below example for CSS:
 >
 > ```javascript
-> import { html, LitElement } from 'lit';
-> import headerCss from './header.css';
+> import styles from './header.css';
+> 
+> const logo = new URL('../images/logo.svg', import.meta.url);
 >
-> class HeaderComponent extends LitElement {
->  render() {
->    return html`
->      <style>
->        ${headerCss}
->      <style>
->      <header>
->        <h1>Welcome to My Site!</h1>
->        <img alt="brand logo" src="${logo}" />
->      </header>
+> class HeaderComponent extends HTMLElement {
+>   connectedCallback() {
+>     this.innerHTML = `
+>       <style>
+>         ${styles}
+>       <style>
+>       <header>
+>         <h1>Welcome to My Site!</h1>
+>         <img src="${logo.pathname.replace(window.location.pathname, '/')}" alt="Greenwood logo"/>
+>       </header>
 >    `;
->  }
+>   }
 > }
 >
 > customElements.define('x-header', HeaderComponent);
diff --git a/yarn.lock b/yarn.lock
index bf2754a27..87ff24df7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3636,7 +3636,7 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^4.0.0", "@rollup/pluginutils@^4.1.0":
+"@rollup/pluginutils@^4.0.0":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
   integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
@@ -4206,15 +4206,6 @@
     node-gyp-build "^4.2.2"
     resolve-from "^5.0.0"
 
-"@web/rollup-plugin-import-meta-assets@^1.0.0":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@web/rollup-plugin-import-meta-assets/-/rollup-plugin-import-meta-assets-1.0.7.tgz#7048f717e2218a22af547371ffafdc4f534a2eea"
-  integrity sha512-ft44CqITUkNd8stwNb4ZOvrZ8DlPifM821jplksmxRGetg5Lx684oFrpfQJ7mfkU/Sa7B3dI1mHTX0DE52eBwg==
-  dependencies:
-    "@rollup/pluginutils" "^4.1.0"
-    estree-walker "^2.0.2"
-    magic-string "^0.25.7"
-
 "@webcomponents/scoped-custom-element-registry@^0.0.3":
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/@webcomponents/scoped-custom-element-registry/-/scoped-custom-element-registry-0.0.3.tgz#774591a886b0b0e4914717273ba53fd8d5657522"
@@ -7577,7 +7568,7 @@ estraverse@^5.1.0, estraverse@^5.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
   integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
 
-estree-walker@2.0.2, estree-walker@^2.0.1, estree-walker@^2.0.2:
+estree-walker@2.0.2, estree-walker@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==