Minor changes!!

.editorconfig

@@ -0,0 +1,13 @@
+# http.editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf8
+trim_trailing_whitespace  = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -38,3 +38,6 @@ jspm_packages
 
 .DS_Store
 css-constructor.js
+
+# VSCode settings folder
+.vscode

README.md

@@ -46,10 +46,12 @@ export default class Hello extends React.Component {
     `
 
     render () {
-        return (<div>                               // 🔼 Attaches class to the highest element
-            <img src="https://github.com/siddharthkp.png"/>
-            <div id="handle">@siddharthkp</div>
-        </div>)
+        return (
+            <div>                               // 🔼 Attaches class to the highest element
+                <img src="https://github.com/siddharthkp.png"/>
+                <div id="handle">@siddharthkp</div>
+            </div>
+        )
     }
 };
 
@@ -77,7 +79,7 @@ export default class Hello extends React.Component {
 
 #### Usage
 
-1. `npm install css-constructor --save`
+1. `npm install css-constructor`
 
 2. `import css from 'css-constructor'`
 

api.js

@@ -11,27 +11,25 @@ import stylis from 'stylis'
     this function gets the parent class, name of the function -
     render in this case and the descriptor for the function.
 */
+
 let css = rawCSS => (parentClass, name, descriptor) => ({
   ...descriptor,
   value: function() {
-    let originalProps
-
-    /* Totally stealing props by fake rendering the component */
-    let getProps = object => {
-      originalProps = object.props
-      return object
-    }
-    let rendered = descriptor.value.apply(getProps(this), arguments)
-
-    /* Replace props and return realCSS™ */
-    let realCSS = fillProps(rawCSS, originalProps)
+    let
+      originalProps,
+      getProps = object => {   /* Totally stealing props by fake rendering the component */
+        originalProps = object.props
+        return object
+      },
+      rendered = descriptor.value.apply(getProps(this), arguments),
+      realCSS = fillProps(rawCSS, originalProps)     /* Replace props and return realCSS™ */
 
     /* Merge classNames */
     const existingClassNames = rendered.props.className || ''
     let className = `${existingClassNames} ${insertRules(realCSS)}`
 
     /* Convert real CSS to javascripty CSS */
-    //let style = parseCss(realCSS);
+    // let style = parseCss(realCSS);
 
     /* Merge styles into original props */
     let newProps = { ...originalProps, className }
@@ -56,13 +54,18 @@ let css = rawCSS => (parentClass, name, descriptor) => ({
     Does not evaluate conditions (yet)
     color: {this.props.color || 'blue'}
 */
+
 let fillProps = (rawCSS, props) => {
   rawCSS = rawCSS[0] // template literal = array
-  let re = /{this.props.*}/g
-  let matches = rawCSS.match(re)
+  let
+    re = /{this.props.*}/g,
+    matches = rawCSS.match(re)
   if (matches && matches.length) {
     for (let match of matches) {
-      let keyword = match, replaceWord, propKeys
+      let
+        keyword = match,
+        replaceWord,
+        propKeys
       keyword = keyword.replace('{this.props.', '')
       keyword = keyword.substring(0, keyword.length - 1) // remove }
       keyword = keyword.trim()
@@ -82,11 +85,10 @@ let fillProps = (rawCSS, props) => {
 */
 
 let insertRules = realCSS => {
-  let style = getStyleElement()
-  /* Get unique classname */
-  let className = getHash(realCSS)
-  /* Convert nested CSS */
-  let styles = stylis(`.${className}`, realCSS)
+  let
+    style = getStyleElement(),     /* Get unique classname */
+    className = getHash(realCSS),  /* Convert nested CSS */
+    styles = stylis(`.${className}`, realCSS)
   style.innerHTML += styles
   return className
 }

example/entry.js

@@ -6,4 +6,7 @@ let color = {
   sampleColor: 'papayawhip'
 }
 
-ReactDOM.render(<Hello color={color} />, document.getElementById('container'))
+ReactDOM.render(
+  <Hello color={color} />, 
+  document.getElementById('container')
+)

example/hello.js

@@ -3,6 +3,7 @@ import React from 'react'
 import css from './css-constructor' // development - for me
 
 export default class Hello extends React.Component {
+
   /* javascript constructor */
   constructor(props) {
     super(props)
@@ -34,6 +35,7 @@ export default class Hello extends React.Component {
             & {font-size: 18px;}
         }
     `
+
   render() {
     return (
       <div className="existing">