feat(maleo-plugin): improve maleo plugin

maleo plugin now able to have options for utilizing isomorphic style loader, extracting css files,
and enable or disable css modules

re airyrooms#152

refactor(maleo-plugins): add minimizer and clean up css plugins

feat(maleo-plugins): add chalk for error logging

docs(example): add example for multiple routes css

docs(maleo-plugins): add docs for css plugin

fix(maleo-plugins): add contenthash to chunkfilename as well

example/maleo-css-plugin/maleo.config.js

@@ -0,0 +1,13 @@
+const cssPlugin = require('@airy/maleo-css-plugin')
+
+module.exports = cssPlugin({
+  cssPluginOptions: {
+    extractCss: {
+      singleCssFile: true,
+    },
+    cssLoader: {
+      modules: true,
+      localIdentName: '[path][name]__[local]--[hash:base64:5]'
+    }
+  }
+})

example/maleo-css-plugin/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "example-maleo-css-plugin",
+  "version": "1.0.0",
+  "description": "example for maleo using css plugin",
+  "main": "index.js",
+  "repository": "https://github.com/airyrooms/maleo.js",
+  "author": "alvinkl",
+  "license": "MIT",
+  "scripts": {
+    "dev": "maleo dev",
+    "build": "export NODE_ENV=production && maleo build",
+    "start": "export NODE_ENV=production && node .maleo/server.js"
+  },
+  "dependencies": {
+    "@airy/maleo": "latest",
+    "@airy/maleo-css-plugin": "latest",
+    "classnames": "^2.2.6",
+    "react": "^16.8.5"
+  }
+}

example/maleo-css-plugin/routes.json

@@ -0,0 +1,22 @@
+[
+  {
+    "page": "./src/WrapComponent",
+    "routes": [
+      {
+        "path": "/",
+        "page": "./src/RootComponent",
+        "exact": true
+      },
+      {
+        "path": "/A",
+        "page": "./src/ComponentA",
+        "exact": true
+      },
+      {
+        "path": "/B",
+        "page": "./src/ComponentB",
+        "exact": true
+      }
+    ]
+  }
+]

example/maleo-css-plugin/src/ComponentA.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import style from './a-style.css'
+
+export default class extends React.Component {
+  render() {
+    return (
+      <div className={style.wrapper}>
+        <h5>ComponentA</h5>
+        <h5>ComponentA</h5>
+        <h5>ComponentA</h5>
+        <h5>ComponentA</h5>
+      </div>
+    )
+  }
+}

example/maleo-css-plugin/src/ComponentB.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import style from './b-style.css'
+
+export default class extends React.Component {
+  render() {
+    return (
+      <div className={style.wrapper}>
+        <h5>ComponentB</h5>
+        <h5>ComponentB</h5>
+        <h5>ComponentB</h5>
+        <h5>ComponentB</h5>
+      </div>
+    )
+  }
+}

example/maleo-css-plugin/src/RootComponent.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import cn from 'classnames'
+
+import style from './root-style.css'
+
+const getColor = () =>  ['teal', 'green', 'lime'][(Math.floor(Math.random() * 10 % 3))]
+
+export default class extends React.Component {
+  render() {
+    return (
+      <div className={style.wrapper}>
+        <h1 className={cn(style.h1, style[getColor()])}>Hello World</h1>
+        <h1 className={cn(style.h1, style[getColor()])}>Hello World</h1>
+        <h1 className={cn(style.h1, style[getColor()])}>Hello World</h1>
+        <h1 className={cn(style.h1, style[getColor()])}>Hello World</h1>
+        <h1 className={cn(style.h1, style[getColor()])}>Hello World</h1>
+      </div>
+    )
+  }
+}

example/maleo-css-plugin/src/WrapComponent.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export default class extends React.Component {
+  render() {
+    return (
+      <div>
+        <div>
+          <Link to="/">Root</Link><br/>
+          <Link to="/A">A</Link><br />
+          <Link to="/B">B</Link><br />
+        </div>
+        {this.props.children}
+      </div>
+    )
+  }
+}

example/maleo-css-plugin/src/a-style.css

@@ -0,0 +1,9 @@
+.wrapper {
+  width: 100%;
+  height: 100%;
+  background-color: greenyellow;
+}
+
+.wrapper > h5 {
+  color: white;
+}

example/maleo-css-plugin/src/b-style.css

@@ -0,0 +1,5 @@
+.wrapper {
+  height: 100%;
+  width: 100%;
+  background-color: blueviolet;
+}

example/maleo-css-plugin/src/root-style.css

@@ -0,0 +1,23 @@
+.h1 {
+  padding: 25% 100px;
+  display: inline-block;
+  margin: 0;
+}
+
+.teal {
+  background-color: teal;
+}
+
+.green {
+  background-color: greenyellow
+}
+
+.lime {
+  background-color: lime
+}
+
+.wrapper {
+  width: 100%;
+  height: 100%;
+  background-color: #666666;
+}

example/playground/_wrap.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Wrap from '@airy/maleo/wrap';
-import pageWithStyles from '@airy/maleo-css-plugin/lib/pageWithStyles';
+import pageWithStyles from '@airy/maleo-css-plugin/pageWithStyles';
 import { withRedux } from '@airy/maleo-redux-plugin';
 
 import { makeStoreClient } from './store';

example/playground/maleo.config.js

@@ -3,6 +3,8 @@ const cssPlugin = require('@airy/maleo-css-plugin');
 
 module.exports = tsPlugin(
   cssPlugin({
-    env: 'production',
+    cssPluginOptions: {
+      enableISL: true
+    }
   }),
 );