From a2bd75a83b7379bdc61c4fdc340dada9790015c7 Mon Sep 17 00:00:00 2001 From: Chris Date: Tue, 22 Nov 2016 12:35:31 +0100 Subject: [PATCH] V4 -- Updates to support PostCSS installation * Updated tessts to successfully run against current master of the template * Updated postcss attachement to new webpack config. Adjusted tests. * Updated dependencies * Use newest template * Updated Esprima --- generators/app/postcss.js | 12 ++++-- package.json | 4 +- test/generators/app/indexTest.js | 64 +++++++++++++++++++------------- 3 files changed, 48 insertions(+), 32 deletions(-) diff --git a/generators/app/postcss.js b/generators/app/postcss.js index 08e511c..e1105da 100644 --- a/generators/app/postcss.js +++ b/generators/app/postcss.js @@ -39,17 +39,22 @@ module.exports = { const postcss = postcssAst.body[0].declarations[0].init.properties[0]; // The postcss loader item to add - const postcssLoader = { type: 'Literal', value: 'postcss', raw: '\'postcss\'' }; + const postcssLoaderObject = 'var postcss = [{ loader: \'postcss-loader\'}]'; + const postcssLoaderAst = esprima.parse(postcssLoaderObject); + const postcssLoader = postcssLoaderAst.body[0].declarations[0].init.elements[0]; + // Add postcss to the loaders array walk.walkAddParent(ast, (node) => { + // Add the postcss key to the global configuration + if( node.type === 'MethodDefinition' && node.key.name === 'defaultSettings' ) { - const returnStatement = node.value.body.body[0]; + const returnStatement = node.value.body.body[1]; returnStatement.argument.properties.push(postcss); } @@ -64,13 +69,12 @@ module.exports = { // Regular css usage if(cssDialects.indexOf(node.value.regex.pattern) !== -1) { - const loaderData = node.parent.properties[1]; loaderData.value.elements.push(postcssLoader); } - if(preprocessorDialects.indexOf(node.value.regex.pattern) !== -1) { + if(preprocessorDialects.indexOf(node.value.regex.pattern) !== -1) { const loaderData = node.parent.properties[1]; const lastElm = loaderData.value.elements.pop(); loaderData.value.elements.push(postcssLoader); diff --git a/package.json b/package.json index a5533c7..de02a4b 100644 --- a/package.json +++ b/package.json @@ -48,9 +48,9 @@ }, "dependencies": { "escodegen": "^1.7.0", - "esprima": "^2.7.0", + "esprima": "^3.1.1", "esprima-walk": "^0.1.0", - "react-webpack-template": "^2.0.1-0", + "react-webpack-template": "^2.0.1-5", "underscore.string": "^3.2.2", "yeoman-generator": "^0.24.0", "yeoman-welcome": "^1.0.1" diff --git a/test/generators/app/indexTest.js b/test/generators/app/indexTest.js index 6408781..599b150 100644 --- a/test/generators/app/indexTest.js +++ b/test/generators/app/indexTest.js @@ -101,10 +101,10 @@ describe('react-webpack:app', () => { assert.file([ 'src/actions/README.md', - 'src/index.js', + 'src/client.js', 'src/components/App.js', 'src/components/app.css', - 'src/favicon.ico', + 'src/static/favicon.ico', 'src/images/yeoman.png', 'src/index.html', 'src/sources/README.md', @@ -226,28 +226,40 @@ describe('react-webpack:app with PostCSS support', () => { }); it('should insert the postcss loader into the style pipes', () => { - assert.fileContent('conf/webpack/Base.js', `'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]', - 'postcss'`); - assert.fileContent('conf/webpack/Base.js', `'css', - 'postcss'`); - assert.fileContent('conf/webpack/Base.js', `'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]', - 'postcss', - 'sass'`); - assert.fileContent('conf/webpack/Base.js', `'css', - 'postcss', - 'sass'`); - assert.fileContent('conf/webpack/Base.js', `'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]', - 'postcss', - 'less'`); - assert.fileContent('conf/webpack/Base.js', `'css', - 'postcss', - 'less'`); - assert.fileContent('conf/webpack/Base.js', `'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]', - 'postcss', - 'stylus'`); - assert.fileContent('conf/webpack/Base.js', `'css', - 'postcss', - 'stylus'`); + assert.fileContent('conf/webpack/Base.js', `{ + loader: 'css-loader', + query: cssModulesQuery + }, + { loader: 'postcss-loader' }`); + assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' }, + { loader: 'postcss-loader' }`); + assert.fileContent('conf/webpack/Base.js', `{ + loader: 'css-loader', + query: cssModulesQuery + }, + { loader: 'postcss-loader' }, + { loader: 'sass-loader' }`); + assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' }, + { loader: 'postcss-loader' }, + { loader: 'sass-loader' }`); + assert.fileContent('conf/webpack/Base.js', `{ + loader: 'css-loader', + query: cssModulesQuery + }, + { loader: 'postcss-loader' }, + { loader: 'less-loader' }`); + assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' }, + { loader: 'postcss-loader' }, + { loader: 'less-loader' }`); + assert.fileContent('conf/webpack/Base.js', `{ + loader: 'css-loader', + query: cssModulesQuery + }, + { loader: 'postcss-loader' }, + { loader: 'stylus-loader' }`); + assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' }, + { loader: 'postcss-loader' }, + { loader: 'stylus-loader' }`); }); it('should append the postcss function to the base config', () => { @@ -259,10 +271,10 @@ describe('react-webpack:app with PostCSS support', () => { assert.file([ 'src/actions/README.md', - 'src/index.js', + 'src/client.js', 'src/components/App.js', 'src/components/app.css', - 'src/favicon.ico', + 'src/static/favicon.ico', 'src/images/yeoman.png', 'src/index.html', 'src/sources/README.md',