From efcf3cdebf85cb945c57d220ac582314740cfce4 Mon Sep 17 00:00:00 2001 From: Chris Date: Tue, 23 Aug 2016 22:54:34 +0200 Subject: [PATCH] Added back postcss --- generators/app/index.js | 7 ++--- generators/app/postcss.js | 36 ++++++++++++++++++------ test/generators/app/indexTest.js | 39 +++++++++++++++++++------- test/generators/component/indexTest.js | 2 +- 4 files changed, 61 insertions(+), 23 deletions(-) diff --git a/generators/app/index.js b/generators/app/index.js index cf9b13b..0bcf2cb 100644 --- a/generators/app/index.js +++ b/generators/app/index.js @@ -147,11 +147,10 @@ class AppGenerator extends Generators.Base { install() { // Currently buggy! - /* if(this.postcss) { - + if(this.postcss) { const postcss = require('./postcss'); - postcss.write(path.join(this.destinationRoot(), 'conf/webpack/defaults.js')); - }*/ + postcss.write(path.join(this.destinationRoot(), 'conf/webpack/Base.js')); + } if(!this.options['skip-install']) { this.installDependencies({ bower: false }); diff --git a/generators/app/postcss.js b/generators/app/postcss.js index 2466cc1..08e511c 100644 --- a/generators/app/postcss.js +++ b/generators/app/postcss.js @@ -16,12 +16,21 @@ module.exports = { const ast = esprima.parse(data); // List of css dialects we want to add postCSS for + // On regular css, we can add the loader to the end + // of the chain. If we have a preprocessor, we will add + // it before the initial loader const cssDialects = [ - '/\\.css$/', - '/\\.sass$/', - '/\\.scss$/', - '/\\.less$/', - '/\\.styl$/' + '\\.cssmodule\\.css$', + '^.((?!cssmodule).)*\\.css$' + ]; + + const preprocessorDialects = [ + '\\.cssmodule\\.(sass|scss)$', + '^.((?!cssmodule).)*\\.(sass|scss)$', + '\\.cssmodule\\.less$', + '^.((?!cssmodule).)*\\.less$', + '\\.cssmodule\\.styl$', + '^.((?!cssmodule).)*\\.styl$' ]; // Prepare postCSS statement for inclusion @@ -29,6 +38,9 @@ module.exports = { const postcssAst = esprima.parse(postcssFunction); const postcss = postcssAst.body[0].declarations[0].init.properties[0]; + // The postcss loader item to add + const postcssLoader = { type: 'Literal', value: 'postcss', raw: '\'postcss\'' }; + // Add postcss to the loaders array walk.walkAddParent(ast, (node) => { @@ -50,11 +62,19 @@ module.exports = { typeof node.value.regex !== 'undefined' ) { - // Make sure we only parse style based items! - if(cssDialects.indexOf(node.value.raw) !== -1) { + // Regular css usage + if(cssDialects.indexOf(node.value.regex.pattern) !== -1) { const loaderData = node.parent.properties[1]; - loaderData.value.elements[1].value += '!postcss'; + loaderData.value.elements.push(postcssLoader); + } + + 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); + loaderData.value.elements.push(lastElm); } } }); diff --git a/test/generators/app/indexTest.js b/test/generators/app/indexTest.js index c83de08..7cc4782 100644 --- a/test/generators/app/indexTest.js +++ b/test/generators/app/indexTest.js @@ -120,8 +120,7 @@ describe('react-webpack:app', () => { }); }); -/* -describe.skip('react-webpack:app with PostCSS support', () => { +describe('react-webpack:app with PostCSS support', () => { let prompts = {}; for(let p of defaultPrompts) { @@ -143,6 +142,10 @@ describe.skip('react-webpack:app with PostCSS support', () => { expect(generator.config.get('style')).to.equal('css'); }); + it('should use "css modules" per default', () => { + expect(generator.config.get('cssmodules')).to.be.true; + }); + it('should enable "PostCSS"', () => { expect(generator.config.get('postcss')).to.equal(true); }); @@ -180,16 +183,33 @@ describe.skip('react-webpack:app with PostCSS support', () => { }); it('should insert the postcss loader into the style pipes', () => { - assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader\''); - assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded&indentedSyntax\''); - assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded\''); - assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!less-loader\''); - assert.fileContent('cfg/defaults.js', 'loader: \'style-loader!css-loader!postcss-loader!stylus-loader\''); + 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'`); }); - it.skip('should append the postcss function to the base config', () => { + it('should append the postcss function to the base config', () => { - assert.fileContent('cfg/defaults.js', ',\n postcss: function () {\n return [];\n }'); + assert.fileContent('conf/webpack/Base.js', 'postcss: function () {'); }); it('should generate required source files', () => { @@ -219,4 +239,3 @@ describe.skip('react-webpack:app with PostCSS support', () => { }); }); }); -*/ diff --git a/test/generators/component/indexTest.js b/test/generators/component/indexTest.js index 3f9416d..ae26fc0 100644 --- a/test/generators/component/indexTest.js +++ b/test/generators/component/indexTest.js @@ -8,7 +8,7 @@ describe('react-webpack:component', () => { const generatorComponent = path.join(__dirname, '../../../generators/component'); - describe.skip('when using version 3 of the generator', () => { + describe('when using version 3 of the generator', () => { // List of available style types. Please add a line that says // testComponentWithStyle(styleTypes.KEY); to the bottom of the file