renable and update PostCSS test case

packages/cli/package.json

@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@mapbox/rehype-prism": "^0.5.0",
+    "postcss-nested": "^4.1.2",
     "rehype-autolink-headings": "^4.0.0",
     "rehype-slug": "^3.0.0"
   }

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

@@ -124,7 +124,20 @@ function greenwoodHtmlPlugin(compilation) {
       return Promise.all(Object.keys(mappedStyles).map(async (assetKey) => {
         const asset = mappedStyles[assetKey];
         const filePath = path.join(userWorkspace, asset.name);
-        const result = await postcss(postcssConfig.plugins)
+        // TODO we already process the user's CSS as part of serve lifecycle (dev / build commands)
+        // if we pull from .greenwood/ then maybe we could avoid re-postcss step here?
+        const userPostcssConfig = fs.existsSync(path.join(process.cwd(), 'postcss.config.js'))
+          ? require(path.join(process.cwd(), 'postcss.config'))
+          : {};
+        const userPostcssPlugins = userPostcssConfig.plugins
+          ? userPostcssConfig.plugins
+          : [];
+        const allPostcssPlugins = [
+          ...userPostcssPlugins,
+          ...postcssConfig.plugins
+        ];
+
+        const result = await postcss(allPostcssPlugins)
           .use(postcssImport())
           .process(asset.source, { from: filePath });
 

packages/cli/test/cases/build.config.postcss/build.config.postcss.spec.js

@@ -1,10 +1,9 @@
 /*
  * Use Case
- * Run Greenwood with a custom postcss config
+ * Run Greenwood with a custom PostCSS config
  *
  * User Result
- * Should generate a bare bones Greenwood build with a hello page containing a component with a 
- * @custom-media query
+ * Should generate a bare bones Greenwood build with the user's CSS file correctly un-nested and minified
  *
  * User Command
  * greenwood build
@@ -13,16 +12,18 @@
  * Greenwood default
  *  src/
  *   pages/
- *     hello.md
- *     index.md
+ *     index.html
+ *   styles/
+ *     main.css
  */
-const { JSDOM } = require('jsdom');
+const fs = require('fs');
+const glob = require('glob-promise');
 const path = require('path');
 const expect = require('chai').expect;
 const runSmokeTest = require('../../../../../test/smoke-test');
 const TestBed = require('../../../../../test/test-bed');
 
-xdescribe('Build Greenwood With: ', function() {
+describe('Build Greenwood With: ', function() {
   const LABEL = 'Custom PostCSS configuration';
   let setup;
 
@@ -37,27 +38,17 @@ xdescribe('Build Greenwood With: ', function() {
       await setup.runGreenwoodCommand('build');
     });
 
-    runSmokeTest(['public', 'index', 'not-found', 'hello'], LABEL);
+    // TODO runSmokeTest(['public', 'index', 'not-found'], LABEL);    
+    runSmokeTest(['public', 'index'], LABEL);
 
-    describe('Hello page with working @custom-media queries', function() {
-      let dom;
+    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:#00f}';
+        const cssFiles = glob.sync(path.join(this.context.publicDir, 'styles', '*.css'));
+        const css = fs.readFileSync(cssFiles[0], 'utf-8');
 
-      beforeEach(async function() {
-        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './hello/index.html'));
-      });
-
-      it('should resolve the correct @custom-media queries for eve-container', function() {
-        // check @media (--screen-xs) resolves to @media (max-width:576px) via postcss preset-env: stage 1
-        const expectedStyle = 'eve-container .container.eve-container,eve-container ' +
-        '.container-fluid.eve-container {\n  margin-right:auto;margin-left:auto;padding-left:15px;' +
-        'padding-right:15px\n}\n\n@media (max-width:576px) {\neve-container .container.eve-container ' +
-        '{\n  width:calc(100% - 30px)\n}\n\n}\n\n@media (min-width:576px) {\neve-container ' + 
-        '.container.eve-container {\n  width:540px\n}\n\n}\n\n@media (min-width:768px) {\neve-container ' + 
-        '.container.eve-container {\n  width:720px\n}\n\n}\n\n@media (min-width:992px) {\neve-container ' +
-        '.container.eve-container {\n  width:960px\n}\n\n}\n\n@media (min-width:1200px) {\neve-container ' + 
-        '.container.eve-container {\n  width:1140px\n}\n\n}';
-        const containerStyle = dom.window.document.head.querySelector('style[scope="eve-container"]');
-        expect(containerStyle.innerHTML).to.equal(expectedStyle);
+        expect(cssFiles.length).to.equal(1);
+        expect(css).to.equal(expectedCss);
       });
     });
   });

packages/cli/test/cases/build.config.postcss/postcss.config.js

@@ -1,9 +1,5 @@
 module.exports = {
-  plugins: {
-    'postcss-preset-env': {
-      stage: 1
-    },
-    'postcss-nested': {},
-    'cssnano': {}
-  }
+  plugins: [
+    require('postcss-nested')
+  ]
 };

packages/cli/test/cases/build.config.postcss/src/pages/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+
+  <head>
+    <link rel="stylesheet" href="/styles/main.css"></link>    
+  </head>
+
+  <body>
+    <h1>Hello World!</h1>
+  </body>
+
+</html>

packages/cli/test/cases/build.config.postcss/src/styles/main.css

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