diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..1f5f3a6
--- /dev/null
+++ b/.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
diff --git a/.gitignore b/.gitignore
index 14f373e..5093597 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,3 +38,6 @@ jspm_packages
.DS_Store
css-constructor.js
+
+# VSCode settings folder
+.vscode
\ No newline at end of file
diff --git a/README.md b/README.md
index e238f80..1b6ca22 100644
--- a/README.md
+++ b/README.md
@@ -46,10 +46,12 @@ export default class Hello extends React.Component {
`
render () {
- return (
// š¼ Attaches class to the highest element
-

-
@siddharthkp
-
)
+ return (
+ // š¼ Attaches class to the highest element
+

+
@siddharthkp
+
+ )
}
};
@@ -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'`
diff --git a/api.js b/api.js
index ea4b063..da53484 100644
--- a/api.js
+++ b/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
}
diff --git a/example/entry.js b/example/entry.js
index e869dd8..8e9cfca 100644
--- a/example/entry.js
+++ b/example/entry.js
@@ -6,4 +6,7 @@ let color = {
sampleColor: 'papayawhip'
}
-ReactDOM.render(, document.getElementById('container'))
+ReactDOM.render(
+ ,
+ document.getElementById('container')
+)
diff --git a/example/hello.js b/example/hello.js
index 878d653..9f15f68 100644
--- a/example/hello.js
+++ b/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 (