Permalink
Browse files

Added support for configuring a className prefix (#310)

This feature allows users to put a `cssClsPrefix` property into their
.yo-rc.json. If configured, the component generator will add this string
as a prefix to className attributes.

Example:

	// .yo-rc.json
	{
	  "generator-react-webpack": {
	    "appName": "v4-latest-install",
	    "style": "css",
	    "cssmodules": false,
	    "cssClsPrefix": "myapp",
	    "postcss": false,
	    "generatedWithVersion": 4
	  }
	}

Components generated will now prepend the `myapp` prefix on their class
names, e.g.

	$ yo react-webpack:component hello
	<div className="myapp-hello-component" />
  • Loading branch information...
1 parent 01855bd commit 3c55a1397100ddde31280237f04729c887fe4bf0 @sthzg sthzg committed on GitHub Nov 23, 2016
Showing with 34 additions and 5 deletions.
  1. +22 −1 generators/component/index.js
  2. +8 −2 test/utils/yeomanTest.js
  3. +4 −2 utils/yeoman.js
@@ -23,6 +23,12 @@ class ComponentGenerator extends Generators.Base {
this.useCssModules = false;
/**
+ * A string to prepended to the `className` attribute of generated components.
+ * @type {string}
+ */
+ this._cssClsPrefix = '';
+
+ /**
* Flag indicating if stateful components should extends from React.PureComponent
* @type {boolean}
*/
@@ -58,6 +64,13 @@ class ComponentGenerator extends Generators.Base {
});
}
+ get cssClsPrefix() {
+ return this._cssClsPrefix;
+ }
+
+ set cssClsPrefix(val) {
+ this._cssClsPrefix = (val === '') ? '' : `${val}-`;
+ }
configuring() {
// Read the requested major version or default it to the latest stable
@@ -69,6 +82,7 @@ class ComponentGenerator extends Generators.Base {
this.useStyles = !this.options.nostyle;
this.useCssModules = this.config.get('cssmodules') || false;
+ this.cssClsPrefix = this.config.get('cssClsPrefix') || '';
// Make sure we don't try to use template v3 with cssmodules
if (this.generatorVersion < 4 && this.useStyles && this.useCssModules) {
@@ -82,7 +96,14 @@ class ComponentGenerator extends Generators.Base {
writing() {
const settings =
- getAllSettingsFromComponentName(this.name, this.config.get('style'), this.useCssModules, this.options.pure, this.generatorVersion);
+ getAllSettingsFromComponentName(
+ this.name,
+ this.config.get('style'),
+ this.useCssModules,
+ this.options.pure,
+ this.generatorVersion,
+ this.cssClsPrefix
+ );
// Create the style template. Skipped if nostyle is set as command line flag
if(this.useStyles) {
@@ -116,11 +116,17 @@ describe('Utilities:Yeoman', () => {
};
it('should get all required information for component creation from the components name', () => {
- expect(utils.getAllSettingsFromComponentName('my/component/test', 'css', true, false, 4)).to.deep.equal(expectionNamespaced);
+ expect(utils.getAllSettingsFromComponentName('my/component/test', 'css', true, false, 4, '')).to.deep.equal(expectionNamespaced);
+ });
+
+ it('should prepend a prefix to the style.className attribute', () => {
+ const expectation = Object.assign({}, expectionNamespaced);
+ expectation.style.className = 'myapp-test-component';
+ expect(utils.getAllSettingsFromComponentName('my/component/test', 'css', true, false, 4, 'myapp-')).to.deep.equal(expectation);
});
it('should build path information wo/ two slashes when dealing with a non-namespaced component', () => {
- expect(utils.getAllSettingsFromComponentName('test', 'css', true, false, 4)).to.deep.equal(expectionRoot);
+ expect(utils.getAllSettingsFromComponentName('test', 'css', true, false, 4, '')).to.deep.equal(expectionRoot);
});
});
View
@@ -20,11 +20,13 @@ let getBaseDir = () => {
* Get all settings (paths and the like) from components name
* @param {String} componentName The components name
* @param {String} style Style language to use [optional]
+ * @param {boolean} useCssModules Flag indicating whether to use css modules
* @param {Boolean} isPure Use a pure component? [optional]
* @param {String|Number} generatorVersion The version of the generator [optional]
+ * @param {String} cssClsPrefix Prefix to prepended to the component class name
* @return {Object} Component settings
*/
-let getAllSettingsFromComponentName = (componentName, style, useCssModules, isPure, generatorVersion) => {
+let getAllSettingsFromComponentName = (componentName, style, useCssModules, isPure, generatorVersion, cssClsPrefix) => {
// Use css per default
if(!style) {
@@ -65,7 +67,7 @@ let getAllSettingsFromComponentName = (componentName, style, useCssModules, isPu
webpackPath: `./${componentBaseName.toLowerCase()}${useCssModules ? '.cssmodule' : ''}${styleSettings.suffix}`,
path: path.normalize(`${componentPath.path}/${componentPartPath}/`),
fileName: `${componentBaseName.toLowerCase()}${useCssModules ? '.cssmodule' : ''}${styleSettings.suffix}`,
- className: getComponentStyleName(componentBaseName),
+ className: getComponentStyleName(cssClsPrefix + componentBaseName),
suffix: styleSettings.suffix
},
component: {

0 comments on commit 3c55a13

Please sign in to comment.