From 843b88a311b82497f0530f8498eb25ab6ba6b3ad Mon Sep 17 00:00:00 2001
From: the1900 <the1900.me@gmail.com>
Date: Thu, 3 Aug 2017 01:13:48 +0900
Subject: [PATCH] solve #1444 and #1359. (#1587)

* update webpack config to make "Basic usage" work.

I use webpack version 2.6 and new configure syntax rather than 1.x.

When I follow the instruction on `readme.md`. It always failed on *Basic Usage* with the message below.
``` bash
ERROR in ./~/css-loader?{"modules":false,"importLoaders":1,"localIdentName":"[name]--[local]--[hash:base64:8]"}!./~/postcss-loader/lib!./~/react-toolbox/lib/button/theme.css
  Module build failed: Error: composition is only allowed when selector is single :local class name not in ".raised", ".raised" is weird
```

So I figured out what's wrong and update `reame.md` to notify others.

* edit multiple number.

According to docs, the width is larger than 320px and if the device is mobile than 280px. To follow this specification It should be 5, not 4.
---
 README.md                    | 20 ++++++++++++++++++++
 components/drawer/config.css |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f58fb425..6287e2da 100644
--- a/README.md
+++ b/README.md
@@ -58,6 +58,26 @@ Declare plugins to be used by postcss (as part of webpack's config object):
   },
 ```
 
+Configure webpack 2.x or 3.x loader for .css files to use postcss:
+```js
+      {
+        test: /\.css$/,
+        use: [
+          "style-loader",
+          {
+            loader: "css-loader",
+            options: {
+              modules: true, // default is false
+              sourceMap: true,
+              importLoaders: 1,
+              localIdentName: "[name]--[local]--[hash:base64:8]"
+            }
+          },
+          "postcss-loader"
+        ]
+      }
+```
+
 ## Basic usage
 
 In this minimal example, we import a `Button` with styles already bundled:
diff --git a/components/drawer/config.css b/components/drawer/config.css
index afbdcfbf..dd12d7a3 100644
--- a/components/drawer/config.css
+++ b/components/drawer/config.css
@@ -3,6 +3,6 @@
   --drawer-border-color: var(--palette-grey-300);
   --drawer-text-color: var(--palette-grey-800);
   --drawer-width: calc(24 * var(--unit));
-  --drawer-desktop-width: calc(4 * var(--standard-increment-desktop));
+  --drawer-desktop-width: calc(5 * var(--standard-increment-desktop));
   --drawer-mobile-width: calc(5 * var(--standard-increment-mobile));
 }