support css in disguise as JS in plugin-import-css

packages/plugin-import-css/README.md

@@ -40,7 +40,7 @@ This will then allow you use `import` to include CSS in your JavaScript files by
 import cardCss from './card.css?type=css'; // must be a relative path per ESM spec
 ```
 
-> _**Note**: Due to a characteristic of using ESM with CSS, Greenwood will also try and detect `import` usage (without needing `?type=css`), but it is recommended to favor explicitness as much as possible, given this is not a standard._
+> _**Note**: Due to a characteristic of using ESM with CSS, Greenwood will also try and detect `import` usage (without needing `?type=css`), but it is recommended to favor explicitness as much as possible, given this is not a standard.  Also, for projects like Material Web Components, this plugin will [resolve references to _some-file.css_ if the equivalent exists that ends in _.js (e.g. styles.css.js)_](https://github.com/ProjectEvergreen/greenwood/issues/700)._
 
 ### CSS @import
 If you plan to use [CSS `@import` rules](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) in any of the CSS you load with this plugin, then it is recommended to use our [**PostCSS plugin**](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-postcss) and make sure to add the **postcss-import** plugin to your _postcss.config.js_, to avoid [CSS bundling issues in production](https://github.com/ProjectEvergreen/greenwood/discussions/763)_.  ex:

packages/plugin-import-css/src/index.js

@@ -4,6 +4,7 @@
  * Enables using JavaScript to import CSS files, using ESM syntax.
  *
  */
+const fs = require('fs');
 const path = require('path');
 const postcssRollup = require('rollup-plugin-postcss');
 const { ResourceInterface } = require('@greenwood/cli/src/lib/resource-interface');
@@ -15,6 +16,17 @@ class ImportCssResource extends ResourceInterface {
     this.contentType = 'text/javascript';
   }
 
+  // https://github.com/ProjectEvergreen/greenwood/issues/700
+  async shouldResolve(url) {
+    const isCssInDisguise = url.endsWith(this.extensions[0]) && fs.existsSync(`${url}.js`);
+
+    return Promise.resolve(isCssInDisguise);
+  }
+
+  async resolve(url) {
+    return Promise.resolve(`${url}.js`);
+  }
+
   async shouldIntercept(url, body, headers) {
     const { originalUrl } = headers.request;
 

packages/plugin-import-css/test/cases/default/default.spec.js

@@ -32,7 +32,7 @@ const { getSetupFiles, getOutputTeardownFiles } = require('../../../../../test/u
 const Runner = require('gallinago').Runner;
 
 describe('Build Greenwood With: ', function() {
-  const LABEL = 'Import Css Plugin with default options';
+  const LABEL = 'Import CSS Plugin with default options';
   const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
   const outputPath = __dirname;
   let runner;

packages/plugin-import-css/test/cases/develop.default/develop.default.spec.js

@@ -90,6 +90,45 @@ describe('Develop Greenwood With: ', function() {
         done();
       });
     });
+
+    // https://github.com/ProjectEvergreen/greenwood/pull/747
+    // https://unpkg.com/browse/@material/[email protected]/styles.css.js
+    describe('Develop command specific ESM .css.js files behaviors (CSS in disguise)', function() {
+      let response = {};
+
+      before(async function() {
+        return new Promise((resolve, reject) => {
+          request.get({
+            url: `http://127.0.0.1:${port}/styles.css.js`
+          }, (err, res, body) => {
+            if (err) {
+              reject();
+            }
+
+            response = res;
+            response.body = body;
+
+            resolve();
+          });
+        });
+      });
+
+      it('should return a 200', 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/javascript');
+        done();
+      });
+
+      it('should return an ECMASCript module', function(done) {
+        expect(response.body).to.equal('export const styles = css `.mdc-touch-target-wrapper{display:inline}`;');
+        done();
+      });
+    });
   });
 
   after(function() {

packages/plugin-import-css/test/cases/develop.default/src/styles.css.js

@@ -0,0 +1 @@
+export const styles = css `.mdc-touch-target-wrapper{display:inline}`;