3.2.2

Added link to generator-react-webpack-redux to the extending section

.travis.yml

@@ -1,6 +1,7 @@
 language: node_js
+sudo: false
 node_js:
-  - '4.1.0'
+  - '4.2.2'
 before_install:
   - currentfolder=${PWD##*/}
   - if [ "$currentfolder" != 'generator-react-webpack' ]; then cd .. && eval "mv $currentfolder generator-react-webpack" && cd generator-react-webpack; fi

CHANGELOG.md

@@ -1,39 +1,57 @@
 # generator-react-webpack - Changelog
 
+## 3.2.2
+
+1. Cleaned up formatting of unit tests
+
+## 3.2.1
+
+1. Updated tests for new version of react-webpack-template
+
+## 3.2.0
+
+1. Updated yeoman-generator package to new version 0.22.1 (some methods like generator.NamedBase are now deprecated!)
+
+## 3.1.1
+
+1. Added bugfix for https://github.com/newtriks/generator-react-webpack/issues/170
+
+## 3.1.0
+
+1. Added support for postcss (Patch provided by [stylesuxx](https://github.com/stylesuxx))
+
+## 3.0.1
+
+1. Unneeded files (License, .npmignore) are not copied anymore
+2. Existence of .babelrc is now checked in unit tests
+
 ## 3.0.0
-___Upgrades___:
 
 1. Updated react-webpack-template to 1.0.0 to include support for babel 6.
 
 ## 2.2.7
-___Upgrades___:
 
 1. Updated yeoman to 0.21
 2. Added some badges for the readme
 
 ## 2.2.6
-___Upgrades___:
 
 1. Added new version of ```react-webpack-template``` (provides new features for continuous testing and better dist build support)
 
 ## 2.2.5
-___Upgrades:___
 
 1. Added ability to create stateless components
 2. Updated README with new installation instructions (need to install globally)
 3. Added new tests for components (should be easier to handle in the future)
 
 ## 2.2.4
-___Upgrades:___
 
 1. Added automatic generation of components displayName property. This makes it easier to keep track of components that reside in deep subfolders (like src/components/my/example/components/indexComponent) would become "index" as a displayName, but should instead be MyExampleComponentsIndexComponent instead.
 
 ## 2.2.3
-___Fixes:___
 
 1. Fixed .gitignore renaming (Patch provided by [VovanR](https://github.com/VovanR))
 
 ## 2.2.0:
-___Upgrades:___
 
 1. Added new version of react-webpack-template, including support for React 0.14.

README.md

@@ -11,6 +11,7 @@ Out of the box it comes with support for:
 - Webpack
 - ES2015 via Babel-Loader
 - Different supported style languages (sass, scss, less, stylus)
+- Style transformations via PostCSS
 - Automatic code linting via esLint
 - Ability to unit test components via Karma and Mocha/Chai
 
@@ -25,6 +26,7 @@ If you have built a generator using generator-react-webpack, tell us and we will
 
 ## Generators that extend generator-react-webpack
 - [Generator-React-Webpack-Alt](https://github.com/weblogixx/generator-react-webpack-alt) (Adds ability to create actions, stores and sources for [alt.js](http://alt.js.org))
+- [Generator-React-Webpack-Redux](https://github.com/stylesuxx/generator-react-webpack-redux) (Adds ability to create actions and reducers for [Redux](https://github.com/rackt/redux))
 
 ---
 
@@ -64,6 +66,27 @@ 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*.
+
+Example for autoprefixer:
+```bash
+cd my-new-project
+npm install autoprefixer
+```
+Require in *cfg/base.js*
+```JavaScript
+...
+postcss: function () {
+  return [
+    require('autoprefixer')({
+      browsers: ['last 2 versions', 'ie >= 8']
+    })
+  ];
+}
+...
+```
+
 ## Usage
 The following commands are available in your project:
 ```bash

generators/app/index.js

@@ -46,11 +46,15 @@ module.exports = generator.Base.extend({
       // Set needed global vars for yo
       this.appName = props.appName;
       this.style = props.style;
+      this.postcss = props.postcss
 
       // Set needed keys into config
       this.config.set('appName', this.appName);
       this.config.set('appPath', this.appPath);
       this.config.set('style', this.style);
+      this.config.set('postcss', this.postcss);
+
+      this.config.save();
 
       done();
     }.bind(this));
@@ -79,7 +83,16 @@ module.exports = generator.Base.extend({
     if(styleConfig && styleConfig.packages) {
 
       for(let dependency of styleConfig.packages) {
-        packageSettings.dependencies[dependency.name] = dependency.version;
+        packageSettings.devDependencies[dependency.name] = dependency.version;
+      }
+    }
+
+    // Add postcss module if enabled
+    let postcssConfig = utils.config.getChoiceByKey('postcss', 'postcss');
+    if(this.postcss && postcssConfig && postcssConfig.packages) {
+
+      for(let dependency of postcssConfig.packages) {
+        packageSettings.devDependencies[dependency.name] = dependency.version;
       }
     }
 
@@ -89,11 +102,12 @@ module.exports = generator.Base.extend({
   writing: function() {
 
     let excludeList = [
-      'LICENCE',
+      'LICENSE',
       'README.md',
       'CHANGELOG.md',
       'node_modules',
-      'package.json'
+      'package.json',
+      '.travis.yml'
     ];
 
     // Get all files in our repo and copy the ones we should
@@ -113,14 +127,20 @@ module.exports = generator.Base.extend({
         } else {
           if (item === '.npmignore') {
             this.copy(item, '.gitignore');
+          } else {
+            this.copy(item, item);
           }
-          this.copy(item, item);
         }
       }
     });
   },
 
   install: function() {
+    if(this.postcss) {
+      let postcss = require('./postcss');
+      postcss.write(path.join(this.destinationRoot(), 'cfg/base.js'));
+    }
+
     if(!this.options['skip-install']) {
       this.installDependencies({ bower: false });
     }

generators/app/postcss.js

@@ -0,0 +1,39 @@
+'use strict';
+let fs = require('fs');
+let esprima = require('esprima');
+let walk = require('esprima-walk');
+let escodegen = require('escodegen');
+
+module.exports = {
+  write: function(path) {
+    let baseConfigPath = path;
+    let cssDialects = ['/\\.css$/', '/\\.sass/', '/\\.scss/', '/\\.less/', '/\\.styl/'];
+
+    let postcss = 'var postcss = { postcss: function() { return []; } }';
+    postcss = esprima.parse(postcss);
+    postcss = postcss.body[0].declarations[0].init.properties[0];
+
+    let data = fs.readFileSync(baseConfigPath, 'utf8');
+    let parsed = esprima.parse(data);
+
+    walk.walkAddParent(parsed, function(node) {
+      if(node.type === 'AssignmentExpression' && node.left.object.name === 'module') {
+        node.right.properties.push(postcss);
+      }
+
+      if(node.type === 'Property' && node.key.name === 'test') {
+        if(cssDialects.indexOf(node.value.raw) > -1) {
+          let current = node.parent.properties[1].value.value;
+          let position = current.split('!', 2).join('!').length;
+          current = [current.slice(0, position), '!postcss-loader', current.slice(position)].join('');
+
+          node.parent.properties[1].value.value = current;
+        }
+      }
+    });
+
+    let options = { format: { indent: { style: '  ' } } };
+    let code = escodegen.generate(parsed, options);
+    fs.writeFileSync(baseConfigPath, code, 'utf8');
+  }
+}

generators/app/prompts.js

@@ -14,5 +14,11 @@ module.exports = [
     message: 'Which styles language you want to use?',
     choices: utils.config.getChoices('style'),
     default: utils.config.getDefaultChoice('style')
+  },
+  {
+    type: 'confirm',
+    name: 'postcss',
+    message: 'Enable postcss?',
+    default: false
   }
 ];

generators/component/index.js

@@ -2,11 +2,11 @@
 let generator = require('yeoman-generator');
 let utils = require('../../utils/all');
 
-module.exports = generator.NamedBase.extend({
+module.exports = generator.Base.extend({
 
   constructor: function() {
-    generator.NamedBase.apply(this, arguments);
-
+    generator.Base.apply(this, arguments);
+    this.argument('name', { type: String, required: true });
     this.option('stateless', {
       desc: 'Create a stateless component instead of a full one',
       defaults: false

generators/component/templates/tests/Base.js

@@ -10,13 +10,13 @@ import createComponent from 'helpers/shallowRenderHelper';
 import <%= component.className %> from '<%= component.webpackPath %>';
 
 describe('<%= component.className %>', () => {
-    let component;
+  let component;
 
-    beforeEach(() => {
-      component = createComponent(<%= component.className %>);
-    });
+  beforeEach(() => {
+    component = createComponent(<%= component.className %>);
+  });
 
-    it('should have its component name as default className', () => {
-      expect(component.props.className).to.equal('<%= style.className %>');
-    });
+  it('should have its component name as default className', () => {
+    expect(component.props.className).to.equal('<%= style.className %>');
+  });
 });

jsconfig.json

@@ -0,0 +1,7 @@
+//Support for Visual Studio Code https://code.visualstudio.com/docs/languages/javascript
+{
+	"compilerOptions": {
+		"target": "ES6",
+		"module": "commonjs"
+	}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-react-webpack",
-  "version": "3.0.0",
+  "version": "3.2.2",
   "description": "Yeoman generator for using React with Webpack via Babel",
   "keywords": [
     "yeoman-generator",
@@ -42,12 +42,17 @@
   "dependencies": {
     "react-webpack-template": "^1.0.0",
     "underscore.string": "^3.2.2",
-    "yeoman-generator": "^0.21.0",
-    "yeoman-welcome": "^1.0.1"
+    "yeoman-generator": "^0.22.0",
+    "yeoman-welcome": "^1.0.1",
+    "esprima": "^2.7.0",
+    "esprima-walk": "^0.1.0",
+    "escodegen": "^1.7.0"
   },
   "devDependencies": {
     "chai": "^3.2.0",
-    "mocha": "^2.3.2"
+    "mocha": "^2.3.2",
+    "yeoman-assert": "^2.1.1",
+    "yeoman-test": "^1.0.0"
   },
   "engines": {
     "node": ">=4.0.0",

test/generators/app/indexTest.js

@@ -1,8 +1,8 @@
 'use strict';
 let path = require('path');
 let expect = require('chai').expect;
-let assert = require('yeoman-generator').assert;
-let helpers = require('yeoman-generator').test
+let assert = require('yeoman-assert');
+let helpers = require('yeoman-test');
 
 describe('react-webpack:app', () => {
 
@@ -35,6 +35,10 @@ describe('react-webpack:app', () => {
     it('should use "css" as default style language', () => {
       expect(generator.config.get('style')).to.equal('css');
     });
+
+    it('should not enable "PostCSS" by default', () => {
+      expect(generator.config.get('postcss')).to.equal(false);
+    });
   });
 
   describe('#createFiles', () => {
@@ -42,10 +46,10 @@ describe('react-webpack:app', () => {
     it('should generate dot files', () => {
 
       assert.file([
+        '.babelrc',
         '.editorconfig',
         '.eslintrc',
         '.gitignore',
-        '.npmignore',
         '.yo-rc.json'
       ]);
     });
@@ -53,7 +57,6 @@ describe('react-webpack:app', () => {
     it('should generate project configuration files', () => {
 
       assert.file([
-        'LICENSE',
         'package.json'
       ]);
     });
@@ -74,8 +77,116 @@ describe('react-webpack:app', () => {
 
       assert.file([
         'src/actions/README.md',
+        'src/index.js',
+        'src/components/Main.js',
+        'src/favicon.ico',
+        'src/images/yeoman.png',
+        'src/index.html',
+        'src/sources/README.md',
+        'src/stores/README.md',
+        'src/styles/App.css'
+      ]);
+    });
+
+    it('should generate test configuration and basic tests', () => {
+
+      assert.file([
+        'karma.conf.js',
+        'test/components/MainTest.js',
+        'test/helpers/shallowRenderHelper.js',
+        'test/loadtests.js'
+      ]);
+    });
+  });
+});
+
+describe('react-webpack:app non-default-prompts', () => {
+
+  let defaultPrompts = require('../../../generators/app/prompts.js');
+  let prompts = {};
+  for(let p of defaultPrompts) {
+    prompts[p.name] = p.default;
+  }
+
+  prompts.postcss = true;
+
+  let generator;
+  let generatorBase = path.join(__dirname, '../../../generators/app');
+
+  before((done) => {
+
+    helpers.run(generatorBase)
+      .inTmpDir()
+      .withOptions({
+        'skip-welcome-message': true,
+        'skip-install': true
+      })
+      .withPrompts(prompts)
+      .on('ready', (instance) => {
+        generator = instance;
+      })
+      .on('end', done);
+  });
+
+  describe('#config', () => {
+
+    it('should use "css" as default style language', () => {
+      expect(generator.config.get('style')).to.equal('css');
+    });
+  });
+
+  describe('#createFiles', () => {
+
+    it('should generate dot files', () => {
+
+      assert.file([
+        '.babelrc',
+        '.editorconfig',
+        '.eslintrc',
+        '.gitignore',
+        '.yo-rc.json'
+      ]);
+    });
+
+    it('should generate project configuration files', () => {
+
+      assert.file([
+        'package.json'
+      ]);
+    });
+
+    it('should generate the webpack configuration', () => {
+
+      assert.file([
+        'cfg/base.js',
+        'cfg/dev.js',
+        'cfg/dist.js',
+        'cfg/test.js',
+        'server.js',
+        'webpack.config.js'
+      ]);
+    });
+
+    it('should insert the postcss loader into the style pipes', () => {
+
+      assert.fileContent('cfg/base.js', 'loader: \'style-loader!css-loader!postcss-loader\'');
+      assert.fileContent('cfg/base.js', 'loader: \'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded&indentedSyntax\'');
+      assert.fileContent('cfg/base.js', 'loader: \'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded\'');
+      assert.fileContent('cfg/base.js', 'loader: \'style-loader!css-loader!postcss-loader!less-loader\'');
+      assert.fileContent('cfg/base.js', 'loader: \'style-loader!css-loader!postcss-loader!stylus-loader\'');
+    });
+
+    it('should append the postcss function to the base config', () => {
+
+      assert.fileContent('cfg/base.js', ',\n  postcss: function () {\n    return [];\n  }');
+    });
+
+    it('should generate required source files', () => {
+
+      assert.file([
+        'src/actions/README.md',
+        'src/index.js',
         'src/components/Main.js',
-        'src/components/run.js',
         'src/favicon.ico',
         'src/images/yeoman.png',
         'src/index.html',

test/generators/component/indexTest.js

@@ -1,7 +1,7 @@
 'use strict';
 let path = require('path');
-let assert = require('yeoman-generator').assert;
-let helpers = require('yeoman-generator').test
+let assert = require('yeoman-assert');
+let helpers = require('yeoman-test');
 
 describe('react-webpack:component', () => {
 

utils/configopts.json

@@ -39,6 +39,18 @@
       }
     ]
   },
+  "postcss": {
+    "options": [
+      {
+        "name": "postcss",
+        "value": "postcss",
+        "packages": [
+          { "name": "postcss", "version": "^5.0.11" },
+          { "name": "postcss-loader", "version": "^0.8.0" }
+        ]
+      }
+    ]
+  },
   "style": {
     "options": [
       {
@@ -51,8 +63,8 @@
         "value": "sass",
         "suffix": ".sass",
         "packages": [
-          { "name": "sass-loader", "version": "^1.0.1" },
-          { "name": "node-sass", "version": "^3.3.3" }
+          { "name": "sass-loader", "version": "^3.1.2" },
+          { "name": "node-sass", "version": "^3.4.2" }
         ]
       },
       {
@@ -60,8 +72,8 @@
         "value": "scss",
         "suffix": ".scss",
         "packages": [
-          { "name": "sass-loader", "version": "^1.0.1" },
-          { "name": "node-sass", "version": "^3.3.3" }
+          { "name": "sass-loader", "version": "^3.1.2" },
+          { "name": "node-sass", "version": "^3.4.2" }
         ]
       },
       {
@@ -78,7 +90,9 @@
         "value": "stylus",
         "suffix": ".styl",
         "packages": [
-          { "name": "stylus-loader", "version": "^0.5.0" }
+          { "name": "stylus-loader", "version": "^0.5.0" },
+          { "name": "stylus", "version": "~0.49.2" },
+          { "name": "nib", "version": "~1.0.4" }
         ]
       }
     ],