Port css-modulesify example

markdalgleish · markdalgleish · commit c2313c9e095e · 2015-06-05T07:33:38.000+10:00
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules
+dist
diff --git a/README.md b/README.md
@@ -1,6 +1,13 @@
 # CSS Modules Browserify Demo
 
-Coming soon.
+A working demo of **CSS Modules**, using [css-modulesify](https://github.com/css-modules/css-modulesify).
+
+## Run the example
+
+```bash
+$ npm install
+$ npm start & open http://localhost:8080
+```
 
 ## License
 
diff --git a/package.json b/package.json
@@ -4,7 +4,13 @@
   "description": "A working demo of CSS Modules using browserify",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rm -rf dist && mkdir dist",
+    "browserify": "browserify -t css-modulesify -o dist/index.js src/index.js",
+    "copy": "cp src/index.html dist/index.html",
+    "build": "npm run clean && npm run copy && npm run browserify",
+    "start": "npm run build && http-server dist",
+    "publish": "npm run build && gh-pages -d dist -m \"Updates --skip-ci\""
   },
   "repository": {
     "type": "git",
@@ -15,5 +21,13 @@
   "bugs": {
     "url": "https://github.com/css-modules/browserify-demo/issues"
   },
-  "homepage": "https://github.com/css-modules/browserify-demo"
+  "homepage": "https://github.com/css-modules/browserify-demo",
+  "devDependencies": {
+    "browserify": "^10.2.3",
+    "css-modulesify": "^0.1.2",
+    "gh-pages": "^0.3.0",
+    "http-server": "^0.8.0",
+    "hyperscript": "^1.4.6",
+    "insert-css": "^0.2.0"
+  }
 }
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CSS Modules Browserify Demo</title>
+  </head>
+  <body>
+    <h1>CSS Modules Browserify Demo</h1>
+    <p>This demo is powered by <a href="https://github.com/css-modules/css-modulesify">css-modulesify</a>.</p>
+    <div id="content"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,24 @@
+var box1 = require('./style/box1.css');
+var box2 = require('./style/box2.css');
+
+var h = require('hyperscript');
+
+// dynamically add the css to the browser (this could be done at build-time instead)
+var insertCss = require('insert-css');
+insertCss(box1);
+insertCss(box2);
+
+// create the markup and apply locally-scoped css classnames
+var content = h('div', [
+  h('p', 'This is a demonstration of using generic classnames in css files like `.box` and `.text`, without any danger of name collisions between components'),
+
+  h('div', { className: box1.box }, [
+    h('p', { className: box1.text }, 'Box 1')
+  ]),
+
+  h('div', { className: box2.box }, [
+    h('p', { className: box2.text }, 'Box 2')
+  ])
+]);
+
+document.getElementById('content').appendChild(content);
diff --git a/src/style/borders.css b/src/style/borders.css
@@ -0,0 +1,3 @@
+.dottyBorder {
+  border: 1px dotted #000;
+}
diff --git a/src/style/box1.css b/src/style/box1.css
@@ -0,0 +1,8 @@
+.box {
+  extends: dottyBorder from "./borders.css";
+  padding: 10px;
+}
+
+.text {
+  font-style: italic;
+}
diff --git a/src/style/box2.css b/src/style/box2.css
@@ -0,0 +1,14 @@
+.box {
+  padding: 10px;
+  background: #555;
+  transition: all 1s;
+}
+
+.box:hover {
+  background: #933;
+}
+
+.text {
+  color: #fff;
+  font-weight: bold;
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.dottyBorder {`
	`2`	`+ border: 1px dotted #000;`
	`3`	`+}`