Added back postcss

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 });

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);
         }
       }
     });

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', () => {
     });
   });
 });
-*/

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