API 4 has props support 🎉

siddharthkp · siddharthkp · commit f4bf56fe2600 · 2016-12-11T19:48:41.000+05:30
diff --git a/api4.js b/api4.js
@@ -1,19 +1,19 @@
 import React from 'react';
 
-function css (rawCSS) {
-    let rules = rawCSS[0].trim().split('\n');
-
+function css (rawCSSWithProps) {
     return function (target, name, descriptor) {
         return {
             ...descriptor,
             value: function () {
-                let style = parseCss(rawCSS);
                 let props;
                 function giveMeProps(object) {
                     props = object.props;
                     return object;
                 }
                 let rendered = descriptor.value.apply(giveMeProps(this), arguments);
+
+                let rawCSS = fillProps(rawCSSWithProps[0], props)
+                let style = parseCss(rawCSS);
                 let newProps = {...props, style};
 
                 return React.cloneElement(rendered, newProps, rendered.props.children);
@@ -24,9 +24,25 @@ function css (rawCSS) {
 
 let camelCase = (key) => key.replace(/(\-[a-z])/g, $1 => $1.toUpperCase().replace('-',''));
 
+let fillProps = (rawCSSWithProps, props) => {
+    let re = /{this.props.*}/g;
+    let matches = rawCSSWithProps.match(re);
+    if (matches && matches.length) {
+        for (let match of matches) {
+            let keyword = match;
+            keyword = keyword.replace('{this.props.', '');
+            keyword = keyword.substring(0, keyword.length-1); // }
+            keyword = keyword.trim();
+
+            rawCSSWithProps = rawCSSWithProps.replace(match, props[keyword]);
+        }
+    }
+    return rawCSSWithProps;
+}
+
 let parseCss = (rawCSS) => {
     let styles = {};
-    let rules = rawCSS[0].trim().split('\n');
+    let rules = rawCSS.trim().split('\n');
     for (let rule of rules) {
         let [key, value] = rule.trim().replace(';', '').split(':');
         key = camelCase(key.trim());
diff --git a/css4.js b/css4.js
@@ -14,19 +14,19 @@ var _react2 = _interopRequireDefault(_react);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function css(rawCSS) {
-    var rules = rawCSS[0].trim().split('\n');
-
+function css(rawCSSWithProps) {
     return function (target, name, descriptor) {
         return _extends({}, descriptor, {
             value: function value() {
-                var style = parseCss(rawCSS);
                 var props = void 0;
                 function giveMeProps(object) {
                     props = object.props;
                     return object;
                 }
                 var rendered = descriptor.value.apply(giveMeProps(this), arguments);
+
+                var rawCSS = fillProps(rawCSSWithProps[0], props);
+                var style = parseCss(rawCSS);
                 var newProps = _extends({}, props, { style: style });
 
                 return _react2.default.cloneElement(rendered, newProps, rendered.props.children);
@@ -41,16 +41,53 @@ var camelCase = function camelCase(key) {
     });
 };
 
+var fillProps = function fillProps(rawCSSWithProps, props) {
+    var re = /{this.props.*}/g;
+    var matches = rawCSSWithProps.match(re);
+    if (matches && matches.length) {
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+            for (var _iterator = matches[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+                var match = _step.value;
+
+                var keyword = match;
+                keyword = keyword.replace('{this.props.', '');
+                keyword = keyword.substring(0, keyword.length - 1); // }
+                keyword = keyword.trim();
+
+                rawCSSWithProps = rawCSSWithProps.replace(match, props[keyword]);
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally {
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return) {
+                    _iterator.return();
+                }
+            } finally {
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+    }
+    return rawCSSWithProps;
+};
+
 var parseCss = function parseCss(rawCSS) {
     var styles = {};
-    var rules = rawCSS[0].trim().split('\n');
-    var _iteratorNormalCompletion = true;
-    var _didIteratorError = false;
-    var _iteratorError = undefined;
+    var rules = rawCSS.trim().split('\n');
+    var _iteratorNormalCompletion2 = true;
+    var _didIteratorError2 = false;
+    var _iteratorError2 = undefined;
 
     try {
-        for (var _iterator = rules[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var rule = _step.value;
+        for (var _iterator2 = rules[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+            var rule = _step2.value;
 
             var _rule$trim$replace$sp = rule.trim().replace(';', '').split(':'),
                 _rule$trim$replace$sp2 = _slicedToArray(_rule$trim$replace$sp, 2),
@@ -62,16 +99,16 @@ var parseCss = function parseCss(rawCSS) {
             styles[key] = value;
         }
     } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
+        _didIteratorError2 = true;
+        _iteratorError2 = err;
     } finally {
         try {
-            if (!_iteratorNormalCompletion && _iterator.return) {
-                _iterator.return();
+            if (!_iteratorNormalCompletion2 && _iterator2.return) {
+                _iterator2.return();
             }
         } finally {
-            if (_didIteratorError) {
-                throw _iteratorError;
+            if (_didIteratorError2) {
+                throw _iteratorError2;
             }
         }
     }
diff --git a/example/bundle.js b/example/bundle.js
diff --git a/example/css4.js b/example/css4.js
@@ -14,19 +14,19 @@ var _react2 = _interopRequireDefault(_react);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function css(rawCSS) {
-    var rules = rawCSS[0].trim().split('\n');
-
+function css(rawCSSWithProps) {
     return function (target, name, descriptor) {
         return _extends({}, descriptor, {
             value: function value() {
-                var style = parseCss(rawCSS);
                 var props = void 0;
                 function giveMeProps(object) {
                     props = object.props;
                     return object;
                 }
                 var rendered = descriptor.value.apply(giveMeProps(this), arguments);
+
+                var rawCSS = fillProps(rawCSSWithProps[0], props);
+                var style = parseCss(rawCSS);
                 var newProps = _extends({}, props, { style: style });
 
                 return _react2.default.cloneElement(rendered, newProps, rendered.props.children);
@@ -41,16 +41,53 @@ var camelCase = function camelCase(key) {
     });
 };
 
+var fillProps = function fillProps(rawCSSWithProps, props) {
+    var re = /{this.props.*}/g;
+    var matches = rawCSSWithProps.match(re);
+    if (matches && matches.length) {
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+            for (var _iterator = matches[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+                var match = _step.value;
+
+                var keyword = match;
+                keyword = keyword.replace('{this.props.', '');
+                keyword = keyword.substring(0, keyword.length - 1); // }
+                keyword = keyword.trim();
+
+                rawCSSWithProps = rawCSSWithProps.replace(match, props[keyword]);
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally {
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return) {
+                    _iterator.return();
+                }
+            } finally {
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+    }
+    return rawCSSWithProps;
+};
+
 var parseCss = function parseCss(rawCSS) {
     var styles = {};
-    var rules = rawCSS[0].trim().split('\n');
-    var _iteratorNormalCompletion = true;
-    var _didIteratorError = false;
-    var _iteratorError = undefined;
+    var rules = rawCSS.trim().split('\n');
+    var _iteratorNormalCompletion2 = true;
+    var _didIteratorError2 = false;
+    var _iteratorError2 = undefined;
 
     try {
-        for (var _iterator = rules[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var rule = _step.value;
+        for (var _iterator2 = rules[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+            var rule = _step2.value;
 
             var _rule$trim$replace$sp = rule.trim().replace(';', '').split(':'),
                 _rule$trim$replace$sp2 = _slicedToArray(_rule$trim$replace$sp, 2),
@@ -62,16 +99,16 @@ var parseCss = function parseCss(rawCSS) {
             styles[key] = value;
         }
     } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
+        _didIteratorError2 = true;
+        _iteratorError2 = err;
     } finally {
         try {
-            if (!_iteratorNormalCompletion && _iterator.return) {
-                _iterator.return();
+            if (!_iteratorNormalCompletion2 && _iterator2.return) {
+                _iterator2.return();
             }
         } finally {
-            if (_didIteratorError) {
-                throw _iteratorError;
+            if (_didIteratorError2) {
+                throw _iteratorError2;
             }
         }
     }
diff --git a/example/withprops2.js b/example/withprops2.js
@@ -12,7 +12,7 @@ export default class WithProps extends React.Component {
     @css`
         font-size: 16px;
         text-align: center;
-        color: #5AF78E;
+        color: {this.props.color};
         font-family: monospace;
     `
 

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export default class WithProps extends React.Component {`
`12`	`12`	@css`
`13`	`13`	`font-size: 16px;`
`14`	`14`	`text-align: center;`
`15`		`- color: #5AF78E;`
	`15`	`+ color: {this.props.color};`
`16`	`16`	`font-family: monospace;`
`17`	`17`	`
`18`	`18`