WIP parcel CSS integration

packages/cli/package.json

@@ -24,21 +24,19 @@
     "access": "public"
   },
   "dependencies": {
+    "@parcel/css": "^1.13.1",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.3.4",
     "acorn": "^8.0.1",
     "acorn-walk": "^8.0.0",
     "commander": "^2.20.0",
-    "cssnano": "^5.0.11",
     "es-module-shims": "^1.2.0",
     "front-matter": "^4.0.2",
     "koa": "^2.13.0",
     "livereload": "^0.9.1",
     "markdown-toc": "^1.2.0",
     "node-fetch": "^2.6.1",
     "node-html-parser": "^1.2.21",
-    "postcss": "^8.3.11",
-    "postcss-import": "^13.0.0",
     "rehype-raw": "^5.0.0",
     "rehype-stringify": "^8.0.0",
     "remark-frontmatter": "^2.0.0",

packages/cli/src/lifecycles/bundle.js

@@ -74,6 +74,7 @@ async function bundleStyleResources(compilation, optimizationPlugins) {
       }
 
       const outputPathRoot = path.join(outputDir, path.dirname(optimizedFileName));
+      const outputPath = path.join(outputDir, optimizedFileName);
 
       if (!fs.existsSync(outputPathRoot)) {
         fs.mkdirSync(outputPathRoot, {
@@ -88,21 +89,31 @@ async function bundleStyleResources(compilation, optimizationPlugins) {
         let optimizedStyles = await fs.promises.readFile(url, 'utf-8');
 
         for (const plugin of optimizationPlugins) {
-          optimizedStyles = await plugin.shouldOptimize(url, optimizedStyles)
-            ? await plugin.optimize(url, optimizedStyles)
+          optimizedStyles = await plugin.shouldIntercept(url, optimizedStyles)
+            ? (await plugin.intercept(url, optimizedStyles)).body
             : optimizedStyles;
         }
 
         optimizedFileContents = optimizedStyles;
       }
 
+      // have to do this to support ParcelCSS since bundling can only work with the filesystem
+      await fs.promises.writeFile(outputPath, optimizedFileContents);
+
+      for (const plugin of optimizationPlugins) {
+        if (await plugin.shouldOptimize(outputPath, optimizedFileContents)) {
+          optimizedFileContents = await plugin.optimize(outputPath, optimizedFileContents);
+          await fs.promises.writeFile(outputPath, optimizedFileContents);
+        }
+      }
+
       compilation.resources.set(resourceKey, {
         ...compilation.resources.get(resourceKey),
         optimizedFileName,
         optimizedFileContents
       });
 
-      await fs.promises.writeFile(path.join(outputDir, optimizedFileName), optimizedFileContents);
+      await fs.promises.writeFile(outputPath, optimizedFileContents);
     }
   }
 }
@@ -126,7 +137,8 @@ const bundleCompilation = async (compilation) => {
       }).map((plugin) => {
         return plugin.provider(compilation);
       }).filter((provider) => {
-        return provider.shouldOptimize && provider.optimize;
+        return provider.shouldOptimize && provider.optimize ||
+          provider.shouldIntercept && provider.intercept;
       });
       // centrally register all static resources
       compilation.graph.map((page) => {

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

@@ -6,9 +6,7 @@
  */
 import fs from 'fs';
 import path from 'path';
-import cssnano from 'cssnano';
-import postcss from 'postcss';
-import postcssImport from 'postcss-import';
+import * as css from '@parcel/css';
 import { ResourceInterface } from '../../lib/resource-interface.js';
 
 class StandardCssResource extends ResourceInterface {
@@ -39,17 +37,36 @@ class StandardCssResource extends ResourceInterface {
     return Promise.resolve(isValidCss);
   }
 
-  async optimize(url, body) {
+  async optimize(url) {
+    console.debug({ url });
+    const { outputDir, userWorkspace } = this.compilation.context;
+
     return new Promise(async (resolve, reject) => {
       try {  
-        const { outputDir, userWorkspace } = this.compilation.context;
-        const workspaceUrl = url.replace(outputDir, userWorkspace);
-        const contents = body || await fs.promises.readFile(url, 'utf-8');
-        const css = (await postcss([cssnano])
-          .use(postcssImport())
-          .process(contents, { from: workspaceUrl })).css;
+        // const { code } = css.transform({
+        //   code: new TextEncoder().encode(body),
+        //   minify: true
+        // });
+        const { code } = await css.bundleAsync({
+          filename: url,
+          minify: true,
+          resolver: {
+            resolve(specifier, from) {
+              console.debug('resolve', path.dirname(url.replace(outputDir, userWorkspace)));
+              console.debug({ from });
+              console.debug({ specifier });
+              if (specifier.indexOf('http') !== 0 && specifier.indexOf('//') !== 0) {
+                return path.resolve(path.dirname(url.replace(outputDir, userWorkspace)), specifier);
+              } else {
+                return specifier;
+              }
+            }
+          }
+        });
+
+        console.debug({ code });
 
-        resolve(css);
+        resolve(code);
       } catch (e) {
         reject(e);
       }

packages/cli/test/cases/build.config.optimization-inline/build.config-optimization-inline.spec.js

@@ -138,7 +138,7 @@ describe('Build Greenwood With: ', function() {
         it('should contain the expected CSS content inlined for theme.css', function() {
           const styleTags = dom.window.document.querySelectorAll('head style');
 
-          expect(styleTags[0].textContent).to.contain('*{font-family:Comic Sans,sans-serif;margin:0;padding:0}');
+          expect(styleTags[0].textContent).to.contain('*{margin:0;padding:0;font-family:Comic Sans,sans-serif}');
         });
 
         it('should contain the expected CSS content inlined for page.css', function() {

packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js

@@ -153,7 +153,7 @@ describe('Build Greenwood With: ', function() {
 
       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:blue}') >= 0);
+          .filter(style => style.textContent.indexOf('*{color:#00f}') >= 0);
 
         expect(themeStyleTags.length).to.be.equal(1);
       });

packages/cli/test/cases/build.default.workspace-getting-started/src/styles/theme.css

@@ -1,4 +1,4 @@
-@import url('//fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
 
 * {
   margin: 0;

packages/cli/test/cases/build.default.workspace-template-page/build.default.workspace-template-page.spec.js

@@ -122,7 +122,7 @@ describe('Build Greenwood With: ', function() {
           const customElement = dom.window.document.querySelector('.owen-test');
           const computedStyle = dom.window.getComputedStyle(customElement);
 
-          expect(computedStyle.color).to.equal('blue');
+          expect(computedStyle.color).to.equal('rgb(0, 0, 255)');
         });
 
         it('should have the color styles for the h3 element that we defined as part of our custom style', function() {

packages/plugin-postcss/README.md

@@ -79,7 +79,6 @@ By default, the configuration provided by this plugin is:
 ```javascript
 export default {
   plugins: [
-    (await import('cssnano')).default, // just for production builds
     (await import('postcss-preset-env')).default
   ]
 };

packages/plugin-postcss/package.json

@@ -7,7 +7,6 @@
   "license": "MIT",
   "keywords": [
     "Greenwood",
-    "CommonJS",
     "Static Site Generator",
     "NodeJS",
     "PostCSS"
@@ -21,11 +20,10 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@greenwood/cli": "^0.4.0",
-    "postcss": "^8.3.11"
+    "@greenwood/cli": "^0.4.0"
   },
   "dependencies": {
-    "cssnano": "^5.0.11",
+    "postcss": "^8.3.11",
     "postcss-preset-env": "^7.0.1"
   },
   "devDependencies": {

packages/plugin-postcss/src/index.js

@@ -63,26 +63,6 @@ class PostCssResource extends ResourceInterface {
       }
     });
   }
-
-  async shouldOptimize(url) {
-    return Promise.resolve(this.isCssFile(url));
-  }
-
-  async optimize(url, body) {
-    const contents = body || await fs.promises.readFile(url, 'utf-8');
-    const config = await getConfig(this.compilation, this.options.extendConfig);
-    const plugins = config.plugins && config.plugins.length ? [...config.plugins] : [];
-
-    plugins.push(
-      (await import('cssnano')).default
-    );
-
-    const css = plugins.length > 0
-      ? (await postcss(plugins).process(contents, { from: url })).css
-      : body;
-
-    return Promise.resolve(css);
-  }
 }
 
 const greenwoodPluginPostCss = (options = {}) => {

packages/plugin-postcss/test/cases/default/default.spec.js

@@ -59,7 +59,7 @@ describe('Build Greenwood With: ', function() {
 
     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 expectedCss = 'body{color:red}h1{color:#00f}';
         const cssFiles = glob.sync(path.join(this.context.publicDir, 'styles', '*.css'));
         const css = fs.readFileSync(cssFiles[0], 'utf-8');
 

packages/plugin-postcss/test/cases/options.extend-config/options.extend-config.spec.js

@@ -43,7 +43,7 @@ import { fileURLToPath, URL } from 'url';
 const expect = chai.expect;
 
 describe('Build Greenwood With: ', function() {
-  const LABEL = 'Custom PostCSS configuration';
+  const LABEL = 'Custom PostCSS configuration with extended options';
   const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
   const outputPath = fileURLToPath(new URL('.', import.meta.url));
   let runner;
@@ -66,7 +66,7 @@ describe('Build Greenwood With: ', function() {
 
     describe('Page referencing external nested CSS file', function() {
       it('should output correctly processed nested CSS as non nested', function() {
-        const expectedCss = 'body{color:red}body h1{color:blue}';
+        const expectedCss = 'body{color:red}body h1{color:#00f}';
         const cssFiles = glob.sync(path.join(this.context.publicDir, 'styles', '*.css'));
         const css = fs.readFileSync(cssFiles[0], 'utf-8');
 

www/templates/app.html

@@ -23,8 +23,8 @@
 
     <style>
       .gwd-content-outlet {
-        min-height: 100vh
-      };
+        min-height: 100vh;
+      }
     </style>
 
     <script type="module">