[minor] Enable shorten css names for generators (#878)

* Enable shorten CSS class names for generator * temporary eslint-disable-line
electrode-io · Jul 23, 2018 · 47acd2d · 47acd2d
1 parent 58eaec4
commit 47acd2d
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 433 deletions.
diff --git a/packages/generator-electrode/generators/app/templates/src/client/components/demo-buttons.jsx b/packages/generator-electrode/generators/app/templates/src/client/components/demo-buttons.jsx
@@ -1,31 +1,31 @@
 import React from "react";
-import custom from "../styles/custom.css";
-import milligram from "milligram";
+import custom from "../styles/custom.css"; // eslint-disable-line no-unused-vars
+import milligram from "milligram/dist/milligram.css"; // eslint-disable-line no-unused-vars
 
 /*
  * Demostrates a simple pure functional component
  */
 
 export const DemoButtons = () => (
   <div>
-    <h6 className={custom["docs-header"]}>
+    <h6 styleName={"custom.docs-header"}>
       demo CSS modules with buttons from <a href="https://milligram.io/">milligram</a>
     </h6>
-    <div className={custom["docs-example"]}>
-      <a className={milligram.button} href="#">
+    <div styleName={"custom.docs-example"}>
+      <a styleName={"milligram.button"} href="#">
         Anchor button
       </a>
       <button>Button element</button>
       <input type="submit" value="submit input" />
       <input type="button" value="button input" />
     </div>
-    <div className={custom["docs-example"]}>
-      <a className={`${milligram.button} ${milligram["button-outline"]}`} href="#">
+    <div styleName={"custom.docs-example"}>
+      <a styleName={"milligram.button milligram.button-outline"} href="#">
         Anchor button
       </a>
-      <button className={milligram["button-outline"]}>Button element</button>
-      <input className={milligram["button-outline"]} type="submit" value="submit input" />
-      <input className={milligram["button-outline"]} type="button" value="button input" />
+      <button styleName={"milligram.button-outline"}>Button element</button>
+      <input styleName={"milligram.button-outline"} type="submit" value="submit input" />
+      <input styleName={"milligram.button-outline"} type="button" value="button input" />
     </div>
   </div>
 );
diff --git a/...s/generator-electrode/generators/app/templates/src/client/components/demo-pure-states.jsx b/...s/generator-electrode/generators/app/templates/src/client/components/demo-pure-states.jsx
@@ -7,25 +7,25 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { toggleCheck, incNumber, decNumber } from "../actions";
-import custom from "../styles/custom.css";
+import "../styles/custom.css";
 
 const DemoPureStates = props => {
   const { checked, value, dispatch } = props;
   return (
     <div>
-      <h6 className={custom["docs-header"]}>Demo Managing States in Pure Functional Component</h6>
+      <h6 styleName={"docs-header"}>Demo Managing States in Pure Functional Component</h6>
       <label
-        className={custom["checkbox-label"]}
+        styleName={"checkbox-label"}
         onChange={() => dispatch(toggleCheck())}
         checked={checked}
       >
         <input type="checkbox" checked={checked} onChange={() => null} />
         <span> checkbox </span>
       </label>
-      <div className={custom["checkbox-label-width10rem"]}>{checked ? "checked" : "unchecked"}</div>
+      <div styleName={"checkbox-label-width10rem"}>{checked ? "checked" : "unchecked"}</div>
       <div>
         <button onClick={() => dispatch(decNumber())}>&#8810;</button>
-        <div className={custom["checkbox-label-width6rem"]}>{value}</div>
+        <div styleName={"checkbox-label-width6rem"}>{value}</div>
         <button onClick={() => dispatch(incNumber())}>&#8811;</button>
       </div>
     </div>

diff --git a/packages/generator-electrode/generators/app/templates/src/client/components/demo-states.jsx b/packages/generator-electrode/generators/app/templates/src/client/components/demo-states.jsx
@@ -2,28 +2,26 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { toggleCheck, incNumber, decNumber } from "../actions";
-import custom from "../styles/custom.css";
+import "../styles/custom.css";
 
 class DemoStates extends React.Component {
   render() {
     const { checked, value, dispatch } = this.props;
     return (
       <div>
-        <h6 className={custom["docs-header"]}>Demo Managing States with Redux</h6>
+        <h6 styleName={"docs-header"}>Demo Managing States with Redux</h6>
         <label
-          className={custom["checkbox-label"]}
+          styleName={"checkbox-label"}
           onChange={() => dispatch(toggleCheck())}
           checked={checked}
         >
           <input type="checkbox" checked={checked} onChange={() => null} />
           <span> checkbox </span>
         </label>
-        <div className={custom["checkbox-label-width10rem"]}>
-          {checked ? "checked" : "unchecked"}
-        </div>
+        <div styleName={"checkbox-label-width10rem"}>{checked ? "checked" : "unchecked"}</div>
         <div>
           <button onClick={() => dispatch(decNumber())}>&#8810;</button>
-          <div className={custom["checkbox-label-width6rem"]}>{value}</div>
+          <div styleName={"checkbox-label-width6rem"}>{value}</div>
           <button onClick={() => dispatch(incNumber())}>&#8811;</button>
         </div>
       </div>

diff --git a/packages/generator-electrode/generators/app/templates/src/client/components/home.jsx b/packages/generator-electrode/generators/app/templates/src/client/components/home.jsx
@@ -16,7 +16,7 @@
 
 import React from "react";
 import "../styles/raleway.css";
-import custom from "../styles/custom.css";
+import custom from "../styles/custom.css"; // eslint-disable-line no-unused-vars
 import electrodePng from "../images/electrode.png";
 import DemoStates from "./demo-states";
 import DemoPureStates from "./demo-pure-states";
@@ -26,12 +26,12 @@ import Notifications from "react-notify-toast";
 //<% } %>
 
 export default () => (
-  <div className={custom.container}>
+  <div styleName={"custom.container"}>
     {/*<% if (pwa) { %>*/}
     <Notifications />
     {/*<% } %>*/}
 
-    <section className={custom.header}>
+    <section styleName={"custom.header"}>
       <h2>
         <span>Hello from </span>
         <a href="https://github.com/electrode-io">
@@ -41,15 +41,15 @@ export default () => (
       </h2>
     </section>
 
-    <div className={custom["docs-section"]}>
+    <div styleName={"custom.docs-section"}>
       <DemoStates />
     </div>
 
-    <div className={custom["docs-section"]}>
+    <div styleName={"custom.docs-section"}>
       <DemoPureStates />
     </div>
 
-    <div className={custom["docs-section"]}>
+    <div styleName={"custom.docs-section"}>
       <DemoButtons />
     </div>
   </div>