(feature) add more styling examples

src/entry.js

@@ -8,4 +8,7 @@ import './examples/react/index';
 // import './examples/redux/separate-files';
 // import './examples/redux/separate-files-redux-actions';
 // import './examples/router';
-// import './examples/sass/Component1';
+// import './examples/styles/cssmodules-className';
+// import './examples/styles/cssmodules-className-sass';
+// import './examples/styles/cssmodules-styleName';
+// import './examples/styles/scss';

src/examples/react/__tests__/__snapshots__/hello.test.js.snap

@@ -5,19 +5,18 @@ exports[`renders correctly 1`] = `
   <img
     alt=""
     src=""
-    styleName="logo"
+    style={
+      Object {
+        "width": "20px",
+      }
+    }
   />
   <div>
     Hello 
-    <span
-      styleName="name"
-    >
-      John
-    </span>
+    John
   </div>
   <button
     onClick={[Function]}
-    styleName="submit-button"
   >
     toggle: 
     ON

src/examples/react/hello.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './hello.css';
 import logo from './logo.svg';
 
 export class Hello extends React.Component {
@@ -23,9 +22,9 @@ export class Hello extends React.Component {
   render() {
     return (
       <div>
-        <img src={logo} styleName="logo" alt="" />
-        <div>Hello <span styleName="name">{this.props.name}</span></div>
-        <button styleName="submit-button" onClick={this.onClickHandler}>
+        <img style={{width: '20px'}} src={logo} alt="" />
+        <div>Hello {this.props.name}</div>
+        <button onClick={this.onClickHandler}>
           toggle: {this.state.toggle ? 'ON' : 'OFF'}
         </button>
       </div>

src/examples/styles/cssmodules-className-sass/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import style from './style.sass';
+
+function CssModulesClassNameSass() {
+  return (
+    <div className={style.parent}>
+      <div className={style.child} />
+    </div>
+  );
+}
+
+ReactDOM.render(
+  <CssModulesClassNameSass />,
+  document.querySelector('#app')
+);

src/examples/styles/cssmodules-className-sass/style.sass

@@ -0,0 +1,7 @@
+$backgroundColor: yellow
+
+.parent
+  .child
+    background-color: $backgroundColor
+    width: 100px
+    height: 100px

src/examples/styles/cssmodules-className/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import style from './style.css';
+
+function CssModulesClassName() {
+  return (
+    <div className={style.myBlock} />
+  );
+}
+
+ReactDOM.render(
+  <CssModulesClassName />,
+  document.querySelector('#app')
+);

src/examples/sass/Component1/style.scss → src/examples/styles/cssmodules-className/style.css

@@ -1,5 +1,9 @@
-.foo {
+.primaryColor {
+  background-color: red;
+}
+
+.myBlock {
+  composes: primaryColor;
   width: 100px;
   height: 100px;
-  background-color: red;
 }

src/examples/styles/cssmodules-styleName/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './style.css';
+
+// see react-css-modules in webpack config
+
+function CssModulesStyleName() {
+  return (
+    <div styleName="myBlock" />
+  );
+}
+
+ReactDOM.render(
+  <CssModulesStyleName />,
+  document.querySelector('#app')
+);

src/examples/styles/cssmodules-styleName/style.css

@@ -0,0 +1,9 @@
+.primaryColor {
+  background-color: green;
+}
+
+.myBlock {
+  composes: primaryColor;
+  width: 100px;
+  height: 100px;
+}

src/examples/sass/Component1/index.js → src/examples/styles/scss/index.js

@@ -2,11 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './style.scss';
 
-export function Component1() {
-  return <div className="foo">Component1</div>;
+function Scss() {
+  return (
+    <div className="parent">
+      <div className="child" />
+    </div>
+  );
 }
 
 ReactDOM.render(
-  <Component1 />,
+  <Scss />,
   document.querySelector('#app')
 );

src/examples/styles/scss/style.scss

@@ -0,0 +1,9 @@
+$backgroundColor: blue;
+
+.parent {
+  .child {
+    background-color: $backgroundColor;
+    width: 100px;
+    height: 100px;
+  }
+}

webpack.config.js

@@ -118,7 +118,12 @@ module.exports = (env) => {
   ];
 
   const CSS_MODULES_CLASS_NAME_TEMPLATE = '[local]-[hash:base64:5]';
-  const CSS_MODULES_CONFIG = `modules&importLoaders=1&localIdentName=${CSS_MODULES_CLASS_NAME_TEMPLATE}`;
+  const CSS_MODULES_CONFIG = {
+    modules: true,
+    sourceMap: false,
+    importLoaders: 1,
+    localIdentName: CSS_MODULES_CLASS_NAME_TEMPLATE
+  };
   const plugins = getPlugins(DEFAULT_PLUGINS, IS_PRODUCTION, IS_ANALYZE);
 
   return {
@@ -164,14 +169,38 @@ module.exports = (env) => {
         include: SRC_ABSOLUTE_PATH, // other paths are ignored
         use: ExtractTextPlugin.extract({
           fallback: 'style-loader',
-          use: `css-loader?${IS_PRODUCTION ? 'minimize&' : ''}${CSS_MODULES_CONFIG}`
+          use: {
+            loader: 'css-loader',
+            options: {
+              ...CSS_MODULES_CONFIG,
+              minimize: IS_PRODUCTION
+            }
+          }
         })
       }, {
         test: /\.scss$/,
         include: SRC_ABSOLUTE_PATH, // other paths are ignored
         use: ExtractTextPlugin.extract({
           fallback: 'style-loader',
-          use: `css-loader${IS_PRODUCTION ? '?minimize' : ''}!sass-loader`
+          use: [{
+            loader: 'css-loader',
+            options: {
+              minimize: IS_PRODUCTION
+            }
+          }, 'sass-loader']
+        })
+      }, {
+        test: /\.sass$/,
+        include: SRC_ABSOLUTE_PATH, // other paths are ignored
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [{
+            loader: 'css-loader',
+            options: {
+              ...CSS_MODULES_CONFIG,
+              minimize: IS_PRODUCTION
+            }
+          }, 'sass-loader']
         })
       }, {
         test: new RegExp(`\\.(${BIN_FILE_TYPES})$`),