Merge pull request #13 from emakina-cee-oss/cli-12_css-module_support

css module support

.eslintrc

@@ -1,13 +1,13 @@
 {
     "extends": [
-        "./packages/generator-emakinacee-react/generators/app/templates/dot/.eslintrc"
+        "./packages/generator-emakinacee-react/generators/app/templates/dot/static/.eslintrc"
     ],
 
     "rules": {
         "import/no-nodejs-modules": 0
     },
 
-    "globals": {
-        "require": true
+    "env": {
+        "node": true
     }
 }

packages/generator-emakinacee-react/generators/app/templates/static/config/rewireSass.js

@@ -2,44 +2,75 @@
  * SASS Rewire
  * Rewire react-scripts to add support for SASS files.
  */
-
-const { getLoader } = require('react-app-rewired');
+const { getLoader, loaderNameMatches } = require('react-app-rewired');
 
 module.exports = (config, env) => {
     const sassExtension = [/\.scss$/, /\.sass$/];
+    const moduleSassExtension = [/\.module\.scss$/, /\.module\.sass$/];
+
+    const cssRulesProp = (env === 'production') ? 'loader' : 'use';
+
     const cssRules = getLoader(
         config.module.rules,
         rule => String(rule.test) === String(/\.css$/)
     );
+    // cra will support cssModules in an upcoming version
+    const moduleCssRulesFromConf = getLoader(
+        config.module.rules,
+        rule => String(rule.test) === String(/\.module\.css$/)
+    );
+
+    // currently css-modules are not supported -> create a deep cloneof the css-loader-rule
+    const moduleCssRules = moduleCssRulesFromConf || JSON.parse(JSON.stringify(cssRules));
+
+    const cssLoader = getLoader(cssRules[cssRulesProp], (rule) => {
+        return loaderNameMatches(rule, 'css-loader');
+    });
+
+    const moduleCssLoader = getLoader(moduleCssRules[cssRulesProp], (rule) => {
+        return loaderNameMatches(rule, 'css-loader');
+    });
+
+    cssLoader.options.importLoaders = moduleCssLoader.options.importLoader++; // increase preproccessing steps by 1 (sass-loader)
+    cssLoader.options.sourceMap = moduleCssLoader.options.sourceMap = true;
+
+    if (!moduleCssRulesFromConf) { // can be removed as soon as cra supports css-modules
+        moduleCssLoader.options.modules = true;
+        moduleCssLoader.options.localIdentName = '[path]__[name]___[local]'; // the same format as the upcoming cra-version
+    }
+
+    // ignore sassfiles in the fileLoader
+    const fileLoader = getLoader(
+        config.module.rules,
+        rule => loaderNameMatches(rule, 'file-loader')
+    );
+    fileLoader.exclude.push(sassExtension);
 
-    const getRule = () => {
-        if (env === 'production') {
-            return {
-                test: sassExtension,
-                loader: [
-                    ...cssRules.loader,
-                    {
-                        loader: require.resolve('sass-loader'),
-                    },
-                ]
-            };
-        } else {
-            return {
-                test: sassExtension,
-                use: [
-                    ...cssRules.use,
-                    {
-                        loader: require.resolve('sass-loader'),
-                    },
-                ]
-            };
-        }
+    const getRules = () => {
+        return [{
+            test: sassExtension,
+            exclude: moduleSassExtension,
+            [cssRulesProp]: [
+                ...cssRules[cssRulesProp],
+                {
+                    loader: require.resolve('sass-loader'),
+                },
+            ]
+        }, {
+            test: moduleSassExtension,
+            [cssRulesProp]: [
+                ...moduleCssRules[cssRulesProp],
+                {
+                    loader: require.resolve('sass-loader'),
+                },
+            ]
+        }];
     };
 
     const oneOfRule = config.module.rules.find((rule) => rule.oneOf !== undefined);
 
     if (oneOfRule) {
-        oneOfRule.oneOf.unshift(getRule());
+        oneOfRule.oneOf = oneOfRule.oneOf.concat(getRules());
     }
 
     return config;

packages/generator-emakinacee-react/generators/app/templates/static/src/components/App/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Home from '../Home/Home';
 import logo from './logo.svg';
-import './App.scss';
+import styles from './App.module.scss';
 
 /**
  * APP
@@ -10,9 +10,9 @@ import './App.scss';
  */
 const App = () => {
     return (
-        <div className="c-app">
-            <div className="c-app__header">
-                <img src={logo} className="c-app__logo" alt="logo" />
+        <div className={styles.app}>
+            <div className={styles.header}>
+                <img src={logo} className={styles.logo} alt="logo" />
                 <h2>Welcome to React</h2>
             </div>
 

packages/generator-emakinacee-react/generators/app/templates/static/src/components/App/App.module.scss

@@ -0,0 +1,28 @@
+@import "../../scss/base-imports";
+
+.app {
+    @include mq($from: tablet) {
+        text-align: center;
+    }
+}
+
+.logo {
+    animation: app-logo-spin infinite 20s linear;
+    height: rem(80);
+}
+
+.header {
+    background-color: map_get($color-greyscale, darkest);
+    height: rem(150);
+    padding: rem(20);
+    color: map_get($color-greyscale, white);
+}
+
+.intro {
+    font-size: large;
+}
+
+@keyframes app-logo-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}

packages/generator-emakinacee-react/generators/app/templates/static/src/components/Home/Home.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from '@cerebral/react';
 import { state } from 'cerebral/tags';
-import './Home.scss';
+import styles from './Home.scss';
 
 /**
  * HOME
@@ -10,9 +10,9 @@ import './Home.scss';
  */
 const Home = ({ title }) => {
     return (
-        <div className="c-home">
+        <div>
             <h1>{title}</h1>
-            <p className="c-home__intro">
+            <p className={styles.intro}>
                 To get started, edit <code>src/App.js</code> and save to reload.
             </p>
         </div>

packages/generator-emakinacee-react/generators/app/templates/static/src/components/Home/Home.module.scss

@@ -0,0 +1,3 @@
+.intro {
+    font-size: large;
+}

packages/generator-emakinacee-react/generators/component/templates/component-connected.txt

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from '@cerebral/react';
-import './<%= name %>.scss';
+import styles from './<%= name %>.scss';
 
 /**
  * <%= nameUpperCase %>
@@ -9,7 +9,7 @@ import './<%= name %>.scss';
  */
 const <%= name %> = () => {
     return (
-        <div className="c-<%= nameDash %>">
+        <div className={styles.<%= nameDash %>}>
             ...
         </div>
     );

packages/generator-emakinacee-react/generators/component/templates/component-scss.txt

@@ -1,3 +1,3 @@
-.c-<%= nameDash %> {
+<%= nameDash %> {
 
 }

packages/generator-emakinacee-react/generators/component/templates/component-stateful.txt

@@ -1,5 +1,5 @@
 import React from 'react';
-import './<%= name %>.scss';
+import styles from './<%= name %>.scss';
 
 /**
  * <%= nameUpperCase %>
@@ -15,7 +15,7 @@ class <%= name %> extends React.Component {
 
     render() {
         return (
-            <div className="c-<%= nameDash %>">
+            <div className={styles.<%= nameDash %>}>
                 ...
             </div>
         );

packages/generator-emakinacee-react/generators/component/templates/component.txt

@@ -1,5 +1,5 @@
 import React from 'react';
-import './<%= name %>.scss';
+import styles from './<%= name %>.scss';
 
 /**
  * <%= nameUpperCase %>
@@ -8,7 +8,7 @@ import './<%= name %>.scss';
  */
 const <%= name %> = () => {
     return (
-        <div className="c-<%= nameDash %>">
+        <div className={styles.<%= nameDash %>}>
             ...
         </div>
     );