Skip to content

Commit 8ffb62c

Browse files
hutchgranthutchgrant
authored
task/issue 365 add support for custom babel/postcss configs in user workspace (#366)
* task: add support for custom babel/postcss configs in user workspace * fix: lint issues * fix: move config location to root project dir * test: add postcss test case * test: add babel config test * docs: update documentation * docs: consistency * docs: update docs - accuracy * test: update test clarify config changes * task: add browserslist to project root * docs: clarify role of browserlist in postcss and babel configs Co-authored-by: hutchgrant <[email protected]>
1 parent bf0e0f8 commit 8ffb62c

21 files changed

+249
-15
lines changed

‎.browserslistrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
not op_mini all
3+
ie 11

‎packages/cli/src/config/webpack.config.common.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ module.exports = ({ config, context }) => {
5656
loader: 'postcss-loader',
5757
options: {
5858
config: {
59-
path: path.join(__dirname, 'postcss.config.js')
59+
path: context.postcssConfig
6060
}
6161
}
6262
}
@@ -104,7 +104,7 @@ module.exports = ({ config, context }) => {
104104
test: /\.js$/,
105105
loader: 'babel-loader',
106106
options: {
107-
configFile: path.join(__dirname, 'babel.config.js')
107+
configFile: context.babelConfig
108108
}
109109
}, {
110110
test: /\.md$/,

‎packages/cli/src/lifecycles/context.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const fs = require('fs-extra');
22
const path = require('path');
33
const defaultTemplatesDir = path.join(__dirname, '../templates/');
4+
const defaultConfigDir = path.join(__dirname, '../config');
45
const scratchDir = path.join(process.cwd(), './.greenwood/');
56
const publicDir = path.join(process.cwd(), './public');
67

@@ -16,6 +17,8 @@ module.exports = initContexts = async({ config }) => {
1617
const userPageTemplate = path.join(userTemplatesDir, 'page-template.js');
1718
const indexPageTemplate = 'index.html';
1819
const notFoundPageTemplate = '404.html';
20+
const babelConfig = 'babel.config.js';
21+
const postcssConfig = 'postcss.config.js';
1922

2023
const userHasWorkspace = await fs.exists(userWorkspace);
2124
const userHasWorkspacePages = await fs.exists(userPagesDir);
@@ -24,6 +27,8 @@ module.exports = initContexts = async({ config }) => {
2427
const userHasWorkspaceAppTemplate = await fs.exists(userAppTemplate);
2528
const userHasWorkspaceIndexTemplate = await fs.exists(path.join(userTemplatesDir, 'index.html'));
2629
const userHasWorkspaceNotFoundTemplate = await fs.exists(path.join(userTemplatesDir, '404.html'));
30+
const userHasWorkspaceBabel = await fs.exists(path.join(process.cwd(), babelConfig));
31+
const userHasWorkspacePostCSS = await fs.exists(path.join(process.cwd(), postcssConfig));
2732

2833
let context = {
2934
scratchDir,
@@ -45,7 +50,13 @@ module.exports = initContexts = async({ config }) => {
4550
: path.join(defaultTemplatesDir, notFoundPageTemplate),
4651
indexPageTemplate,
4752
notFoundPageTemplate,
48-
assetDir: path.join(userHasWorkspace ? userWorkspace : defaultTemplatesDir, 'assets')
53+
assetDir: path.join(userHasWorkspace ? userWorkspace : defaultTemplatesDir, 'assets'),
54+
babelConfig: userHasWorkspaceBabel
55+
? path.join(process.cwd(), './', babelConfig)
56+
: path.join(defaultConfigDir, babelConfig),
57+
postcssConfig: userHasWorkspacePostCSS
58+
? path.join(process.cwd(), './', postcssConfig)
59+
: path.join(defaultConfigDir, postcssConfig)
4960
};
5061

5162
if (!await fs.ensureDir(scratchDir)) {

‎packages/cli/test/cases/build.config.babel/babel.config.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
sourceType: 'unambiguous',
3+
ignore: [/[\/\\]core-js/, /@babel[\/\\]runtime/],
4+
presets: [
5+
[
6+
'@babel/preset-env',
7+
{
8+
useBuiltIns: 'entry',
9+
corejs: {
10+
version: 3,
11+
proposals: true
12+
},
13+
configPath: __dirname
14+
}
15+
]
16+
],
17+
18+
// Here we've deliberately removed plugins so that it will compile but won't compile correctly which we can test for
19+
plugins: []
20+
};

‎packages/cli/test/cases/build.config.babel/build.config.babel.spec.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*
2+
* Use Case
3+
* Run Greenwood with a custom babel config
4+
*
5+
* User Result
6+
* Should generate and fail to build a bare bones greenwood application using a purpose built babel config
7+
*
8+
* User Command
9+
* greenwood build
10+
*
11+
* User Workspace
12+
* Greenwood default
13+
* src/
14+
* pages/
15+
* hello.md
16+
* index.md
17+
*/
18+
const path = require('path');
19+
const { JSDOM } = require('jsdom');
20+
const expect = require('chai').expect;
21+
const TestBed = require('../../../../../test/test-bed');
22+
23+
describe('Build Greenwood With: ', function() {
24+
const LABEL = 'Custom babel configuration';
25+
let setup;
26+
27+
before(async function() {
28+
setup = new TestBed();
29+
this.context = await setup.setupTestBed(__dirname);
30+
});
31+
32+
describe(LABEL, function() {
33+
34+
before(async function() {
35+
await setup.runGreenwoodCommand('build');
36+
});
37+
38+
describe('index page should not compile properly', function() {
39+
let dom;
40+
41+
beforeEach(async function() {
42+
dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
43+
});
44+
45+
it('should not contain any components within eve-app', function() {
46+
// prove that our custom broken babel config is being used
47+
const outlet = dom.window.document.querySelector('body > eve-app').innerHTML;
48+
expect(outlet).to.equal('');
49+
});
50+
51+
});
52+
});
53+
54+
after(function() {
55+
setup.teardownTestBed();
56+
});
57+
58+
});

‎packages/cli/test/cases/build.config.babel/src/pages/index.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
### Greenwood
2+
3+
This is the home page built by Greenwood. Make your own pages in src/pages/index.js!

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

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
* Use Case
3+
* Run Greenwood with a custom postcss config
4+
*
5+
* User Result
6+
* Should generate a bare bones Greenwood build with a hello page containing a component with a
7+
* @custom-media query
8+
*
9+
* User Command
10+
* greenwood build
11+
*
12+
* User Workspace
13+
* Greenwood default
14+
* src/
15+
* pages/
16+
* hello.md
17+
* index.md
18+
*/
19+
const { JSDOM } = require('jsdom');
20+
const path = require('path');
21+
const expect = require('chai').expect;
22+
const runSmokeTest = require('../../../../../test/smoke-test');
23+
const TestBed = require('../../../../../test/test-bed');
24+
25+
describe('Build Greenwood With: ', function() {
26+
const LABEL = 'Custom PostCSS configuration';
27+
let setup;
28+
29+
before(async function() {
30+
setup = new TestBed();
31+
this.context = await setup.setupTestBed(__dirname);
32+
});
33+
34+
describe(LABEL, function() {
35+
36+
before(async function() {
37+
await setup.runGreenwoodCommand('build');
38+
});
39+
40+
runSmokeTest(['public', 'index', 'not-found', 'hello'], LABEL);
41+
42+
describe('Hello page with working @custom-media queries', function() {
43+
let dom;
44+
45+
beforeEach(async function() {
46+
dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './hello/index.html'));
47+
});
48+
49+
it('should resolve the correct @custom-media queries for eve-container', function() {
50+
// check @media (--screen-xs) resolves to @media (max-width:576px) via postcss preset-env: stage 1
51+
const expectedStyle = 'eve-container .container.eve-container,eve-container ' +
52+
'.container-fluid.eve-container {\n margin-right:auto;margin-left:auto;padding-left:15px;' +
53+
'padding-right:15px\n}\n\n@media (max-width:576px) {\neve-container .container.eve-container ' +
54+
'{\n width:calc(100% - 30px)\n}\n\n}\n\n@media (min-width:576px) {\neve-container ' +
55+
'.container.eve-container {\n width:540px\n}\n\n}\n\n@media (min-width:768px) {\neve-container ' +
56+
'.container.eve-container {\n width:720px\n}\n\n}\n\n@media (min-width:992px) {\neve-container ' +
57+
'.container.eve-container {\n width:960px\n}\n\n}\n\n@media (min-width:1200px) {\neve-container ' +
58+
'.container.eve-container {\n width:1140px\n}\n\n}';
59+
const containerStyle = dom.window.document.head.querySelector('style[scope="eve-container"]');
60+
expect(containerStyle.innerHTML).to.equal(expectedStyle);
61+
});
62+
});
63+
});
64+
65+
after(function() {
66+
setup.teardownTestBed();
67+
});
68+
69+
});

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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
plugins: {
3+
'postcss-preset-env': {
4+
stage: 1
5+
},
6+
'postcss-nested': {},
7+
'cssnano': {}
8+
}
9+
};

‎packages/cli/test/cases/build.config.postcss/src/pages/hello.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
label: 'hello'
3+
title: 'Hello Page'
4+
imports:
5+
Container: '@evergreen-wc/eve-container'
6+
---
7+
### Hello World
8+
9+
This is an example page built by Greenwood. Make your own in _src/pages_!
10+
11+
<eve-container></eve-container>

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
### Greenwood
2+
3+
This is the home page built by Greenwood. Make your own pages in src/pages/index.js!

‎postcss.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
plugins: {
3+
'postcss-preset-env': {
4+
stage: 1
5+
},
6+
'postcss-nested': {},
7+
'cssnano': {}
8+
}
9+
};

‎www/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
"license": "MIT",
99
"dependencies": {
1010
"@evergreen-wc/eve-button": "^0.0.9",
11-
"@evergreen-wc/eve-container": "^0.0.9"
11+
"@evergreen-wc/eve-container": "^0.0.10"
1212
}
1313
}

‎www/pages/docs/build.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
label: 'build'
3+
menu: side
4+
title: 'Build'
5+
index: 4
6+
linkheadings: 3
7+
---
8+
9+
# Build Configurations
10+
11+
A number of core build configuration files can be overridden by creating each file within the root path of your project.
12+
13+
14+
### PostCSS
15+
16+
To override the default **postcss.config.js** with your own configuration, create a new postcss.config.js file within your project's root directory.
17+
18+
By default, [this is the postcss.config.js](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/src/config/postcss.config.js) being used.
19+
20+
> Note: [.browserslistrc](#browserslist) is used by postcss and is also needed to be overwritten. You can override that in that same directory or you may also configure postcss-preset-env to use default `.browserslistrc` path via environement variable to: `./node_modules/@greenwood/cli/src/config/.browserslistrc`. See [postcss-preset-env docs](https://www.npmjs.com/package/postcss-preset-env#browsers) for further information. [Ejecting configuration](#eject-configuration) is one way in which you can easily override both with no extra configuraiton.
21+
22+
23+
### Babel
24+
25+
To override the default **babel.config.js** with your own configuration, create a new babel.config.js file within your project root directory.
26+
27+
> Note: If you use your own **babel.config.js** you need to include your own [.browserslist](#browserslist) file within the project's root directory
28+
29+
By default, [this is the babel.config.js](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/src/config/babel.config.js) being used.
30+
31+
> Note: [.browserslistrc](#browserslist) is used by babel and it also needs to be overwritten if you override your **babel.config.js**. You can override it in that same directory or you may also configure babel.config.js to use default `.browserslistrc` path via [configPath option](https://babeljs.io/docs/en/babel-preset-env#configpath) to path: `./node_modules/@greenwood/cli/src/config/.browserslistrc`. [Ejecting configuration](#eject-configuration) is one way in which you can easily override both with no extra configuraiton.
32+
33+
34+
### Browserslist
35+
36+
By default, the **.browserslistrc** file is found in the same directory as the `babel.config.js` and `postcss.config.js`. If you want to override either file, include a **.browserslistrc** file within your project's root directory. You are also required to include your own `babel.config.js` and `postcss.config.js` file if you're providing a custom **.browserslistrc** within your project's root directory. You can specify an alternative path to the browserslist using the `configPath` setting of your `babel-preset-env` options within your `babel.config.js` file.
37+
38+
By default, [here is the .browserslistrc](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/src/config/.browserslistrc) being used.

‎www/pages/docs/configuration.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ linkheadings: 3
99
## Configuration
1010
These are all the supported configuration options in Greenwood, which you can define in a _greenwood.config.js_ file in your project's root directory.
1111

12-
A _greenwood.config.js_ file with default values would be:
12+
A **greenwood.config.js** file with default values would be:
1313
```js
1414
module.exports = {
1515
workspace: 'src', // path.join(process.cwd(), 'src')

‎www/pages/docs/css-and-images.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
label: 'styles-assets'
33
menu: side
44
title: 'Styles and Assets'
5-
index: 5
5+
index: 6
66
linkheadings: 3
77
---
88

‎www/pages/docs/data.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
label: 'data-sources'
33
menu: side
44
title: 'Data Sources'
5-
index: 7
5+
index: 8
66
linkheadings: 3
77
---
88

‎www/pages/docs/front-matter.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
label: 'front-matter'
33
menu: side
44
title: 'Front Matter'
5-
index: 3
5+
index: 4
66
linkheadings: 3
77
---
88

‎www/pages/docs/markdown.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
label: 'markdown'
33
menu: side
44
title: 'Markdown'
5-
index: 4
5+
index: 5
66
linkheadings: 3
77
---
88

‎www/pages/docs/menus.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
label: 'menus'
33
menu: side
44
title: 'Menus'
5-
index: 5
5+
index: 7
66
linkheadings: 3
77
---
88

‎www/pages/docs/tech-stack.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
label: 'stack'
33
menu: side
44
title: 'Tech Stack'
5-
index: 8
5+
index: 9
66
linkheadings: 3
77
---
88

‎yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -856,10 +856,10 @@
856856
dependencies:
857857
lit-element "^2.0.1"
858858

859-
"@evergreen-wc/eve-container@^0.0.9":
860-
version "0.0.9"
861-
resolved "https://registry.yarnpkg.com/@evergreen-wc/eve-container/-/eve-container-0.0.9.tgz#1e6dcb9bd21e70c35c75be0a1e5b63883efe1baa"
862-
integrity sha512-RMXdd8UpmbVa+rJw67CTsx5sJ01WvKzc5JN6FXyIxd8AijU8NiHWlq0feMIGyLKpVbr7wy9T5QWdXB9p8EXw7w==
859+
"@evergreen-wc/eve-container@^0.0.10":
860+
version "0.0.10"
861+
resolved "https://registry.yarnpkg.com/@evergreen-wc/eve-container/-/eve-container-0.0.10.tgz#f27f9db8fc1e7ebdbd4e6afdfe3993189c00cfd8"
862+
integrity sha512-ZkHhKcjcgKeUAbcjYowTmD6DYGu0mZoJtWef8qF/1XAbIZPsZhs+6QgQEuvergCOdm8SlBypjB0FjDOcYDY5Cw==
863863
dependencies:
864864
lit-element "^2.0.1"
865865

0 commit comments

Comments
 (0)