From 9a77d50fb4c400df4e34c0c0579737e5ad43304b Mon Sep 17 00:00:00 2001 From: Chris L Date: Sun, 20 Nov 2016 20:19:36 +0100 Subject: [PATCH 1/6] Updated tessts to successfully run against current master of the template --- test/generators/app/indexTest.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/generators/app/indexTest.js b/test/generators/app/indexTest.js index 6408781..ea6f14c 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', @@ -259,10 +259,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', From 781a9e0f724813f07861df4b90e6120d3b39bf50 Mon Sep 17 00:00:00 2001 From: Chris L Date: Tue, 22 Nov 2016 11:14:18 +0100 Subject: [PATCH 2/6] Updated postcss attachement to new webpack config. Adjusted tests. --- generators/app/postcss.js | 12 ++++--- test/generators/app/indexTest.js | 56 +++++++++++++++++++------------- 2 files changed, 42 insertions(+), 26 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/test/generators/app/indexTest.js b/test/generators/app/indexTest.js index ea6f14c..599b150 100644 --- a/test/generators/app/indexTest.js +++ b/test/generators/app/indexTest.js @@ -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', () => { From e4ef5bd8e55be04656763ccb3f4a301e106e1165 Mon Sep 17 00:00:00 2001 From: Chris L Date: Tue, 22 Nov 2016 11:20:45 +0100 Subject: [PATCH 3/6] Updated dependencies * Use newest template * Updated Esprima --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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" From cec906a7174e13d4a91b8d4ce5e4f5be765d5b2e Mon Sep 17 00:00:00 2001 From: Chris L Date: Wed, 23 Nov 2016 18:14:08 +0100 Subject: [PATCH 4/6] Adapted postcss config to new webpack style --- generators/app/postcss.js | 10 +++---- test/generators/app/indexTest.js | 50 ++++++++++++++++++++++++++------ 2 files changed, 46 insertions(+), 14 deletions(-) diff --git a/generators/app/postcss.js b/generators/app/postcss.js index e1105da..f0527d0 100644 --- a/generators/app/postcss.js +++ b/generators/app/postcss.js @@ -34,12 +34,12 @@ module.exports = { ]; // Prepare postCSS statement for inclusion - const postcssFunction = 'var postcss = { postcss: function() { return []; } }'; - const postcssAst = esprima.parse(postcssFunction); - const postcss = postcssAst.body[0].declarations[0].init.properties[0]; + const postcssConfig = 'const postcssQuery = { plugins: [] };'; + const postcssAst = esprima.parse(postcssConfig); + const postcss = postcssAst.body[0]; // The postcss loader item to add - const postcssLoaderObject = 'var postcss = [{ loader: \'postcss-loader\'}]'; + const postcssLoaderObject = 'var postcss = [{ loader: \'postcss-loader\', query: postcssQuery }];'; const postcssLoaderAst = esprima.parse(postcssLoaderObject); const postcssLoader = postcssLoaderAst.body[0].declarations[0].init.elements[0]; @@ -55,7 +55,7 @@ module.exports = { node.key.name === 'defaultSettings' ) { const returnStatement = node.value.body.body[1]; - returnStatement.argument.properties.push(postcss); + node.value.body.body = [postcss].concat(node.value.body.body); } // Parse all property nodes that use a regex. diff --git a/test/generators/app/indexTest.js b/test/generators/app/indexTest.js index 599b150..43cc7e1 100644 --- a/test/generators/app/indexTest.js +++ b/test/generators/app/indexTest.js @@ -226,45 +226,77 @@ describe('react-webpack:app with PostCSS support', () => { }); it('should insert the postcss loader into the style pipes', () => { + assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader', query: cssModulesQuery }, - { loader: 'postcss-loader' }`); + { + loader: 'postcss-loader', + query: postcssQuery + }`); + assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' }, - { loader: 'postcss-loader' }`); + { + loader: 'postcss-loader', + query: postcssQuery + }`); + assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader', query: cssModulesQuery }, - { loader: 'postcss-loader' }, + { + loader: 'postcss-loader', + query: postcssQuery + }, { loader: 'sass-loader' }`); + assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' }, - { loader: 'postcss-loader' }, + { + loader: 'postcss-loader', + query: postcssQuery + }, { loader: 'sass-loader' }`); + assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader', query: cssModulesQuery }, - { loader: 'postcss-loader' }, + { + loader: 'postcss-loader', + query: postcssQuery + }, { loader: 'less-loader' }`); + assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' }, - { loader: 'postcss-loader' }, + { + loader: 'postcss-loader', + query: postcssQuery + }, { loader: 'less-loader' }`); + assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader', query: cssModulesQuery }, - { loader: 'postcss-loader' }, + { + loader: 'postcss-loader', + query: postcssQuery + }, { loader: 'stylus-loader' }`); + assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' }, - { loader: 'postcss-loader' }, + { + loader: 'postcss-loader', + query: postcssQuery + }, { loader: 'stylus-loader' }`); }); it('should append the postcss function to the base config', () => { - assert.fileContent('conf/webpack/Base.js', 'postcss: function () {'); + assert.fileContent('conf/webpack/Base.js', `const postcssQuery = { plugins: [] };`); }); it('should generate required source files', () => { From e094c2128500b5f8c7483b673ad5cd5a10a399e9 Mon Sep 17 00:00:00 2001 From: Chris L Date: Thu, 24 Nov 2016 23:55:45 +0100 Subject: [PATCH 5/6] Updated style dialect related dependencies --- utils/configopts.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/utils/configopts.json b/utils/configopts.json index 0c7e26b..df1aa44 100644 --- a/utils/configopts.json +++ b/utils/configopts.json @@ -45,8 +45,8 @@ "name": "postcss", "value": "postcss", "packages": [ - { "name": "postcss", "version": "^5.0.21" }, - { "name": "postcss-loader", "version": "^0.9.1" } + { "name": "postcss", "version": "^5.2.6" }, + { "name": "postcss-loader", "version": "^1.1.1" } ] } ] @@ -57,7 +57,7 @@ "name": "cssmodules", "value": "cssmodules", "packages": [ - { "name": "react-css-modules", "version": "^3.7.10" } + { "name": "react-css-modules", "version": "^4.0.3" } ] } ] @@ -74,7 +74,7 @@ "value": "sass", "suffix": ".sass", "packages": [ - { "name": "sass-loader", "version": "^3.2.0" }, + { "name": "sass-loader", "version": "^4.0.2" }, { "name": "node-sass", "version": "^3.7.0" } ] }, @@ -83,7 +83,7 @@ "value": "scss", "suffix": ".scss", "packages": [ - { "name": "sass-loader", "version": "^3.2.0" }, + { "name": "sass-loader", "version": "^4.0.2" }, { "name": "node-sass", "version": "^3.7.0" } ] }, From 954c3d1913ba23e1368d97d4421d045c3e9a1585 Mon Sep 17 00:00:00 2001 From: Chris L Date: Fri, 25 Nov 2016 00:37:25 +0100 Subject: [PATCH 6/6] PostCSS update and fix * Added template file for postcss config which provides infrastructure to add postcss plugins * Fixed and improved attachment of the postcss-loader to th webpack config * Updated README regarding postcss usage --- README.md | 12 ++-- generators/app/index.js | 5 +- generators/app/postcss.js | 53 ++++++++------- generators/app/templates/postcss.config.js | 3 + test/generators/app/indexTest.js | 76 ++++++++++------------ 5 files changed, 77 insertions(+), 72 deletions(-) create mode 100644 generators/app/templates/postcss.config.js diff --git a/README.md b/README.md index d272ded..60b5105 100644 --- a/README.md +++ b/README.md @@ -67,23 +67,23 @@ Stateless functional components where introduced in React v0.14. They have a muc ___Note___: You will still be able to set properties for stateless components! ## Adding PostCSS plugins -If you have enabled [PostCSS](https://github.com/postcss/postcss) at generation time, install your PostCSS plugins via npm and *require* it in **postcss** function in *cfg/base.js*. +If you have enabled [PostCSS](https://github.com/postcss/postcss) at generation time, install your PostCSS plugins via npm and *require* it in the **plugins** array in *postcss.config.js*. Example for autoprefixer: ```bash cd my-new-project npm install autoprefixer ``` -Require in *cfg/base.js* +Require in *postcss.config.js* ```JavaScript ... -postcss: function () { - return [ +module.exports = () => ({ + plugins: [ require('autoprefixer')({ browsers: ['last 2 versions', 'ie >= 8'] }) - ]; -} + ] +}); ... ``` diff --git a/generators/app/index.js b/generators/app/index.js index d45cb4d..d0b8532 100644 --- a/generators/app/index.js +++ b/generators/app/index.js @@ -150,11 +150,14 @@ class AppGenerator extends Generators.Base { } } }); + + if(this.postcss) { + this.copy('../../generators/app/templates/postcss.config.js', 'postcss.config.js'); + } } install() { - // Currently buggy! if(this.postcss) { const postcss = require('./postcss'); postcss.write(path.join(this.destinationRoot(), 'conf/webpack/Base.js')); diff --git a/generators/app/postcss.js b/generators/app/postcss.js index f0527d0..b374c28 100644 --- a/generators/app/postcss.js +++ b/generators/app/postcss.js @@ -20,44 +20,37 @@ module.exports = { // of the chain. If we have a preprocessor, we will add // it before the initial loader const cssDialects = [ - '\\.cssmodule\\.css$', '^.((?!cssmodule).)*\\.css$' ]; + const cssModuleDialects = [ + '\\.cssmodule\\.css$' + ]; + const preprocessorDialects = [ - '\\.cssmodule\\.(sass|scss)$', '^.((?!cssmodule).)*\\.(sass|scss)$', - '\\.cssmodule\\.less$', '^.((?!cssmodule).)*\\.less$', - '\\.cssmodule\\.styl$', '^.((?!cssmodule).)*\\.styl$' ]; - // Prepare postCSS statement for inclusion - const postcssConfig = 'const postcssQuery = { plugins: [] };'; + const preprocessorModuleDialects = [ + '\\.cssmodule\\.(sass|scss)$', + '\\.cssmodule\\.less$', + '\\.cssmodule\\.styl$' + ]; + + const postcssConfig = 'const postcssQuery = { query: { importLoaders: 1 } };'; const postcssAst = esprima.parse(postcssConfig); - const postcss = postcssAst.body[0]; + const postcss = postcssAst.body[0].declarations[0].init.properties[0]; // The postcss loader item to add - const postcssLoaderObject = 'var postcss = [{ loader: \'postcss-loader\', query: postcssQuery }];'; + 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[1]; - node.value.body.body = [postcss].concat(node.value.body.body); - } - // Parse all property nodes that use a regex. // This should only be available under module.(pre)loaders if( @@ -67,14 +60,28 @@ module.exports = { typeof node.value.regex !== 'undefined' ) { + // Enable importLoaders on non cssmodule dialacts + if( + cssDialects.indexOf(node.value.regex.pattern) !== -1 || + preprocessorDialects.indexOf(node.value.regex.pattern) !== -1 + ) { + node.parent.properties[1].value.elements[1].properties.push(postcss); + } + // Regular css usage - if(cssDialects.indexOf(node.value.regex.pattern) !== -1) { + if( + cssDialects.indexOf(node.value.regex.pattern) !== -1 || + cssModuleDialects.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) { + // CSS preprocessors + if( + preprocessorDialects.indexOf(node.value.regex.pattern) !== -1 || + preprocessorModuleDialects.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/generators/app/templates/postcss.config.js b/generators/app/templates/postcss.config.js new file mode 100644 index 0000000..fe23259 --- /dev/null +++ b/generators/app/templates/postcss.config.js @@ -0,0 +1,3 @@ +module.exports = () => ({ + plugins: [] +}); diff --git a/test/generators/app/indexTest.js b/test/generators/app/indexTest.js index 43cc7e1..e7b0ae4 100644 --- a/test/generators/app/indexTest.js +++ b/test/generators/app/indexTest.js @@ -225,78 +225,70 @@ describe('react-webpack:app with PostCSS support', () => { ]); }); - it('should insert the postcss loader into the style pipes', () => { + it('should insert the postcss loader into the cssmodule style pipes', () => { assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader', query: cssModulesQuery }, - { - loader: 'postcss-loader', - query: postcssQuery - }`); - - assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' }, - { - loader: 'postcss-loader', - query: postcssQuery - }`); + { loader: 'postcss-loader' }`); assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader', query: cssModulesQuery }, - { - loader: 'postcss-loader', - query: postcssQuery - }, + { loader: 'postcss-loader' }, { loader: 'sass-loader' }`); - assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' }, - { - loader: 'postcss-loader', - query: postcssQuery + assert.fileContent('conf/webpack/Base.js', `{ + loader: 'css-loader', + query: cssModulesQuery }, - { loader: 'sass-loader' }`); + { loader: 'postcss-loader' }, + { loader: 'less-loader' }`); assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader', query: cssModulesQuery }, - { - loader: 'postcss-loader', - query: postcssQuery - }, - { loader: 'less-loader' }`); + { loader: 'postcss-loader' }, + { loader: 'stylus-loader' }`); + }); - assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' }, - { - loader: 'postcss-loader', - query: postcssQuery + it('should insert the postcss loader into the NON cssmodule style pipes', () => { + + assert.fileContent('conf/webpack/Base.js', `{ + loader: 'css-loader', + query: { importLoaders: 1 } }, - { loader: 'less-loader' }`); + { loader: 'postcss-loader' }`); assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader', - query: cssModulesQuery + query: { importLoaders: 1 } }, - { - loader: 'postcss-loader', - query: postcssQuery + { loader: 'postcss-loader' }, + { loader: 'sass-loader' }`); + + assert.fileContent('conf/webpack/Base.js', `{ + loader: 'css-loader', + query: { importLoaders: 1 } }, - { loader: 'stylus-loader' }`); + { loader: 'postcss-loader' }, + { loader: 'less-loader' }`); - assert.fileContent('conf/webpack/Base.js', `{ loader: 'css-loader' }, - { - loader: 'postcss-loader', - query: postcssQuery + assert.fileContent('conf/webpack/Base.js', `{ + loader: 'css-loader', + query: { importLoaders: 1 } }, + { loader: 'postcss-loader' }, { loader: 'stylus-loader' }`); }); - it('should append the postcss function to the base config', () => { - - assert.fileContent('conf/webpack/Base.js', `const postcssQuery = { plugins: [] };`); + it('should generate the postCSS config', () => { + assert.file([ + 'postcss.config.js', + ]); }); it('should generate required source files', () => {