diff --git a/packages/cli/package.json b/packages/cli/package.json
index cc3c13d57..214595afd 100644
--- a/packages/cli/package.json
+++ b/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"
}
diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
index 6d1e386cd..9638d0420 100644
--- a/packages/cli/src/config/rollup.config.js
+++ b/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 });
diff --git a/packages/cli/test/cases/build.config.postcss/build.config.postcss.spec.js b/packages/cli/test/cases/build.config.postcss/build.config.postcss.spec.js
index 1a29bfd28..93460fbc4 100644
--- a/packages/cli/test/cases/build.config.postcss/build.config.postcss.spec.js
+++ b/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);
});
});
});
diff --git a/packages/cli/test/cases/build.config.postcss/postcss.config.js b/packages/cli/test/cases/build.config.postcss/postcss.config.js
index dbe4fb4a1..80bcddab0 100644
--- a/packages/cli/test/cases/build.config.postcss/postcss.config.js
+++ b/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')
+ ]
};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.postcss/src/pages/hello.md b/packages/cli/test/cases/build.config.postcss/src/pages/hello.md
deleted file mode 100644
index 3e4ce2541..000000000
--- a/packages/cli/test/cases/build.config.postcss/src/pages/hello.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-label: 'hello'
-title: 'Hello Page'
-imports:
- Container: '@evergreen-wc/eve-container'
----
-### Hello World
-
-This is an example page built by Greenwood. Make your own in _src/pages_!
-
-
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.postcss/src/pages/index.html b/packages/cli/test/cases/build.config.postcss/src/pages/index.html
new file mode 100644
index 000000000..68663407a
--- /dev/null
+++ b/packages/cli/test/cases/build.config.postcss/src/pages/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
Hello World!
+
+
+
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.postcss/src/pages/index.md b/packages/cli/test/cases/build.config.postcss/src/pages/index.md
deleted file mode 100644
index 1c1a50fbb..000000000
--- a/packages/cli/test/cases/build.config.postcss/src/pages/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-### Greenwood
-
-This is the home page built by Greenwood. Make your own pages in src/pages/index.js!
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.postcss/src/styles/main.css b/packages/cli/test/cases/build.config.postcss/src/styles/main.css
new file mode 100644
index 000000000..d44494250
--- /dev/null
+++ b/packages/cli/test/cases/build.config.postcss/src/styles/main.css
@@ -0,0 +1,8 @@
+body {
+ color: red;
+
+ & h1 {
+ color: blue;
+ }
+
+}
\ No newline at end of file