Initial import with working poc for loading images

lucified · Jan 14, 2016 · 260d7b6 · 260d7b6
commit 260d7b6
Show file tree

Hide file tree

Showing 42 changed files with 754 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,12 @@
+# OS directory cache files
+Thumbs.db
+.DS_Store
+
+# npm
+/node_modules/*
+!/node_modules/testi-projekti
+
+npm-debug.log
+
+# Built sources
+dist
diff --git a/README.md b/README.md
@@ -0,0 +1,15 @@
+
+## Webpack asset bundling proof-of-concept test
+
+Based on <https://github.com/patrikholcak/webpack-demo>, which in turn is based on <https://github.com/css-modules/webpack-demo>
+
+## Run the example
+
+```bash
+$ npm install
+$ npm start & open http://localhost:8080
+```
+
+## License
+
+[MIT]
diff --git a/hot-reload.js b/hot-reload.js
@@ -0,0 +1,18 @@
+var webpack = require('webpack'),
+    WebpackDevServer = require('webpack-dev-server'),
+    config = require('./webpack.config'),
+    host = 'localhost',
+    port = 8080;
+
+
+var server = new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true
+});
+
+server.listen(port, host, function (err, result) {
+  if (err) console.err(err)
+
+  console.log("Listening at %s:%s", host, port)
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <title>CSS Modules Webpack Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  </head>
+  <body>
+    <div id="outlet"></div>
+    <script src="/index.js"></script>
+  </body>
+</html>
diff --git a/node_modules/testi-projekti/.gitignore b/node_modules/testi-projekti/.gitignore
diff --git a/node_modules/testi-projekti/giraffe.jpg b/node_modules/testi-projekti/giraffe.jpg
diff --git a/node_modules/testi-projekti/index.js b/node_modules/testi-projekti/index.js
diff --git a/node_modules/testi-projekti/package.json b/node_modules/testi-projekti/package.json
diff --git a/node_modules/testi-projekti/webpack.config.js b/node_modules/testi-projekti/webpack.config.js
diff --git a/package.json b/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "webpack-demo",
+  "description": "Working demo of CSS Modules, using Webpack's css-loader in module mode.",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "main": "index.js",
+  "homepage": "https://github.com/css-modules/webpack-demo",
+  "author": "Mark Dalgleish",
+  "contributors": [
+    "Patrik Holcak <[email protected]> (http://holcak.com)"
+  ],
+  "bugs": {
+    "url": "https://github.com/css-modules/webpack-demo/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/css-modules/webpack-demo"
+  },
+  "devDependencies": {
+    "babel-core": "^5.8.25",
+    "babel-loader": "^5.3.2",
+    "css-loader": "^0.19.0",
+    "file-loader": "^0.8.4",
+    "postcss-loader": "^0.6.0",
+    "raw-loader": "^0.5.1",
+    "react-hot-loader": "^1.3.0",
+    "style-loader": "^0.12.4",
+    "url-loader": "^0.5.6",
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.12.0"
+  },
+  "scripts": {
+    "start": "node hot-reload.js",
+    "deploy": "npm run build && gh-pages -d dist -m \"Updates --skip-ci\""
+  },
+  "dependencies": {
+    "react": "^0.13.3"
+  }
+}
diff --git a/src/components/0-Logo/Logo.css b/src/components/0-Logo/Logo.css
@@ -0,0 +1,6 @@
+.logo {
+  background: url('./logo.svg');
+  background-size: 200px 200px;
+  width: 200px;
+  height: 200px;
+}
diff --git a/src/components/0-Logo/Logo.js b/src/components/0-Logo/Logo.js
@@ -0,0 +1,9 @@
+import React, {Component} from 'react';
+import styles from './Logo.css';
+
+
+export default class Logo extends Component {
+  render() {
+    return <div className={styles.logo} />;
+  }
+};
diff --git a/src/components/0-Logo/logo.svg b/src/components/0-Logo/logo.svg
diff --git a/src/components/1-ScopedSelectors/ScopedSelectors.css b/src/components/1-ScopedSelectors/ScopedSelectors.css
@@ -0,0 +1,15 @@
+.root {
+  border-width: 2px;
+  border-style: solid;
+  border-color: #777;
+  padding: 0 20px;
+  margin: 0 6px;
+  max-width: 400px;
+}
+
+.text {
+  color: #777;
+  font-size: 24px;
+  font-family: helvetica, arial, sans-serif;
+  font-weight: 600;
+}
diff --git a/src/components/1-ScopedSelectors/ScopedSelectors.js b/src/components/1-ScopedSelectors/ScopedSelectors.js
@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+import styles from './ScopedSelectors.css';
+
+
+export default class ScopedSelectors extends Component {
+  render() {
+    return (
+      <div className={ styles.root }>
+        <p className={ styles.text }>Scoped Selectors</p>
+      </div>
+    );
+  }
+};
diff --git a/src/components/1-ScopedSelectors/ScopedSelectorsDemo.js b/src/components/1-ScopedSelectors/ScopedSelectorsDemo.js
@@ -0,0 +1,24 @@
+import ScopedSelectors from './ScopedSelectors';
+
+import React, { Component } from 'react';
+
+import js from '!!raw!./ScopedSelectors.js';
+import css from '!!raw!./ScopedSelectors.css';
+import Snippet from 'shared/Snippet/Snippet';
+
+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>
+    );
+  }
+
+};
diff --git a/src/components/2-GlobalSelectors/GlobalSelectors.css b/src/components/2-GlobalSelectors/GlobalSelectors.css
@@ -0,0 +1,15 @@
+.root {
+  border-width: 2px;
+  border-style: solid;
+  border-color: brown;
+  padding: 0 20px;
+  margin: 0 6px;
+  max-width: 400px;
+}
+
+.root :global .text {
+  color: brown;
+  font-size: 24px;
+  font-family: helvetica, arial, sans-serif;
+  font-weight: 600;
+}
diff --git a/src/components/2-GlobalSelectors/GlobalSelectors.js b/src/components/2-GlobalSelectors/GlobalSelectors.js
@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+import styles from './GlobalSelectors.css';
+
+
+export default class GlobalSelectors extends Component {
+  render() {
+    return (
+      <div className={ styles.root }>
+        <p className="text">Global Selectors</p>
+      </div>
+    );
+  }
+};
diff --git a/src/components/2-GlobalSelectors/GlobalSelectorsDemo.js b/src/components/2-GlobalSelectors/GlobalSelectorsDemo.js
@@ -0,0 +1,24 @@
+import GlobalSelectors from './GlobalSelectors';
+
+import React, { Component } from 'react';
+
+import js from '!!raw!./GlobalSelectors.js';
+import css from '!!raw!./GlobalSelectors.css';
+import Snippet from 'shared/Snippet/Snippet';
+
+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>
+    );
+  }
+
+};
diff --git a/src/components/3-ClassComposition/ClassComposition.js b/src/components/3-ClassComposition/ClassComposition.js
@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+
+import StyleVariantA from './StyleVariantA/StyleVariantA';
+import StyleVariantB from './StyleVariantB/StyleVariantB';
+
+export default class ClassComposition extends Component {
+  render() {
+    return (
+      <div>
+        <StyleVariantA />
+        <br />
+        <StyleVariantB />
+      </div>
+    );
+  }
+};