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" />
react-webpack-generators · Nov 23, 2016 · 3c55a13 · 3c55a13
1 parent 01855bd
commit 3c55a13
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/generators/component/index.js b/generators/component/index.js
@@ -22,6 +22,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) {

diff --git a/test/utils/yeomanTest.js b/test/utils/yeomanTest.js
@@ -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);
       });
     });
 

diff --git a/utils/yeoman.js b/utils/yeoman.js
@@ -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: {