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 (