Added css-light (#68)

streamich · MicheleBertoli · commit e0469652718a · 2017-10-08T19:03:56.000+02:00
* feat: added css-light

* fix: typo

* chore: review comments

* style: newline in gitignore
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ For example, if a package supports the css file extraction you can run the autop
 | [classy](https://github.com/inturn/classy) | 0.3.0 | | ✓ | ✓ | ✓ | |
 | [csjs](https://github.com/rtsao/csjs) | 1.0.0 | | ✓ | ✓ | | |
 | [css-constructor](https://github.com/siddharthkp/css-constructor) | 0.1.1 | ✓ | ✓ | ✓ | | |
+| [css-light](https://github.com/streamich/css-light) | 1.1.0 | | ✓ | ✓ | ✓ | ✓ |
 | [css-loader](https://github.com/webpack/css-loader) | 0.15.6 | | ✓ | ✓ | | ✓ |
 | [css-ns](https://github.com/jareware/css-ns) | 1.0.0 | | ✓ | ✓ | | ✓ |
 | [cssobj](https://github.com/cssobj/cssobj) | 0.2.21 | ✓ | ✓ | ✓ | ✓ | |
diff --git a/css-light/base.js b/css-light/base.js
@@ -0,0 +1,13 @@
+import {Component} from 'react';
+import {css, inject} from 'css-light';
+
+export class Comp extends Component {
+  componentWillMount() {
+    if (this.css) {
+      if (!this.css['@@once']) {
+        this.css['@@once'] = 1;
+        inject(css(this.css()));
+      }
+    }
+  }
+}
diff --git a/css-light/button.js b/css-light/button.js
@@ -0,0 +1,41 @@
+import {createElement as h} from 'react';
+import {render} from 'react-dom';
+import {Comp} from "./base";
+
+class Button extends Comp {
+  css = () => ({
+    '.container': {
+      ta: 'center',
+      '.button': {
+      bg: 'red',
+      w: '320px',
+      pad: '20px',
+      bdrad: '5px',
+      bd: 'none',
+      outline: 'none',
+      '&:hover': {
+        col: '#fff',
+      },
+      '&:active': {
+        pos: 'relative',
+        top: '2px',
+      },
+      },
+    },
+    '@media (max-width: 480px)': {
+      '.container .button': {
+        w: '160px',
+      },
+    },
+  });
+
+  render() {
+    return (
+      h('div', {className: 'container'},
+        h('button', {className: 'button'}, 'Click me!')
+      )
+    );
+  }
+}
+
+render(h(Button), document.getElementById('content'));
diff --git a/css-light/index.html b/css-light/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>css-light - CSS in JS</title>
+</head>
+<body>
+  <div id="content"></div>
+  <script src="bundle.js"></script>
+</body>
+</html>
diff --git a/css-light/package.json b/css-light/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "css-light-css-in-js",
+  "version": "1.0.0",
+  "description": "css-light - CSS in JS",
+  "scripts": {
+    "build": "webpack ./button.js bundle.js"
+  },
+  "author": "Vadim Dalecky",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "css-light": "1.1.0"
+  },
+  "devDependencies": {
+    "babel-loader": "^5.1.3",
+    "webpack": "^1.9.9"
+  }
+}
diff --git a/css-light/webpack.config.js b/css-light/webpack.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  module: {
+    loaders: [{
+      test: /\.jsx?$/,
+      exclude: /(node_modules|bower_components)/,
+      loader: 'babel?stage=0'
+    }]
+  }
+};
