using react components copied from webpack-demo

Author: joshwnj

README.md

@@ -4,6 +4,8 @@
 
 A working demo of [CSS Modules](https://github.com/css-modules/css-modules), using [css-modulesify](https://github.com/css-modules/css-modulesify).
 
+Brazenly plagiarized from <https://github.com/css-modules/webpack-demo>
+
 **Please note that this is still highly experimental.**
 
 ## Run the example
@@ -13,6 +15,10 @@ $ npm install
 $ npm start
 ```
 
+## Acknowledgements
+
+Special thanks to [@markdalgleish](https://github.com/markdalgleish) for <https://github.com/css-modules/webpack-demo>
+
 ## License
 
 MIT

package.json

@@ -6,11 +6,11 @@
   "scripts": {
     "test": "npm run build",
     "clean": "rm -rf dist && mkdir dist",
-    "browserify": "browserify -p [css-modulesify -o dist/main.css] -o dist/index.js src/index.js",
-    "watchify": "watchify -v -p [css-modulesify -o dist/main.css] -o dist/index.js src/index.js",
-    "copy": "cp src/index.html dist/index.html",
+    "browserify": "browserify -t babelify -t brfs -p [css-modulesify -o dist/main.css] -o dist/index.js src/index.js",
+    "watchify": "watchify -v -t babelify -t brfs -p [css-modulesify -o dist/main.css] -o dist/index.js src/index.js",
+    "copy": "cp src/index.html dist/index.html && cp src/components/0-Logo/logo.svg dist/logo.svg",
     "build": "npm run clean && npm run copy && npm run browserify",
-    "budo": "budo src/index.js:index.js --dir=dist -- -p [css-modulesify -o dist/main.css] | opnr | garnish",
+    "budo": "budo src/index.js:index.js --dir=dist -- -t babelify -t brfs -p [css-modulesify -o dist/main.css] | opnr | garnish",
     "start": "npm run clean && npm run copy && npm run budo",
     "deploy": "npm run build && gh-pages -d dist -m \"Updates --skip-ci\""
   },
@@ -25,13 +25,16 @@
   },
   "homepage": "https://github.com/css-modules/browserify-demo",
   "devDependencies": {
+    "babelify": "^6.1.2",
+    "brfs": "^1.4.0",
     "browserify": "^10.2.3",
     "budo": "^4.0.0",
     "css-modulesify": "^0.2.4",
     "garnish": "^2.1.3",
     "gh-pages": "git://github.com/markdalgleish/gh-pages#cli-message",
     "hyperscript": "^1.4.6",
     "opnr": "^1.0.4",
+    "react": "^0.13.3",
     "watchify": "^3.2.2"
   }
 }

src/components/0-Logo/Logo.css

@@ -0,0 +1,6 @@
+.logo {
+  /* todo: fix rewriteUrl error and use url(./logo.svg) */
+  background-size: 200px 200px;
+  width: 200px;
+  height: 200px;
+}

src/components/0-Logo/Logo.js

@@ -0,0 +1,12 @@
+import styles from './Logo.css';
+
+import React, { Component } from 'react';
+
+export default class Logo extends Component {
+
+  // todo: fix rewriteUrl error and use url(./logo.svg) in Logo.css
+  render() {
+    return <div className={styles.logo} style={{'background-image': 'url("./logo.svg")'}} />;
+  }
+
+};

src/components/0-Logo/logo.svg

@@ -1,7 +1,15 @@
-var styles = require('./ScopedSelectors.css');
+import styles from './ScopedSelectors.css';
 
-var h = require('hyperscript');
+import React, { Component } from 'react';
 
-module.exports = h('div', { className: styles.root },
-  h('p', { className: styles.text }, 'Scoped Selectors')
-);
+export default class ScopedSelectors extends Component {
+
+  render() {
+    return (
+      <div className={ styles.root }>
+        <p className={ styles.text }>Scoped Selectors</p>
+      </div>
+    );
+  }
+
+};

src/components/1-ScopedSelectors/ScopedSelectors.js

@@ -0,0 +1,26 @@
+import ScopedSelectors from './ScopedSelectors';
+
+import React, { Component } from 'react';
+
+import Snippet from '../shared/Snippet/Snippet';
+
+const fs = require('fs');
+const js = fs.readFileSync(__dirname + '/ScopedSelectors.js', 'utf8');
+const css = fs.readFileSync(__dirname + '/ScopedSelectors.css', 'utf8');
+
+export default class ScopedSelectorsDemo extends Component {
+
+  render() {
+    const files = [
+      { name: 'ScopedSelectors.js', source: js },
+      { name: 'ScopedSelectors.css', source: css }
+    ];
+
+    return (
+      <Snippet files={files}>
+        <ScopedSelectors />
+      </Snippet>
+    );
+  }
+
+};

src/components/1-ScopedSelectors/ScopedSelectorsDemo.js

@@ -1,7 +1,15 @@
-var styles = require('./GlobalSelectors.css');
+import styles from './GlobalSelectors.css';
 
-var h = require('hyperscript');
+import React, { Component } from 'react';
 
-module.exports = h('div', { className: styles.root },
-  h('p', 'Global Selectors')
-);
+export default class GlobalSelectors extends Component {
+
+  render() {
+    return (
+      <div className={ styles.root }>
+        <p>Global Selectors</p>
+      </div>
+    );
+  }
+
+};

src/components/2-GlobalSelectors/GlobalSelectors.js

@@ -0,0 +1,26 @@
+import GlobalSelectors from './GlobalSelectors';
+
+import React, { Component } from 'react';
+
+import Snippet from '../shared/Snippet/Snippet';
+
+const fs = require('fs');
+const js = fs.readFileSync(__dirname + '/GlobalSelectors.js', 'utf8');
+const css = fs.readFileSync(__dirname + '/GlobalSelectors.css', 'utf8');
+
+export default class GlobalSelectorsDemo extends Component {
+
+  render() {
+    const files = [
+      { name: 'GlobalSelectors.js', source: js },
+      { name: 'GlobalSelectors.css', source: css }
+    ];
+
+    return (
+      <Snippet files={files}>
+        <GlobalSelectors />
+      </Snippet>
+    );
+  }
+
+};

src/components/2-GlobalSelectors/GlobalSelectorsDemo.js

@@ -1,10 +1,18 @@
-var h = require('hyperscript');
+import React, { Component } from 'react';
 
-var StyleVariantA = require('./StyleVariantA/StyleVariantA');
-var StyleVariantB = require('./StyleVariantB/StyleVariantB');
+import StyleVariantA from './StyleVariantA/StyleVariantA';
+import StyleVariantB from './StyleVariantB/StyleVariantB';
 
-module.exports = h('div', [
-  StyleVariantA,
-  h('br'),
-  StyleVariantB
-]);
+export default class ClassComposition extends Component {
+
+  render() {
+    return (
+      <div>
+        <StyleVariantA />
+        <br />
+        <StyleVariantB />
+      </div>
+    );
+  }
+
+};

src/components/3-ClassComposition/ClassComposition.js

@@ -0,0 +1,30 @@
+import ClassComposition from './ClassComposition';
+
+import React, { Component } from 'react';
+
+import Snippet from '../shared/Snippet/Snippet';
+
+const fs = require('fs');
+const js = fs.readFileSync(__dirname + '/StyleVariantA/StyleVariantA.js', 'utf8');
+const css = fs.readFileSync(__dirname + '/StyleVariantA/StyleVariantA.css', 'utf8');
+const layoutCss = fs.readFileSync(__dirname + '/../shared/styles/layout.css', 'utf8');
+const typographyCss = fs.readFileSync(__dirname + '/../shared/styles/typography.css', 'utf8');
+
+export default class ClassCompositionDemo extends Component {
+
+  render() {
+    const files = [
+      { name: 'StyleVariantA.js', source: js },
+      { name: 'StyleVariantA.css', source: css },
+      { name: 'shared/styles/layout.css', source: layoutCss },
+      { name: 'shared/styles/typography.css', source: typographyCss }
+    ];
+
+    return (
+      <Snippet files={files}>
+        <ClassComposition />
+      </Snippet>
+    );
+  }
+
+};

src/components/3-ClassComposition/ClassCompositionDemo.js

@@ -1,9 +1,9 @@
 .root {
-  composes: box from "../../../shared/styles/layout.css";
+  composes: box from "../../shared/styles/layout.css";
   border-color: red;
 }
 
 .text {
-  composes: heading from "../../../shared/styles/typography.css";
+  composes: heading from "../../shared/styles/typography.css";
   color: red;
 }

src/components/3-ClassComposition/StyleVariantA/StyleVariantA.css

@@ -1,7 +1,15 @@
-var styles = require('./StyleVariantA.css');
+import styles from './StyleVariantA.css';
 
-var h = require('hyperscript');
+import React, { Component } from 'react';
 
-module.exports = h('div', { className: styles.root },
-  h('p', { className: styles.text }, 'Style Variant A')
-);
+export default class StyleVariantA extends Component {
+
+  render() {
+    return (
+      <div className={styles.root}>
+        <p className={styles.text}>Style Variant A</p>
+      </div>
+    );
+  }
+
+};

src/components/3-ClassComposition/StyleVariantA/StyleVariantA.js

@@ -1,9 +1,9 @@
 .root {
-  composes: box from "../../../shared/styles/layout.css";
+  composes: box from "../../shared/styles/layout.css";
   border-color: blue;
 }
 
 .text {
-  composes: heading from "../../../shared/styles/typography.css";
+  composes: heading from "../../shared/styles/typography.css";
   color: blue;
 }

src/components/3-ClassComposition/StyleVariantB/StyleVariantB.css

@@ -1,7 +1,15 @@
-var styles = require('./StyleVariantB.css');
+import styles from './StyleVariantB.css';
 
-var h = require('hyperscript');
+import React, { Component } from 'react';
 
-module.exports = h('div', { className: styles.root },
-  h('p', { className: styles.text }, 'Style Variant B')
-);
+export default class StyleVariantB extends Component {
+
+  render() {
+    return (
+      <div className={styles.root}>
+        <p className={styles.text}>Style Variant B</p>
+      </div>
+    );
+  }
+
+};

src/components/3-ClassComposition/StyleVariantB/StyleVariantB.js

@@ -1,11 +1,11 @@
 .root {
-  composes: box from "../../shared/styles/layout.css";
+  composes: box from "../shared/styles/layout.css";
   border-style: dotted;
   border-color: green;
 }
 
 .text {
-  composes: heading from "../../shared/styles/typography.css";
+  composes: heading from "../shared/styles/typography.css";
   font-weight: 200;
   color: green;
 }

src/components/4-CompositionOverrides/CompositionOverrides.css

@@ -1,7 +1,15 @@
-var styles = require('./CompositionOverrides.css');
+import styles from './CompositionOverrides.css';
 
-var h = require('hyperscript');
+import React, { Component } from 'react';
 
-module.exports = h('div', { className: styles.root },
-  h('p', { className: styles.text }, 'Class Composition with Overrides')
-);
+export default class CompositionOverrides extends Component {
+
+  render() {
+    return (
+      <div className={styles.root}>
+        <p className={styles.text}>Class Composition with Overrides</p>
+      </div>
+    );
+  }
+
+};

src/components/4-CompositionOverrides/CompositionOverrides.js

@@ -0,0 +1,30 @@
+import CompositionOverrides from './CompositionOverrides';
+
+import React, { Component } from 'react';
+
+import Snippet from '../shared/Snippet/Snippet';
+
+const fs = require('fs');
+const js = fs.readFileSync(__dirname + '/CompositionOverrides.js', 'utf8');
+const css = fs.readFileSync(__dirname + '/CompositionOverrides.css', 'utf8');
+const layoutCss = fs.readFileSync(__dirname + '/../shared/styles/layout.css', 'utf8');
+const typographyCss = fs.readFileSync(__dirname + '/../shared/styles/typography.css', 'utf8');
+
+export default class CompositionOverridesDemo extends Component {
+
+  render() {
+    const files = [
+      { name: 'CompositionOverrides.js', source: js },
+      { name: 'CompositionOverrides.css', source: css },
+      { name: 'shared/styles/layout.css', source: layoutCss },
+      { name: 'shared/styles/typography.css', source: typographyCss }
+    ];
+
+    return (
+      <Snippet files={files}>
+        <CompositionOverrides />
+      </Snippet>
+    );
+  }
+
+};

src/components/4-CompositionOverrides/CompositionOverridesDemo.js

@@ -3,7 +3,7 @@
 }
 
 .ball {
-  composes: bounce from "../../shared/styles/animations.css";
+  composes: bounce from "../shared/styles/animations.css";
   width: 40px;
   height: 40px;
   border-radius: 20px;