bug/issue 1355 handle CSS import attributes with PostCSS plugin when …

…prerendering (#1361)

packages/plugin-postcss/package.json

@@ -32,6 +32,7 @@
     "postcss-preset-env": "^7.0.1"
   },
   "devDependencies": {
-    "@greenwood/cli": "^0.31.0-alpha.1"
+    "@greenwood/cli": "^0.31.0-alpha.1",
+    "@spectrum-css/typography": "^6.2.0"
   }
 }

packages/plugin-postcss/src/index.js

@@ -35,7 +35,6 @@ class PostCssResource extends ResourceInterface {
 
   async shouldPreIntercept(url, request, response) {
     return url.protocol === 'file:'
-      && url.pathname.split('.').pop() === this.extensions[0]
       && (request?.headers?.get('Content-Type')?.includes('text/css') || response?.headers?.get('Content-Type')?.includes('text/css'));
   }
 
@@ -47,7 +46,11 @@ class PostCssResource extends ResourceInterface {
       ? (await postcss(plugins).process(body, { from: normalizePathnameForWindows(url) })).css
       : body;
 
-    return new Response(css);
+    // preserve original headers (content type / accept)
+    // since this could be used in JS or CSS contexts
+    return new Response(css, {
+      headers: response.headers
+    });
   }
 }
 

packages/plugin-postcss/test/cases/loaders-default.import-attributes/greenwood.config.js

@@ -0,0 +1,8 @@
+import { greenwoodPluginPostCss } from '../../../src/index.js';
+
+export default {
+  prerender: true,
+  plugins: [
+    greenwoodPluginPostCss()
+  ]
+};

packages/plugin-postcss/test/cases/loaders-default.import-attributes/loaders-default.import-attributes.spec.js

@@ -0,0 +1,89 @@
+/*
+ * Use Case
+ * Run Greenwood with default PostCSS config when using Import Attributes.
+ *
+ * User Result
+ * Should generate a bare bones Greenwood build with the user's CSS file correctly minified.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * const pluginPostCss = require('@greenwood/plugin-postcss');
+ *
+ * {
+ *   plugins: [
+ *     pluginPostCss()
+ *  ]
+ * }
+ *
+ * User Workspace
+ *  src/
+ *   components/
+ *     header/
+ *       header.js
+ *       header.css
+ *   pages/
+ *     index.html
+ *   styles/
+ *     theme.css
+ */
+import chai from 'chai';
+import fs from 'fs';
+import glob from 'glob-promise';
+import path from 'path';
+import { runSmokeTest } from '../../../../../test/smoke-test.js';
+import { getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { Runner } from 'gallinago';
+import { fileURLToPath, URL } from 'url';
+
+const expect = chai.expect;
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Default PostCSS configuration and CSS Import Attributes';
+  const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
+  const outputPath = fileURLToPath(new URL('.', import.meta.url));
+  let runner;
+
+  before(function() {
+    this.context = {
+      publicDir: path.join(outputPath, 'public')
+    };
+    runner = new Runner(false, true);
+  });
+
+  describe(LABEL, function() {
+
+    before(function() {
+      runner.setup(outputPath);
+      runner.runCommand(cliPath, 'build');
+    });
+
+    runSmokeTest(['public', 'index'], LABEL);
+
+    describe('Page referencing external nested CSS file', function() {
+      it('should output correctly processed nested CSS as non nested', function() {
+        const expectedCss = 'body{color:red}h1{color:blue}';
+        const cssFiles = glob.sync(path.join(this.context.publicDir, 'styles', '*.css'));
+        const css = fs.readFileSync(cssFiles[0], 'utf-8');
+
+        expect(cssFiles.length).to.equal(1);
+        expect(css).to.equal(expectedCss);
+      });
+
+      it('should output correctly processed import attributes in header.js bundle output', function() {
+        const headerFiles = glob.sync(path.join(this.context.publicDir, 'header.*.js'));
+        const js = fs.readFileSync(headerFiles[0], 'utf-8');
+
+        expect(headerFiles.length).to.equal(1);
+        expect(js.indexOf('import e from"/styles/theme.1126086472.css"with{type:"css"};') >= 0).to.equal(true);
+        expect(js.indexOf('import t from"/header.CaS9Xrom.css"with{type:"css"};') >= 0).to.equal(true);
+        expect(js.indexOf('const s=new CSSStyleSheet;s.replaceSync(\'.spectrum{--spectrum-font-family-ar:myriad-arabic') >= 0).to.equal(true);
+      });
+    });
+  });
+
+  after(function() {
+    runner.teardown(getOutputTeardownFiles(outputPath));
+  });
+});

packages/plugin-postcss/test/cases/loaders-default.import-attributes/src/components/header/header.css

@@ -0,0 +1,3 @@
+header {
+  background-color: aqua;
+}

packages/plugin-postcss/test/cases/loaders-default.import-attributes/src/components/header/header.js

@@ -0,0 +1,24 @@
+import themeSheet from '../../styles/theme.css' with { type: 'css' };
+import headerSheet from './header.css' with { type: 'css' };
+import SpectrumTypography from '@spectrum-css/typography' with { type: 'css' };
+
+export default class Header extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+        <header>
+          <span>Welcome to my site</span>
+        </header>
+      `;
+
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+
+    this.shadowRoot.adoptedStyleSheets = [themeSheet, headerSheet, SpectrumTypography];
+  }
+}
+
+customElements.define('app-header', Header);

packages/plugin-postcss/test/cases/loaders-default.import-attributes/src/pages/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+
+  <head>
+    <link rel="stylesheet" href="/styles/theme.css"></link>
+    <script type="module" src="../components/header/header.js"></script>
+  </head>
+
+  <body>
+    <app-header></app-header>
+    <h1>Hello World!</h1>
+  </body>
+
+</html>

packages/plugin-postcss/test/cases/loaders-default.import-attributes/src/styles/theme.css

@@ -0,0 +1,7 @@
+body {
+  color: red;
+}
+
+h1 {
+  color: blue;
+}

yarn.lock

@@ -4179,6 +4179,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-9.3.0.tgz#736d6035f75b34e49e9fcb0198ba4667d024ebf9"
   integrity sha512-uMWwh/kkkcOSf8W5Kz1TyQjaWxKeTKm1Gm5XaAyHu+IHk+mYJPrDeZNoYfyIqZ+x/RgyVcCzx2H3VXA/uUaaeA==
 
+"@spectrum-css/typography@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-6.2.0.tgz#2bf928d9fb7fb51bc67feeb3d8a82f8ee093ee87"
+  integrity sha512-yaqc4wFY3asUhh3zzdqRI5dVJow7xJ2nL2bo4AADDLT305Dtje5PYO89m+f3nTVf2utKE3H8nlJbWUG57QpFqw==
+
 "@spectrum-web-components/action-button@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-web-components/action-button/-/action-button-1.0.1.tgz#98fd0af1d825ec5c40a54f2d1cc1d311815a169e"