css imports and raw plugin interop with test cases

packages/cli/src/config/rollup.config.js

@@ -51,6 +51,7 @@ function greenwoodResourceLoader (compilation) {
       //   : 'empty'
       const headers = {
         // 'Content-Type': type === 'css' ? 'text/css' : 'text/javascript',
+        'Accept': 'text/javascript',
         'Sec-Fetch-Dest': 'empty'
       };
 
@@ -194,6 +195,7 @@ function greenwoodImportMetaUrl(compilation) {
       //   : 'empty'
       const headers = {
         // 'Content-Type': type === 'css' ? 'text/css' : 'text/javascript',
+        'Accept': 'text/javascript',
         'Sec-Fetch-Dest': 'empty'
       };
       const request = new Request(idUrl, {
@@ -370,9 +372,10 @@ const getRollupConfigForScriptResources = async (compilation) => {
       chunkFileNames: '[name].[hash].js',
       sourcemap: true
     },
-    acornInjectPlugins: [
-      importAttributes
-    ],
+    // TODO do we need this?
+    // acornInjectPlugins: [
+    //   importAttributes
+    // ],
     plugins: [
       greenwoodResourceLoader(compilation),
       greenwoodSyncPageResourceBundlesPlugin(compilation),

packages/cli/src/lifecycles/bundle.js

@@ -144,7 +144,7 @@ async function bundleStyleResources(compilation, resourcePlugins) {
       } else {
         const url = resource.sourcePathURL;
         const contentType = 'text/css';
-        const headers = new Headers({ 'Content-Type': contentType });
+        const headers = new Headers({ 'Content-Type': contentType, 'Accept': contentType });
         const request = new Request(url, { headers });
         const initResponse = new Response(contents, { headers });
 

packages/cli/src/loader.js

@@ -15,11 +15,9 @@ const resourcePlugins = config.plugins.filter(plugin => plugin.type === 'resourc
 }));
 
 async function getCustomLoaderResponse(url, type = '', checkOnly = false) {
-  // const dest = type === 'css'
-  //   ? 'style'
-  //   : 'empty'
   const headers = {
     // 'Content-Type': type === 'css' ? 'text/css' : 'text/javascript',
+    'Accept': 'text/javascript',
     'Sec-Fetch-Dest': 'empty'
   };
   const request = new Request(url, { headers });
@@ -64,8 +62,7 @@ async function getCustomLoaderResponse(url, type = '', checkOnly = false) {
 // https://nodejs.org/docs/latest-v18.x/api/esm.html#resolvespecifier-context-nextresolve
 export async function resolve(specifier, context, defaultResolve) {
   const { parentURL } = context;
-  // const fauxType = specifier.indexOf('?type=raw') > 0 ? 'raw' : false;
-  const type = context?.importAttributes?.type || undefined;
+  const type = context?.importAttributes?.type;
   const url = specifier.startsWith('file://')
     ? new URL(specifier)
     : specifier.startsWith('.')
@@ -89,18 +86,17 @@ export async function resolve(specifier, context, defaultResolve) {
 // https://nodejs.org/docs/latest-v18.x/api/esm.html#loadurl-context-nextload
 export async function load(source, context, defaultLoad) {
   const extension = source.split('.').pop();
-  // const fauxType = source.indexOf('?type=raw') > 0 ? 'raw' : false; // TODO
-  const type = context?.importAttributes?.type || undefined;
+  const type = context?.importAttributes?.type;
   const url = new URL(source);
   const { shouldHandle } = await getCustomLoaderResponse(url, type, true);
 
   if (shouldHandle && extension !== 'js') {
     const { response } = await getCustomLoaderResponse(url, type);
-    const body = await response.text();
+    const contents = await response.text();
 
     return {
       format: 'module',
-      source: body,
+      source: contents,
       shortCircuit: true
     };
   }

packages/cli/src/plugins/resource/plugin-standard-css.js

@@ -229,10 +229,10 @@ class StandardCssResource extends ResourceInterface {
 
   async shouldIntercept(url, request) {
     const { pathname, searchParams } = url;
-    const type = pathname.split('.').pop();
-    const dest = request.headers.get('Sec-Fetch-Dest');
+    const ext = pathname.split('.').pop();
+    // const dest = request.headers.get('Sec-Fetch-Dest');
 
-    return url.protocol === 'file:' && type === this.extensions[0] && dest === 'empty' && searchParams.has('type') !== true;
+    return url.protocol === 'file:' && ext === this.extensions[0] && request.headers.get('Accept')?.indexOf('text/javascript') >= 0 && !searchParams.has('type') // dest === 'empty' && searchParams.has('type') !== true;
   }
 
   async intercept(url, request, response) {

packages/cli/src/plugins/resource/plugin-standard-json.js

@@ -42,11 +42,11 @@ class StandardJsonResource extends ResourceInterface {
   }
 
   async shouldIntercept(url, request) {
-    const { protocol, pathname } = url;
-    const type = pathname.split('.').pop();
-    const dest = request.headers.get('sec-fetch-dest');
+    const { protocol, pathname, searchParams } = url;
+    const ext = pathname.split('.').pop();
+    // const dest = request.headers.get('sec-fetch-dest');
 
-    return protocol === 'file:' && dest === 'empty' && type === this.extensions[0];
+    return protocol === 'file:' && request.headers.get('Accept')?.indexOf('text/javascript') >= 0 && ext === this.extensions[0] && !searchParams.has('type'); // dest === 'empty' && type === this.extensions[0];
   }
 
   async intercept(url, request, response) {

packages/cli/test/cases/exp-build.import-attributes/exp-build.import-attributes.spec.js

@@ -0,0 +1,77 @@
+/*
+ * Use Case
+ * Run Greenwood serve command with no config for using import attributes with a basic static bundles.
+ *
+ * User Result
+ * Should start the development server and render a bare bones Greenwood build.
+ *
+ * User Command
+ * greenwood serve
+ *
+ * User Config
+ * {}
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     card/
+ *       card.css
+ *       card.js
+ *       card.json
+ *   pages/
+ *     index.html
+ * 
+ */
+import chai from 'chai';
+import fs from 'fs';
+import glob from 'glob-promise';
+import path from 'path';
+import { Runner } from 'gallinago';
+import { fileURLToPath, URL } from 'url';
+
+const expect = chai.expect;
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Import Attributes used in static pages';
+  const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
+  const outputPath = fileURLToPath(new URL('.', import.meta.url));
+  const hostname = 'http://localhost:8080';
+  let runner;
+
+  before(function() {
+    this.context = {
+      hostname
+    };
+    runner = new Runner(false, true);
+  });
+
+  describe(LABEL, function() {
+
+    before(async function() {
+      runner.setup(outputPath);
+      runner.runCommand(cliPath, 'build');
+    });
+
+    describe('Importing CSS w/ Constructable Stylesheets', function() {
+      let scripts;
+
+      before(async function() {
+        scripts = await glob.promise(path.join(outputPath, 'public/card.*.js'));
+      });
+
+      it('should have the expected output from importing hero.css as a Constructable Stylesheet', function() {
+        const scriptContents = fs.readFileSync(scripts[0], 'utf-8');
+
+        expect(scriptContents).to.contain('const e=new CSSStyleSheet;e.replaceSync(":host {   color: red; }");');
+      });
+    });
+  });
+
+  after(function() {
+    runner.stopCommand();
+    runner.teardown([
+      path.join(outputPath, '.greenwood'),
+      path.join(outputPath, 'node_modules')
+    ]);
+  });
+});

packages/cli/test/cases/exp-build.import-attributes/src/pages/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="../components/card/card.js"></script>
+  </head>
+
+  <body>
+    <h1>The home page</h1>
+    <app-card></app-card>
+  </body>
+</html>

packages/cli/test/cases/exp-build.prerender-import-attributes/exp-build.prerender-import-attributes.spec.js

@@ -13,9 +13,6 @@
  *
  * {
  *   prerender: true,
- *   plugins: [{
- *     greenwoodPluginImportCss()
- *   }]
  * }
  *
  * User Workspace
@@ -67,10 +64,12 @@ describe('(Experimental) Build Greenwood With: ', function() {
         scripts = await glob.promise(path.join(this.context.publicDir, '*.js'));
       });
 
+      // TODO is this actually the output we want here?
+      // https://github.com/ProjectEvergreen/greenwood/discussions/1216
       it('should have the expected output from importing hero.css as a Constructable Stylesheet', function() {
         const scriptContents = fs.readFileSync(scripts[0], 'utf-8');
 
-        expect(scriptContents).to.contain('const e=new CSSStyleSheet;e.replaceSync(":host {   text-align: center');
+        expect(scriptContents).to.contain('const t=new CSSStyleSheet;t.replaceSync(":host {   text-align: center');
       });
     });
 

packages/cli/test/cases/exp-build.prerender-import-attributes/src/components/hero/hero.js

@@ -7,8 +7,6 @@ export default class HeroBanner extends HTMLElement {
   }
 
   connectedCallback() {
-    console.log({ sheet, data });
-
     if (!this.shadowRoot) {
       const template = document.createElement('template');
 

packages/cli/test/cases/exp-develop.import-attributes/exp-develop.import-attributes.spec.js → packages/cli/test/cases/exp-develop.ssr-import-attributes/exp-develop.ssr-import-attributes.spec.js

@@ -22,8 +22,7 @@
  *       card.json
  *   pages/
  *     greeting.js
- *
- * package.json
+ * 
  */
 import chai from 'chai';
 import { JSDOM } from 'jsdom';
@@ -61,6 +60,56 @@ describe('Develop Greenwood With: ', function() {
       });
     });
 
+    describe('CSS file is returned as CSS (text/css)', function() {
+      let response = {};
+      let body;
+
+      before(async function() {
+        response = await fetch(`${hostname}/components/card/card.css`);
+        body = await response.clone().text();
+      });
+
+      it('should return a 200 status', function(done) {
+        expect(response.status).to.equal(200);
+        done();
+      });
+
+      it('should return the correct content type', function(done) {
+        expect(response.headers.get('content-type')).to.equal('text/css');
+        done();
+      });
+
+      it('should return the correct response body', function(done) {
+        expect(body).to.equal(':host {\n  color: red;\n}');
+        done();
+      });
+    });
+
+    describe('JSON file is returned as JSON (application/json)', function() {
+      let response = {};
+      let data;
+
+      before(async function() {
+        response = await fetch(`${hostname}/components/card/card.json`);
+        data = await response.clone().json();
+      });
+
+      it('should return a 200 status', function(done) {
+        expect(response.status).to.equal(200);
+        done();
+      });
+
+      it('should return the correct content type', function(done) {
+        expect(response.headers.get('content-type')).to.equal('application/json');
+        done();
+      });
+
+      it('should return the correct response body data', function(done) {
+        expect(data.image.url).to.equal('/path/to/image.webp');
+        done();
+      });
+    });
+
     describe('API Route specific behaviors for an HTML ("fragment") API', function() {
       const name = 'Greenwood';
       let response = {};

packages/cli/test/cases/exp-serve.import-attributes/exp-serve.import-attributes.spec.js → packages/cli/test/cases/exp-serve.default.ssr-import-attributes/exp-serve.default.ssr-import-attributes.spec.js

@@ -22,10 +22,11 @@
  *       card.json
  *   pages/
  *     greeting.js
- *
- * package.json
+ * 
  */
 import chai from 'chai';
+import fs from 'fs';
+import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
 import { Runner } from 'gallinago';
@@ -66,10 +67,12 @@ describe('Serve Greenwood With: ', function() {
       const name = 'Greenwood';
       let response = {};
       let body;
+      let scripts;
 
       before(async function() {
         response = await fetch(`${hostname}/api/fragment?name=${name}`);
         body = await response.clone().text();
+        scripts = await glob.promise(path.join(outputPath, 'public/api/card.*.js'));
       });
 
       it('should return a 200 status', function(done) {
@@ -93,15 +96,29 @@ describe('Serve Greenwood With: ', function() {
 
         done();
       });
+
+      it('should have the expected output from importing hero.css as a Constructable Stylesheet', function() {
+        const scriptContents = fs.readFileSync(scripts[0], 'utf-8');
+
+        expect(scriptContents).to.contain('const sheet = new CSSStyleSheet();sheet.replaceSync(`:host {   color: red; }`);');
+      });
+
+      it('should have the expected output from importing hero.json', function() {
+        const scriptContents = fs.readFileSync(scripts[0], 'utf-8');
+
+        expect(scriptContents).to.contain('var data = {"image":{"url":"/path/to/image.webp"}};');
+      });
     });
 
     describe('SSR route specific behaviors when using a custom element as the page', function() {
       let response = {};
       let body;
+      let scripts;
 
       before(async function() {
         response = await fetch(`${hostname}/greeting/`);
         body = await response.clone().text();
+        scripts = await glob.promise(path.join(outputPath, 'public/greeting.route.chunk.*.js'));
       });
 
       it('should return a 200 status', function(done) {
@@ -125,6 +142,18 @@ describe('Serve Greenwood With: ', function() {
 
         done();
       });
+
+      it('should have the expected output from importing hero.css as a Constructable Stylesheet', function() {
+        const scriptContents = fs.readFileSync(scripts[0], 'utf-8');
+
+        expect(scriptContents).to.contain('const sheet = new CSSStyleSheet();sheet.replaceSync(`:host {   color: red; }`);');
+      });
+
+      it('should have the expected output from importing hero.json', function() {
+        const scriptContents = fs.readFileSync(scripts[0], 'utf-8');
+
+        expect(scriptContents).to.contain('var data = {"image":{"url":"/path/to/image.webp"}};');
+      });
     });
   });
 

packages/cli/test/cases/exp-serve.default.ssr-import-attributes/src/components/card/card.css

@@ -0,0 +1,3 @@
+:host {
+  color: red;
+}