Enhancement/issue 763 custom css minification and bundling

packages/cli/package.json

@@ -29,16 +29,14 @@
     "acorn": "^8.0.1",
     "acorn-walk": "^8.0.0",
     "commander": "^2.20.0",
-    "cssnano": "^5.0.11",
+    "css-tree": "^2.2.1",
     "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

@@ -88,6 +88,12 @@ async function bundleStyleResources(compilation, optimizationPlugins) {
         const url = resource.sourcePathURL.pathname;
         let optimizedStyles = await fs.promises.readFile(url, 'utf-8');
 
+        for (const plugin of optimizationPlugins) {
+          optimizedStyles = await plugin.shouldIntercept(url, optimizedStyles)
+            ? (await plugin.intercept(url, optimizedStyles)).body
+            : optimizedStyles;
+        }
+
         for (const plugin of optimizationPlugins) {
           optimizedStyles = await plugin.shouldOptimize(url, optimizedStyles)
             ? await plugin.optimize(url, optimizedStyles)
@@ -127,7 +133,8 @@ const bundleCompilation = async (compilation) => {
       }).map((plugin) => {
         return plugin.provider(compilation);
       }).filter((provider) => {
-        return provider.shouldOptimize && provider.optimize;
+        return provider.shouldIntercept && provider.intercept
+          || provider.shouldOptimize && provider.optimize;
       });
       // centrally register all static resources
       compilation.graph.map((page) => {

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

@@ -5,12 +5,189 @@
  *
  */
 import fs from 'fs';
+import { parse, walk } from 'css-tree';
 import path from 'path';
-import cssnano from 'cssnano';
-import postcss from 'postcss';
-import postcssImport from 'postcss-import';
 import { ResourceInterface } from '../../lib/resource-interface.js';
 
+function bundleCss(body, url) {
+  const ast = parse(body, {
+    onParseError(error) {
+      console.log(error.formattedMessage);
+    }
+  });
+  let optimizedCss = '';
+
+  walk(ast, {
+    enter: function (node, item) { // eslint-disable-line complexity
+      const { type, name, value } = node;
+
+      if ((type === 'String' || type === 'Url') && this.atrulePrelude && this.atrule.name === 'import') {
+        const { value } = node;
+
+        if (value.indexOf('.') === 0) {
+          const importContents = fs.readFileSync(path.resolve(path.dirname(url), value), 'utf-8');
+
+          optimizedCss += bundleCss(importContents, url);
+        }
+      } else if (type === 'Atrule' && name !== 'import') {
+        optimizedCss += `@${name} `;
+      } else if (type === 'TypeSelector') {
+        optimizedCss += name;
+      } else if (type === 'IdSelector') {
+        optimizedCss += `#${name}`;
+      } else if (type === 'ClassSelector') {
+        optimizedCss += `.${name}`;
+      } else if (type === 'PseudoClassSelector') {
+        optimizedCss += `:${name}`;
+
+        switch (name) {
+
+          case 'lang':
+          case 'not':
+          case 'nth-child':
+          case 'nth-last-child':
+          case 'nth-of-type':
+          case 'nth-last-of-type':
+            optimizedCss += '(';
+            break;
+          default:
+            break;
+
+        }
+      } else if (type === 'Function') {
+        optimizedCss += `${name}(`;
+      } else if (type === 'MediaFeature') {
+        optimizedCss += ` (${name}:`;
+      } else if (type === 'PseudoElementSelector') {
+        optimizedCss += `::${name}`;
+      } else if (type === 'Block') {
+        optimizedCss += '{';
+      } else if (type === 'AttributeSelector') {
+        optimizedCss += '[';
+      } else if (type === 'Combinator') {
+        optimizedCss += name;
+      } else if (type === 'Nth') {
+        const { nth } = node;
+
+        switch (nth.type) {
+
+          case 'AnPlusB':
+            if (nth.a) {
+              optimizedCss += nth.a === '-1' ? '-n' : `${nth.a}n`;
+            }
+            if (nth.b) {
+              optimizedCss += nth.a ? `+${nth.b}` : nth.b;
+            }
+            break;
+          default:
+            break;
+
+        }
+      } else if (type === 'Declaration') {
+        optimizedCss += `${node.property}:`;
+      } else if (type === 'Url' && this.atrule?.name !== 'import') {
+        optimizedCss += `url('${node.value}')`;
+      } else if (type === 'Identifier' || type === 'Hash' || type === 'Dimension' || type === 'Number' || (type === 'String' && (this.atrule?.type !== 'import')) || type === 'Operator' || type === 'Raw' || type === 'Percentage') { // eslint-disable-line max-len
+        if (item && item.prev && type !== 'Operator' && item.prev.data.type !== 'Operator') {
+          optimizedCss += ' ';
+        }
+
+        switch (type) {
+
+          case 'Dimension':
+            optimizedCss += `${value}${node.unit}`;
+            break;
+          case 'Percentage':
+            optimizedCss += `${value}%`;
+            break;
+          case 'Hash':
+            optimizedCss += `#${value}`;
+            break;
+          case 'Identifier':
+            optimizedCss += name;
+            break;
+          case 'Number':
+            optimizedCss += value;
+            break;
+          case 'Operator':
+            optimizedCss += value;
+            break;
+          case 'String':
+            optimizedCss += `'${value}'`;
+            break;
+          case 'Raw':
+            optimizedCss += `${value.trim()}`;
+            break;
+          default:
+            break;
+
+        }
+      }
+    },
+    leave: function(node, item) {
+      switch (node.type) {
+
+        case 'Atrule':
+          if (node.name !== 'import') {
+            optimizedCss += '}';
+          }
+          break;
+        case 'Rule':
+          optimizedCss += '}';
+          break;
+        case 'Function':
+        case 'MediaFeature':
+          optimizedCss += ')';
+          break;
+        case 'PseudoClassSelector':
+          switch (node.name) {
+
+            case 'lang':
+            case 'not':
+            case 'nth-child':
+            case 'nth-last-child':
+            case 'nth-last-of-type':
+            case 'nth-of-type':
+              optimizedCss += ')';
+              break;
+            default:
+              break;
+
+          }
+          break;
+        case 'Declaration':
+          if (node.important) {
+            optimizedCss += '!important';
+          }
+
+          optimizedCss += ';';
+          break;
+        case 'Selector':
+          if (item.next) {
+            optimizedCss += ',';  
+          }
+          break;
+        case 'AttributeSelector':
+          if (node.matcher) {
+            // TODO better way to do this?
+            // https://github.com/csstree/csstree/issues/207
+            const name = node.name.name;
+            const value = node.value.type === 'Identifier' ? node.value.name : `'${node.value.value}'`;
+
+            optimizedCss = optimizedCss.replace(`${name}${value}`, `${name}${node.matcher}${value}`);
+          }
+          optimizedCss += ']';
+          break;
+        default:
+          break;
+
+      }
+    }
+  });
+
+  return optimizedCss;
+}
+
 class StandardCssResource extends ResourceInterface {
   constructor(compilation, options) {
     super(compilation, options);
@@ -41,15 +218,8 @@ class StandardCssResource extends ResourceInterface {
 
   async optimize(url, body) {
     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;
-
-        resolve(css);
+      try {
+        resolve(bundleCss(body, url));
       } catch (e) {
         reject(e);
       }

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

@@ -20,6 +20,7 @@
  *     theme.css
  */
 import chai from 'chai';
+import fs from 'fs';
 import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
@@ -33,6 +34,7 @@ describe('Build Greenwood With: ', function() {
   const LABEL = 'Default Optimization Configuration';
   const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
   const outputPath = fileURLToPath(new URL('.', import.meta.url));
+  const expectedCss = fs.readFileSync(path.join(outputPath, './fixtures/expected.css'), 'utf-8').replace(/\n/g, '');
   let runner;
 
   before(function() {
@@ -79,7 +81,7 @@ describe('Build Greenwood With: ', function() {
 
       describe('<link> tag and preloading', function() {
         it('should contain one style.css in the output directory', async function() {
-          expect(await glob.promise(`${path.join(this.context.publicDir, 'styles')}/theme.*.css`)).to.have.lengthOf(1);
+          expect(await glob.promise(`${path.join(this.context.publicDir, 'styles')}/main.*.css`)).to.have.lengthOf(1);
         });
 
         it('should have the expected <link> tag in the <head>', function() {
@@ -96,9 +98,18 @@ describe('Build Greenwood With: ', function() {
             .filter(link => link.getAttribute('as') === 'style');
 
           expect(preloadLinkTags.length).to.be.equal(1);
-          expect(preloadLinkTags[0].href).to.match(/\/styles\/theme.*.css/);
+          expect(preloadLinkTags[0].href).to.match(/\/styles\/main.*.css/);
           expect(preloadLinkTags[0].getAttribute('crossorigin')).to.equal('anonymous');
         });
+
+        // test custom CSS bundling
+        it('should have the expect preload CSS content in the file', async function() {
+          const cssFiles = await glob.promise(path.join(this.context.publicDir, 'styles/*.css'));
+          const customCss = await fs.promises.readFile(cssFiles[0], 'utf-8');
+
+          expect(cssFiles.length).to.be.equal(1);
+          expect(customCss).to.be.equal(expectedCss);
+        });
       });
     });
   });

packages/cli/test/cases/build.config.optimization-default/fixtures/expected.css

@@ -0,0 +1,43 @@
+:root,:host{--primary-color:#16f;--secondary-color:#ff7;}
+
+@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:local('Source Sans Pro Regular'),local('SourceSansPro-Regular'),url('/assets/fonts/source-sans-pro-v13-latin-regular.woff2')format('woff2'),url('/assets/fonts/source-sans-pro-v13-latin-regular.woff')format('woff'),url('/assets/fonts/source-sans-pro-v13-latin-regular.ttf')format('truetype');}
+
+*{margin:0;padding:0;font-family:'Comic Sans',sans-serif;}
+
+body{background-color:green;}
+
+h1,h2{color:var(--primary-color);border:0.5px solid #dddde1;}
+
+#foo,.bar{color:var(--secondary-color);}
+
+div>p{display:none;}
+
+a[title]{color:purple;}
+
+@media screen and (max-width:992px){body{background-color:blue;}}
+
+p::first-line{color:blue;width:100%!important;}
+
+pre[class*='language-']{color:#ccc;background:none;}
+
+dd:only-of-type{background-color:bisque;}
+
+:not(pre)>code[class*='language-']{background:#2d2d2d;}
+
+li:nth-child(-n+3){border:2px solid orange;margin-bottom:1px;}
+
+li:nth-child(even){background-color:lightyellow;}
+
+li:nth-last-child(5n){border:2px solid orange;margin-top:1px;}
+
+dd:nth-last-of-type(odd){border:2px solid orange;}
+
+p:nth-of-type(2n+1){color:red;}
+
+*:lang(en-US){outline:2px solid deeppink;}
+
+p~ul{font-weight:bold;}
+
+a[href*='greenwood'],a[href$='.pdf']{color:orange;}
+
+[title~=flower],a[href^='https'],[lang|=en]{text-decoration:underline;}

packages/cli/test/cases/build.config.optimization-default/src/pages/index.html

@@ -3,7 +3,7 @@
 
   <head>
     <script type="module" src="/components/header.js"></script>
-    <link rel="stylesheet" href="/styles/theme.css"></link>  
+    <link rel="stylesheet" href="/styles/main.css"></link>  
   </head>
 
   <body>