3.2.0

Add basic support for PostCSS (provided by @stylesuxx)

.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,11 +1,49 @@
 # generator-react-webpack - Changelog
 
+## 3.1.2
+
+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
+
+1. Updated react-webpack-template to 1.0.0 to include support for babel 6.
+
+## 2.2.7
+
+1. Updated yeoman to 0.21
+2. Added some badges for the readme
+
+## 2.2.6
+
+1. Added new version of ```react-webpack-template``` (provides new features for continuous testing and better dist build support)
+
+## 2.2.5
+
+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
+
+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

@@ -1,4 +1,7 @@
-# generator-react-webpack V2.0 [![Build Status](https://secure.travis-ci.org/newtriks/generator-react-webpack.png?branch=master)](https://travis-ci.org/newtriks/generator-react-webpack)  [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/newtriks/generator-react-webpack/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
+# generator-react-webpack V2.0
+
+[![Build Status](https://secure.travis-ci.org/newtriks/generator-react-webpack.png?branch=master)](https://travis-ci.org/newtriks/generator-react-webpack)   [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/newtriks/generator-react-webpack/trend.png)](https://bitdeli.com/free "Bitdeli Badge") ![Amount of Downloads per month](https://img.shields.io/npm/dm/generator-react-webpack.svg "Amount of Downloads") ![Dependency Tracker](https://img.shields.io/david/newtriks/generator-react-webpack.svg "Dependency Tracker") ![Dependency Tracker](https://img.shields.io/david/dev/newtriks/generator-react-webpack.svg "Dependency Tracker") ![Node Version](https://img.shields.io/node/v/generator-react-webpack.svg "Node Version")
+
 > Yeoman generator for [ReactJS](http://facebook.github.io/react/) - lets you quickly set up a project including karma test runner and [Webpack](http://webpack.github.io/) module system.
 
 # About
@@ -8,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
 
@@ -27,8 +31,9 @@ If you have built a generator using generator-react-webpack, tell us and we will
 
 ## Installation
 ```bash
+# Make sure both is installed globally
 npm install -g yo
-npm install generator-react-webpack
+npm install -g generator-react-webpack
 ```
 
 ## Setting up projects
@@ -51,6 +56,36 @@ yo react-webpack:component my/namespaced/components/name
 
 The above command will create a new component, as well as its stylesheet and a basic testcase.
 
+## Generating new stateless functional components
+```
+yo react-webpack:component my/namespaced/components/name --stateless
+```
+
+Stateless functional components where introduced in React v0.14. They have a much shorter syntax than regular ones and no state or lifecycle methods at all. Please read the [React 0.14 release notes](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html) to get more information about those components.
+
+___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,15 +2,21 @@
 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
+    });
   },
 
   writing: function() {
 
     let settings = utils.yeoman.getAllSettingsFromComponentName(this.name, this.config.get('style'));
+    let componentType = this.options.stateless ? 'Stateless' : 'Base';
 
     // Create the style template
     this.fs.copyTpl(
@@ -21,7 +27,7 @@ module.exports = generator.NamedBase.extend({
 
     // Create the component
     this.fs.copyTpl(
-      this.templatePath('components/Base.js'),
+      this.templatePath(`components/${componentType}.js`),
       this.destinationPath(settings.component.path + settings.component.fileName),
       settings
     );

generators/component/templates/components/Base.js

@@ -14,6 +14,8 @@ class <%= component.className %> extends React.Component {
   }
 }
 
+<%= component.className %>.displayName = '<%= component.displayName %>';
+
 // Uncomment properties you need
 // <%= component.className %>.propTypes = {};
 // <%= component.className %>.defaultProps = {};

generators/component/templates/components/Stateless.js

@@ -0,0 +1,19 @@
+'use strict';
+
+import React from 'react';
+
+require('<%= style.webpackPath %>');
+
+let <%= component.className %> = (props) => (
+  <div className="<%= style.className %>">
+    Please edit <%= component.path %>/<%= component.fileName %> to update this component!
+  </div>
+);
+
+<%= component.className %>.displayName = '<%= component.displayName %>';
+
+// Uncomment properties you need
+// <%= component.className %>.propTypes = {};
+// <%= component.className %>.defaultProps = {};
+
+export default <%= component.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": "2.2.3",
+  "version": "3.2.0",
   "description": "Yeoman generator for using React with Webpack via Babel",
   "keywords": [
     "yeoman-generator",
@@ -34,17 +34,25 @@
     "url": "git://github.com/newtriks/generator-react-webpack.git"
   },
   "scripts": {
-    "test": "mocha"
+    "test": "mocha",
+    "release:major": "npm version major && npm publish && git push --follow-tags",
+    "release:minor": "npm version minor && npm publish && git push --follow-tags",
+    "release:patch": "npm version patch && npm publish && git push --follow-tags"
   },
   "dependencies": {
-    "react-webpack-template": "^0.2.0",
+    "react-webpack-template": "^1.0.0",
     "underscore.string": "^3.2.2",
-    "yeoman-generator": "^0.20.3",
-    "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'
       ]);
     });
@@ -96,3 +99,111 @@ describe('react-webpack:app', () => {
     });
   });
 });
+
+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/components/Main.js',
+        'src/components/run.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'
+      ]);
+    });
+  });
+});

test/generators/component/indexTest.js

@@ -1,283 +1,181 @@
 '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', () => {
 
   let generatorComponent = path.join(__dirname, '../../../generators/component');
 
+  // List of available style types. Please add a line that says
+  // testComponentWithStyle(styleTypes.KEY); to the bottom of the file
+  // to run all unit tests for this filetype.
+  const styleTypes = {
+    css: {
+      type: 'css',
+      fileName: 'src/styles/Mycomponent.css',
+      expandedFileName: 'src/styles/my/littleSpecial/Test.css',
+      assertions: {
+        componentImport: 'require(\'styles//Mycomponent.css\');',
+        styleContent: '.mycomponent-component'
+      }
+    },
+    sass: {
+      type: 'sass',
+      fileName: 'src/styles/Mycomponent.sass',
+      expandedFileName: 'src/styles/my/littleSpecial/Test.sass',
+      assertions: {
+        componentImport: 'require(\'styles//Mycomponent.sass\');',
+        styleContent: '.mycomponent-component'
+      }
+    },
+    scss: {
+      type: 'scss',
+      fileName: 'src/styles/Mycomponent.scss',
+      expandedFileName: 'src/styles/my/littleSpecial/Test.scss',
+      assertions: {
+        componentImport: 'require(\'styles//Mycomponent.scss\');',
+        styleContent: '.mycomponent-component'
+      }
+    },
+    less: {
+      type: 'less',
+      fileName: 'src/styles/Mycomponent.less',
+      expandedFileName: 'src/styles/my/littleSpecial/Test.less',
+      assertions: {
+        componentImport: 'require(\'styles//Mycomponent.less\');',
+        styleContent: '.mycomponent-component'
+      }
+    },
+    stylus: {
+      type: 'stylus',
+      fileName: 'src/styles/Mycomponent.styl',
+      expandedFileName: 'src/styles/my/littleSpecial/Test.styl',
+      assertions: {
+        componentImport: 'require(\'styles//Mycomponent.styl\');',
+        styleContent: '.mycomponent-component'
+      }
+    }
+  };
+
   /**
    * Return a newly generated component with given name and style
-   * @param {String} name
-   * @param {String} styleType
-   * @param {Function} callback
+   * @param {String} name Name of the component
+   * @param {String} styleType Styling language to use
+   * @param {Object} options Options to use for the generator
+   * @param {Function} callback Test callback to run
    */
-  function createGeneratedComponent(name, styleType, callback) {
+  function createGeneratedComponent(name, styleType, options, callback) {
     helpers.run(generatorComponent)
       .withArguments([name])
+      .withOptions(options)
       .on('ready', (instance) => {
         instance.config.set('style', styleType);
       })
       .on('end', callback);
   }
 
-  describe('When using style type "css"', () => {
+  /**
+   * Test a component with styling applied
+   * @param {Object} style The style to apply (see styleTypes above)
+   * @param {Object} options Options to use [optional]
+   */
+  function testComponentWithStyle(style, options) {
 
-    describe('Setup', () => {
+    // Make sure we always have options
+    if(!options) {
+      options = {};
+    }
 
-      it('should create the react component, its stylesheet and test file', (done) => {
-        createGeneratedComponent('mycomponent', 'css', () => {
+    describe(`When using style type "${style.type}"`, () => {
 
-          assert.file([
-            'src/components/MycomponentComponent.js',
-            'src/styles/Mycomponent.css',
-            'test/components/MycomponentComponentTest.js'
-          ]);
-          done();
+      describe('When writing is called', () => {
+
+        it(`should create the react component, its ${style.type}-stylesheet and test file`, (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+
+            assert.file([
+              'src/components/MycomponentComponent.js',
+              style.fileName,
+              'test/components/MycomponentComponentTest.js'
+            ]);
+            done();
+          });
+        });
+      });
+
+      describe('When creating a component', () => {
+
+        it('should always import REACT', (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+            assert.fileContent('src/components/MycomponentComponent.js', `import React from 'react';`);
+            done();
+          });
+        });
+
+        it(`should require the created ${style.type} file`, (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+            assert.fileContent('src/components/MycomponentComponent.js', style.assertions.componentImport);
+            done();
+          });
+        });
+
+        it('should have its displayName set per default', (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+            assert.fileContent('src/components/MycomponentComponent.js', `displayName = 'MycomponentComponent';`);
+            done();
+          });
+        });
+
+        it('should export the created component', (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+            assert.fileContent('src/components/MycomponentComponent.js', `export default MycomponentComponent`);
+            done();
+          });
+        });
+
+        it(`should be possible to create components in a subfolder`, (done) => {
+          createGeneratedComponent('my/little !special/test', style.type, options, () => {
+
+            assert.file([
+              'src/components/my/littleSpecial/TestComponent.js',
+              style.expandedFileName,
+              'test/components/my/littleSpecial/TestComponentTest.js'
+            ]);
+            done();
+          });
+        });
+      });
+
+      describe('Style', () => {
+
+        it(`should add the components ${style.type} class to the stylesheet`, (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+            assert.fileContent(style.fileName, style.assertions.styleContent);
+            done();
+          });
+        });
+      });
+
+      describe('Test', () => {
+
+        it('should import the react component', (done) => {
+          createGeneratedComponent('mycomponent', style.type, options, () => {
+            assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
+            done();
+          });
         });
       });
     });
+  }
 
-    describe('Component', () => {
-
-      it('should require the created css file', (done) => {
-        createGeneratedComponent('mycomponent', 'css', () => {
-          assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.css\');');
-          done();
-        });
-      });
-    });
-
-    describe('Style', () => {
-
-      it('should add the components css class to the stylesheet', (done) => {
-        createGeneratedComponent('mycomponent', 'css', () => {
-          assert.fileContent('src/styles/Mycomponent.css', '.mycomponent-component');
-          done();
-        });
-      });
-    });
-
-    describe('Test', () => {
-
-      it('should import the react component', (done) => {
-        createGeneratedComponent('mycomponent', 'css', () => {
-          assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
-          done();
-        });
-      });
-    });
-  }); // End css
-
-  describe('When creating a component in a subfolder', () => {
-
-    describe('Setup', () => {
-
-      it('should create the react component, its stylesheet and test file', (done) => {
-        createGeneratedComponent('my/little !special/test', 'css', () => {
-
-          assert.file([
-            'src/components/my/littleSpecial/TestComponent.js',
-            'src/styles/my/littleSpecial/Test.css',
-            'test/components/my/littleSpecial/TestComponentTest.js'
-          ]);
-          done();
-        });
-      });
-    });
-  }); // End css (subfolder)
-
-  describe('When using style type "sass"', () => {
-
-    describe('Setup', () => {
-
-      it('should create the react component, its stylesheet and test file', (done) => {
-        createGeneratedComponent('mycomponent', 'sass', () => {
-
-          assert.file([
-            'src/components/MycomponentComponent.js',
-            'src/styles/Mycomponent.sass',
-            'test/components/MycomponentComponentTest.js'
-          ]);
-          done();
-        });
-      });
-    });
-
-    describe('Component', () => {
-
-      it('should require the created sass file', (done) => {
-        createGeneratedComponent('mycomponent', 'sass', () => {
-          assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.sass\');');
-          done();
-        });
-      });
-    });
-
-    describe('Style', () => {
-
-      it('should add the components sass class to the stylesheet', (done) => {
-        createGeneratedComponent('mycomponent', 'sass', () => {
-          assert.fileContent('src/styles/Mycomponent.sass', '.mycomponent-component');
-          done();
-        });
-      });
-    });
-
-    describe('Test', () => {
-
-      it('should import the react component', (done) => {
-        createGeneratedComponent('mycomponent', 'sass', () => {
-          assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
-          done();
-        });
-      });
-    });
-  }); // End sass
-
-  describe('When using style type "scss"', () => {
-
-    describe('Setup', () => {
-
-      it('should create the react component, its stylesheet and test file', (done) => {
-        createGeneratedComponent('mycomponent', 'scss', () => {
-
-          assert.file([
-            'src/components/MycomponentComponent.js',
-            'src/styles/Mycomponent.scss',
-            'test/components/MycomponentComponentTest.js'
-          ]);
-          done();
-        });
-      });
-    });
-
-    describe('Component', () => {
-
-      it('should require the created scss file', (done) => {
-        createGeneratedComponent('mycomponent', 'scss', () => {
-          assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.scss\');');
-          done();
-        });
-      });
-    });
-
-    describe('Style', () => {
-
-      it('should add the components scss class to the stylesheet', (done) => {
-        createGeneratedComponent('mycomponent', 'scss', () => {
-          assert.fileContent('src/styles/Mycomponent.scss', '.mycomponent-component');
-          done();
-        });
-      });
-    });
-
-    describe('Test', () => {
-
-      it('should import the react component', (done) => {
-        createGeneratedComponent('mycomponent', 'scss', () => {
-          assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
-          done();
-        });
-      });
-    });
-  }); // End scss
-
-  describe('When using style type "less"', () => {
-
-    describe('Setup', () => {
-
-      it('should create the react component, its stylesheet and test file', (done) => {
-        createGeneratedComponent('mycomponent', 'less', () => {
-
-          assert.file([
-            'src/components/MycomponentComponent.js',
-            'src/styles/Mycomponent.less',
-            'test/components/MycomponentComponentTest.js'
-          ]);
-          done();
-        });
-      });
-    });
-
-    describe('Component', () => {
-
-      it('should require the created less file', (done) => {
-        createGeneratedComponent('mycomponent', 'less', () => {
-          assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.less\');');
-          done();
-        });
-      });
-    });
-
-    describe('Style', () => {
-
-      it('should add the components less class to the stylesheet', (done) => {
-        createGeneratedComponent('mycomponent', 'less', () => {
-          assert.fileContent('src/styles/Mycomponent.less', '.mycomponent-component');
-          done();
-        });
-      });
-    });
-
-    describe('Test', () => {
-
-      it('should import the react component', (done) => {
-        createGeneratedComponent('mycomponent', 'less', () => {
-          assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
-          done();
-        });
-      });
-    });
-  }); // End less
-
-  describe('When using style type "stylus"', () => {
-
-    describe('Setup', () => {
-
-      it('should create the react component, its stylesheet and test file', (done) => {
-        createGeneratedComponent('mycomponent', 'stylus', () => {
-
-          assert.file([
-            'src/components/MycomponentComponent.js',
-            'src/styles/Mycomponent.styl',
-            'test/components/MycomponentComponentTest.js'
-          ]);
-          done();
-        });
-      });
-    });
-
-    describe('Component', () => {
-
-      it('should require the created stylus file', (done) => {
-        createGeneratedComponent('mycomponent', 'stylus', () => {
-          assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.styl\');');
-          done();
-        });
-      });
-    });
-
-    describe('Style', () => {
-
-      it('should add the components stylus class to the stylesheet', (done) => {
-        createGeneratedComponent('mycomponent', 'stylus', () => {
-          assert.fileContent('src/styles/Mycomponent.styl', '.mycomponent-component');
-          done();
-        });
-      });
-    });
-
-    describe('Test', () => {
-
-      it('should import the react component', (done) => {
-        createGeneratedComponent('mycomponent', 'less', () => {
-          assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
-          done();
-        });
-      });
-    });
-  }); // End stylus
+  // Run all tests for all available style types.
+  testComponentWithStyle(styleTypes.css);
+  testComponentWithStyle(styleTypes.sass);
+  testComponentWithStyle(styleTypes.scss);
+  testComponentWithStyle(styleTypes.less);
+  testComponentWithStyle(styleTypes.stylus);
 
+  // Test stateless components (should be enough when testing with defaults)
+  testComponentWithStyle(styleTypes.css, { stateless: true });
 });

test/utils/yeomanTest.js

@@ -82,6 +82,7 @@ describe('Utilities:Yeoman', () => {
           path: 'src/components/my/component/',
           fileName: 'TestComponent.js',
           className: 'TestComponent',
+          displayName: 'MyComponentTestComponent',
           suffix: '.js'
         },
         test: {

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" }
         ]
       }
     ],

utils/yeoman.js

@@ -33,6 +33,9 @@ let getAllSettingsFromComponentName = (componentName, style) => {
   let componentBaseName = _.capitalize(componentParts.pop());
   let componentPartPath = componentParts.join('/');
 
+  // Get the components displayName property
+  let componentFullName = _.classify(_.replaceAll(componentName, '/', '_'));
+
   // Configure Styles
   let stylePaths = configUtils.getChoiceByKey('path', 'style');
   let styleSettings = configUtils.getChoiceByKey('style', style);
@@ -56,6 +59,7 @@ let getAllSettingsFromComponentName = (componentName, style) => {
       path: `${componentPath.path}/${componentPartPath}/`,
       fileName: `${componentBaseName}Component.js`,
       className: `${componentBaseName}Component`,
+      displayName: `${componentFullName}Component`,
       suffix: '.js'
     },
     test: {