use css modules for docs

docs/components/Code.css

@@ -0,0 +1,17 @@
+.code {
+  position: absolute;
+  top: 120px;
+  right: 20px;
+  bottom: 20px;
+  width: 425px;
+
+  background: rgba(0, 0, 0, .7);
+  color: #fff;
+  border-radius: 4px;
+  padding: 24px;
+  font-family: Roboto, monospace;
+  white-space: pre;
+
+  font-size: 14px;
+  line-height: 22px;
+}

docs/components/Code.js

@@ -1,13 +1,13 @@
 import preact, { Component } from 'preact';
 import microlight from 'microlight';
-window.microlight = microlight;
+import styles from './Code.css';
 
 class Code extends Component {
   componentDidMount() {
     microlight.reset('code');
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate() {
     const { children } = this.props;
     this.container.innerHTML = children.join('\n\n');
     microlight.reset('code');
@@ -21,7 +21,7 @@ class Code extends Component {
     const { children } = this.props;
 
     return (
-      <div ref={this.defineContainer} className="code">
+      <div ref={this.defineContainer} className={styles.code}>
         {children}
       </div>
     );

docs/components/Layout.css

@@ -0,0 +1,60 @@
+.header {
+  position: relative;
+  width: 100%;
+  height: 100px;
+  padding: 0 0 0 20px;
+}
+
+.header h1 {
+  font-family: 'Roboto', sans-serif;
+  font-size: 32px;
+  font-weight: 300;
+  line-height: 64px;
+  margin: 0;
+  padding: 0;
+}
+
+.header ul {
+  list-style: none;
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  line-height: 32px
+}
+
+.header ul li {
+  float: left;
+  display: block;
+  cursor: pointer;
+}
+
+.header ul li:hover {
+  border-bottom: 4px solid #00bcd4;
+}
+
+.header ul :global(li.active) {
+  border-bottom: 4px solid #2196f3;
+}
+
+.header ul li a {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0 24px;
+}
+
+.content {
+  position: absolute;
+  top: 100px;
+  bottom: 0;
+  left: 20px;
+  right: 465px;
+}
+
+.fullWidth {
+  left: 0;
+  right: 0;
+}

docs/components/Layout.js

@@ -1,5 +1,6 @@
 import preact, { Component } from 'preact';
 import Code from './Code';
+import styles from './Layout.css';
 
 class Layout extends Component {
   constructor(props) {
@@ -29,21 +30,25 @@ class Layout extends Component {
     const { hash } = this.state;
     const page = pages.find(p => p.slug === (hash || 'search'));
 
+    const contentClassName = hash === 'search'
+      ? styles.content
+      : [styles.content, styles.fullWidth].join(' ');
+
     return (
       <div>
-        <div className="header">
+        <div className={styles.header}>
           <h1>{`GeoSearch / ${page.title}`}</h1>
 
           <ul>
             {pages.map((p, idx) => (
-              <li key={idx} className={p.slug === hash ? 'active' : ''}>
+              <li key={idx} className={p.slug === hash && 'active'}>
                 <a href={`#${p.slug}`}>{p.title}</a>
               </li>
             ))}
           </ul>
         </div>
 
-        <div className={`content ${hash}`}>
+        <div className={contentClassName}>
           {page && page.view()}
         </div>
 

docs/components/Map.css

@@ -0,0 +1,6 @@
+.map {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+}

docs/components/Map.js

@@ -1,6 +1,7 @@
 import preact, { Component } from 'preact';
 import merge from 'lodash.merge';
 import L from 'leaflet';
+import styles from './Map.css';
 
 import {
   GeoSearchControl,
@@ -8,7 +9,6 @@ import {
   Provider as BaseProvider,
 } from '../../src';
 
-
 // eslint-disable-next-line no-confusing-arrow
 const ensureInstance = Provider => Provider instanceof BaseProvider ? Provider : new Provider();
 
@@ -49,10 +49,8 @@ class Map extends Component {
   };
 
   render() {
-    const { style } = this.props;
-
     return (
-      <div className="leaflet-map" style={style} ref={this.bindContainer} />
+      <div className={styles.map} ref={this.bindContainer} />
     );
   }
 }

docs/components/Search.css

@@ -0,0 +1,27 @@
+.search form {
+  position: relative;
+  margin: 32px 0;
+  background-color: #fff;
+  vertical-align: top;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
+  transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+.search form:hover,
+.search:global(.active) form {
+  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
+}
+
+.search input {
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  outline: none;
+  font: 16px arial, sans-serif;
+  line-height: 48px;
+  height: 48px;
+  text-indent: 18px;
+}
+

docs/components/Search.js

@@ -2,6 +2,7 @@ import preact, { Component } from 'preact';
 import debounce from 'lodash.debounce';
 import * as providers from '../../src/providers';
 import SearchResults from './SearchResults';
+import styles from './Search.css';
 
 const specialKeys = ['ArrowDown', 'ArrowUp', 'Escape'];
 
@@ -65,6 +66,14 @@ class Search extends Component {
     });
   };
 
+  onFocus = () => {
+    this.setState({ isActive: true });
+  };
+
+  onBlur = () => {
+    this.setState({ isActive: false });
+  };
+
   autoSearch = debounce((event) => {
     this.onSubmit(event);
   }, 250);
@@ -78,14 +87,21 @@ class Search extends Component {
   }
 
   render() {
-    const { results, selected, query } = this.state;
+    const { results, selected, query, isActive } = this.state;
+
+    const className = [
+      styles.search,
+      (isActive ? 'active' : ''),
+    ].join(' ').trim();
 
     return (
-      <div className="search">
+      <div className={className}>
         <form onSubmit={this.onSubmit}>
           <input
             onKeyUp={this.onKeyUp}
             onKeyDown={this.onKeyDown}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
             type="text"
             placeholder="search"
             value={query}

docs/components/SearchResults.css

@@ -0,0 +1,15 @@
+.item > * {
+  border: 1px solid transparent;
+  line-height: 32px;
+  padding: 0 18px;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item > *:hover,
+.item > :global(.active) {
+  background-color: #f8f8f8;
+  border-color: #c6c6c6;
+}

docs/components/SearchResults.js

@@ -1,9 +1,10 @@
 import preact from 'preact';
+import styles from './SearchResults.css';
 
 const SearchResults = ({ results = [], selected }) => (
-  <div className="results">
+  <div className={styles.item}>
     {results.map((result, idx) => (
-      <div className={idx === selected ? 'active' : ''}>{result.label}</div>
+      <div className={idx === selected && 'active'}>{result.label}</div>
     ))}
   </div>
 );

docs/index.html

@@ -4,10 +4,10 @@
 		<title>Leaflet.GeoSearch / Google Provider</title>
 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
-		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
-		<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
+		<link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.7/dist/leaflet.css" />
+		<script src="https://unpkg.com/leaflet@0.7.7/dist/leaflet.js"></script>
 
-		<link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="/assets/css/leaflet.css" />
   </head>
 <body>

docs/style.css

@@ -10,147 +10,3 @@ html, body {
 *, *:before, *:after {
   box-sizing: inherit;
 }
-
-#app, #app > .container {
-  height: 100%;
-  position: relative;
-}
-
-#app .header,
-.content.search {
-  width: 80%;
-  margin: 0 auto;
-  position: relative;
-}
-
-.content.search {
-  width: calc(80% - 325px);
-  margin: 0 0 0 10%;
-}
-
-#app .header {
-  height: 100px;
-}
-
-h1 {
-  font-family: 'Roboto', sans-serif;
-  font-size: 32px;
-  font-weight: 300;
-  line-height: 64px;
-  margin: 0;
-  padding: 0;
-}
-
-ul {
-  list-style: none;
-  display: block;
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
-  line-height: 32px
-}
-
-ul li {
-  float: left;
-  display: block;
-  cursor: pointer;
-}
-
-ul li a {
-  text-decoration: none;
-  color: inherit;
-  display: block;
-  width: 100%;
-  height: 100%;
-  padding: 0 24px;
-}
-
-ul li.active {
-  border-bottom: 4px solid #2196f3;
-}
-
-ul li:hover {
-  border-bottom: 4px solid #00bcd4;
-}
-
-.content {
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: calc(100% - 100px);
-}
-
-
-.results > * {
-  border: 1px solid transparent;
-  line-height: 32px;
-  padding: 0 32px;
-}
-
-.results > *:hover,
-.results > .active {
-  background-color: #f8f8f8;
-  border-color: #c6c6c6;
-}
-
-form {
-  position: relative;
-  margin: 32px 0;
-  background-color: #fff;
-  vertical-align: top;
-  border-radius: 2px;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
-  transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
-}
-
-form.active, form:hover {
-  box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
-}
-
-input {
-  border: none;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  outline: none;
-  font: 16px arial, sans-serif;
-  line-height: 48px;
-  height: 48px;
-  text-indent: 18px;
-}
-
-form button {
-  outline: none;
-  display: block;
-  position: absolute;
-  right: 0;
-  height: 100%;
-  width: 100px;
-  background-color: #f8f8f8;
-  border: 1px solid #c6c6c6;
-}
-
-.leaflet-map {
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.code {
-  position: absolute;
-  top: 120px;
-  right: 20px;
-  bottom: 20px;
-  width: 425px;
-
-  background: rgba(0, 0, 0, .7);
-  color: #fff;
-  border-radius: 4px;
-  padding: 24px;
-  font-family: Roboto, monospace;
-  white-space: pre;
-
-  font-size: 14px;
-  line-height: 22px;
-}

package.json

@@ -63,6 +63,7 @@
     "babel-preset-power-assert": "^1.0.0",
     "browser-env": "^2.0.16",
     "cross-env": "^3.1.3",
+    "css-loader": "^0.26.1",
     "dotenv": "^2.0.0",
     "eslint": "^3.12.2",
     "eslint-config-airbnb": "^13.0.0",
@@ -70,6 +71,7 @@
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.8.0",
     "eslint-watch": "^2.1.14",
+    "extract-text-webpack-plugin": "^1.0.1",
     "fast-async": "^6.1.2",
     "leaflet": "^1.0.2",
     "lodash.merge": "^4.6.0",
@@ -80,6 +82,7 @@
     "preact": "^7.1.0",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.5.4",
+    "style-loader": "^0.13.1",
     "testdouble": "^1.10.0",
     "webpack": "^1.14.0",
     "webpack-dev-server": "^1.16.2"

webpack.config.babel.js

@@ -1,5 +1,6 @@
 import webpack from 'webpack';
 import path from 'path';
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
 
 const { NODE_ENV } = process.env;
 const production = NODE_ENV === 'production';
@@ -9,6 +10,7 @@ const plugins = [
   new webpack.DefinePlugin({
     'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
   }),
+  new ExtractTextPlugin('style.css', { allChunks: true }),
 ];
 
 if (production) {
@@ -50,7 +52,14 @@ export default {
   module: {
     loaders: [
       {
-        test: /\.html|\.css$/,
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract(
+          'style-loader',
+          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+        ),
+      },
+      {
+        test: /\.html$/,
         loader: 'raw-loader',
       },
       {