kremling - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

coverage/chrome/coverage.txt

 {
 "/Users/joel/workplace/kremling/src/classname-helpers.js":{"path":"/Users/joel/workplace/kremling/src/classname-helpers.js","statementMap":{"0":{"start":{"line":5,"column":2},"end":{"line":5,"column":40}},"1":{"start":{"line":9,"column":2},"end":{"line":11,"column":3}},"2":{"start":{"line":10,"column":4},"end":{"line":10,"column":104}},"3":{"start":{"line":12,"column":2},"end":{"line":12,"column":50}},"4":{"start":{"line":16,"column":19},"end":{"line":16,"column":84}},"5":{"start":{"line":17,"column":14},"end":{"line":17,"column":64}},"6":{"start":{"line":18,"column":2},"end":{"line":18,"column":26}},"7":{"start":{"line":19,"column":2},"end":{"line":19,"column":18}},"8":{"start":{"line":20,"column":2},"end":{"line":20,"column":32}},"9":{"start":{"line":21,"column":2},"end":{"line":21,"column":21}},"10":{"start":{"line":22,"column":2},"end":{"line":22,"column":30}},"11":{"start":{"line":23,"column":2},"end":{"line":23,"column":20}},"12":{"start":{"line":24,"column":2},"end":{"line":24,"column":13}}},"fnMap":{"0":{"name":"css","decl":{"start":{"line":1,"column":16},"end":{"line":1,"column":19}},"loc":{"start":{"line":1,"column":29},"end":{"line":2,"column":1}},"line":1},"1":{"name":"always","decl":{"start":{"line":4,"column":16},"end":{"line":4,"column":22}},"loc":{"start":{"line":4,"column":32},"end":{"line":6,"column":1}},"line":4},"2":{"name":"maybe","decl":{"start":{"line":8,"column":16},"end":{"line":8,"column":21}},"loc":{"start":{"line":8,"column":42},"end":{"line":13,"column":1}},"line":8},"3":{"name":"chainify","decl":{"start":{"line":15,"column":9},"end":{"line":15,"column":17}},"loc":{"start":{"line":15,"column":45},"end":{"line":25,"column":1}},"line":15}},"branchMap":{"0":{"loc":{"start":{"line":9,"column":2},"end":{"line":11,"column":3}},"type":"if","locations":[{"start":{"line":9,"column":2},"end":{"line":11,"column":3}},{"start":{"line":9,"column":2},"end":{"line":11,"column":3}}],"line":9},"1":{"loc":{"start":{"line":12,"column":24},"end":{"line":12,"column":48}},"type":"cond-expr","locations":[{"start":{"line":12,"column":34},"end":{"line":12,"column":43}},{"start":{"line":12,"column":46},"end":{"line":12,"column":48}}],"line":12},"2":{"loc":{"start":{"line":16,"column":19},"end":{"line":16,"column":84}},"type":"cond-expr","locations":[{"start":{"line":16,"column":54},"end":{"line":16,"column":79}},{"start":{"line":16,"column":82},"end":{"line":16,"column":84}}],"line":16}},"s":{"0":7,"1":10,"2":2,"3":8,"4":15,"5":15,"6":15,"7":15,"8":15,"9":15,"10":15,"11":15,"12":15},"f":{"0":0,"1":7,"2":10,"3":15},"b":{"0":[2,8],"1":[5,3],"2":[8,7]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"d7f79759fc2273433c99d9b05d9834eee410ede4","l":{"5":7,"9":10,"10":2,"12":8,"16":15,"17":15,"18":15,"19":15,"20":15,"21":15,"22":15,"23":15,"24":15}},
-"/Users/joel/workplace/kremling/src/scoped.component.js":{"path":"/Users/joel/workplace/kremling/src/scoped.component.js","statementMap":{"0":{"start":{"line":4,"column":18},"end":{"line":4,"column":20}},"1":{"start":{"line":5,"column":14},"end":{"line":5,"column":15}},"2":{"start":{"line":14,"column":4},"end":{"line":14,"column":17}},"3":{"start":{"line":15,"column":4},"end":{"line":48,"column":5}},"4":{"start":{"line":16,"column":6},"end":{"line":18,"column":7}},"5":{"start":{"line":17,"column":8},"end":{"line":17,"column":124}},"6":{"start":{"line":19,"column":28},"end":{"line":19,"column":48}},"7":{"start":{"line":20,"column":6},"end":{"line":47,"column":7}},"8":{"start":{"line":21,"column":8},"end":{"line":21,"column":38}},"9":{"start":{"line":22,"column":8},"end":{"line":22,"column":34}},"10":{"start":{"line":23,"column":8},"end":{"line":23,"column":59}},"11":{"start":{"line":24,"column":8},"end":{"line":24,"column":61}},"12":{"start":{"line":27,"column":8},"end":{"line":27,"column":85}},"13":{"start":{"line":28,"column":8},"end":{"line":28,"column":43}},"14":{"start":{"line":31,"column":33},"end":{"line":31,"column":89}},"15":{"start":{"line":32,"column":31},"end":{"line":35,"column":10}},"16":{"start":{"line":33,"column":10},"end":{"line":33,"column":35}},"17":{"start":{"line":34,"column":10},"end":{"line":34,"column":83}},"18":{"start":{"line":38,"column":19},"end":{"line":38,"column":50}},"19":{"start":{"line":39,"column":8},"end":{"line":39,"column":44}},"20":{"start":{"line":40,"column":8},"end":{"line":40,"column":40}},"21":{"start":{"line":41,"column":8},"end":{"line":41,"column":25}},"22":{"start":{"line":42,"column":8},"end":{"line":42,"column":43}},"23":{"start":{"line":43,"column":8},"end":{"line":43,"column":50}},"24":{"start":{"line":44,"column":8},"end":{"line":44,"column":38}},"25":{"start":{"line":45,"column":8},"end":{"line":45,"column":34}},"26":{"start":{"line":46,"column":8},"end":{"line":46,"column":27}},"27":{"start":{"line":51,"column":4},"end":{"line":57,"column":7}},"28":{"start":{"line":52,"column":6},"end":{"line":56,"column":7}},"29":{"start":{"line":53,"column":8},"end":{"line":53,"column":92}},"30":{"start":{"line":55,"column":8},"end":{"line":55,"column":21}},"31":{"start":{"line":60,"column":4},"end":{"line":63,"column":5}},"32":{"start":{"line":61,"column":6},"end":{"line":61,"column":58}},"33":{"start":{"line":62,"column":6},"end":{"line":62,"column":39}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":13,"column":2},"end":{"line":13,"column":3}},"loc":{"start":{"line":13,"column":21},"end":{"line":49,"column":3}},"line":13},"1":{"name":"(anonymous_1)","decl":{"start":{"line":32,"column":61},"end":{"line":32,"column":62}},"loc":{"start":{"line":32,"column":81},"end":{"line":35,"column":9}},"line":32},"2":{"name":"(anonymous_2)","decl":{"start":{"line":50,"column":2},"end":{"line":50,"column":3}},"loc":{"start":{"line":50,"column":11},"end":{"line":58,"column":3}},"line":50},"3":{"name":"(anonymous_3)","decl":{"start":{"line":51,"column":51},"end":{"line":51,"column":52}},"loc":{"start":{"line":51,"column":60},"end":{"line":57,"column":5}},"line":51},"4":{"name":"(anonymous_4)","decl":{"start":{"line":59,"column":2},"end":{"line":59,"column":3}},"loc":{"start":{"line":59,"column":25},"end":{"line":64,"column":3}},"line":59}},"branchMap":{"0":{"loc":{"start":{"line":15,"column":4},"end":{"line":48,"column":5}},"type":"if","locations":[{"start":{"line":15,"column":4},"end":{"line":48,"column":5}},{"start":{"line":15,"column":4},"end":{"line":48,"column":5}}],"line":15},"1":{"loc":{"start":{"line":16,"column":6},"end":{"line":18,"column":7}},"type":"if","locations":[{"start":{"line":16,"column":6},"end":{"line":18,"column":7}},{"start":{"line":16,"column":6},"end":{"line":18,"column":7}}],"line":16},"2":{"loc":{"start":{"line":20,"column":6},"end":{"line":47,"column":7}},"type":"if","locations":[{"start":{"line":20,"column":6},"end":{"line":47,"column":7}},{"start":{"line":20,"column":6},"end":{"line":47,"column":7}}],"line":20},"3":{"loc":{"start":{"line":27,"column":40},"end":{"line":27,"column":82}},"type":"binary-expr","locations":[{"start":{"line":27,"column":40},"end":{"line":27,"column":55}},{"start":{"line":27,"column":59},"end":{"line":27,"column":82}}],"line":27},"4":{"loc":{"start":{"line":52,"column":6},"end":{"line":56,"column":7}},"type":"if","locations":[{"start":{"line":52,"column":6},"end":{"line":56,"column":7}},{"start":{"line":52,"column":6},"end":{"line":56,"column":7}}],"line":52},"5":{"loc":{"start":{"line":60,"column":4},"end":{"line":63,"column":5}},"type":"if","locations":[{"start":{"line":60,"column":4},"end":{"line":63,"column":5}},{"start":{"line":60,"column":4},"end":{"line":63,"column":5}}],"line":60}},"s":{"0":1,"1":1,"2":7,"3":7,"4":7,"5":1,"6":7,"7":7,"8":1,"9":1,"10":1,"11":1,"12":6,"13":6,"14":6,"15":6,"16":5,"17":5,"18":6,"19":6,"20":6,"21":6,"22":6,"23":6,"24":6,"25":6,"26":6,"27":7,"28":7,"29":6,"30":1,"31":7,"32":6,"33":6},"f":{"0":7,"1":5,"2":7,"3":7,"4":7},"b":{"0":[7,0],"1":[1,6],"2":[1,6],"3":[6,4],"4":[6,1],"5":[6,1]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"0270c6404a0b085fcc783e6669c12f3963ebe36c","l":{"4":1,"5":1,"14":7,"15":7,"16":7,"17":1,"19":7,"20":7,"21":1,"22":1,"23":1,"24":1,"27":6,"28":6,"31":6,"32":6,"33":5,"34":5,"38":6,"39":6,"40":6,"41":6,"42":6,"43":6,"44":6,"45":6,"46":6,"51":7,"52":7,"53":6,"55":1,"60":7,"61":6,"62":6}}}
+"/Users/joel/workplace/kremling/src/scoped.component.js":{"path":"/Users/joel/workplace/kremling/src/scoped.component.js","statementMap":{"0":{"start":{"line":5,"column":18},"end":{"line":5,"column":20}},"1":{"start":{"line":6,"column":14},"end":{"line":6,"column":15}},"2":{"start":{"line":8,"column":37},"end":{"line":8,"column":60}},"3":{"start":{"line":19,"column":4},"end":{"line":19,"column":17}},"4":{"start":{"line":20,"column":4},"end":{"line":20,"column":41}},"5":{"start":{"line":24,"column":29},"end":{"line":30,"column":6}},"6":{"start":{"line":25,"column":6},"end":{"line":29,"column":7}},"7":{"start":{"line":26,"column":8},"end":{"line":26,"column":104}},"8":{"start":{"line":28,"column":8},"end":{"line":28,"column":21}},"9":{"start":{"line":32,"column":4},"end":{"line":43,"column":5}},"10":{"start":{"line":33,"column":6},"end":{"line":33,"column":30}},"11":{"start":{"line":36,"column":6},"end":{"line":42,"column":7}},"12":{"start":{"line":37,"column":8},"end":{"line":37,"column":126}},"13":{"start":{"line":38,"column":13},"end":{"line":42,"column":7}},"14":{"start":{"line":39,"column":8},"end":{"line":39,"column":35}},"15":{"start":{"line":41,"column":8},"end":{"line":41,"column":20}},"16":{"start":{"line":47,"column":4},"end":{"line":50,"column":5}},"17":{"start":{"line":48,"column":6},"end":{"line":48,"column":25}},"18":{"start":{"line":49,"column":6},"end":{"line":49,"column":49}},"19":{"start":{"line":54,"column":4},"end":{"line":54,"column":23}},"20":{"start":{"line":58,"column":4},"end":{"line":60,"column":5}},"21":{"start":{"line":59,"column":6},"end":{"line":59,"column":13}},"22":{"start":{"line":62,"column":4},"end":{"line":64,"column":5}},"23":{"start":{"line":63,"column":6},"end":{"line":63,"column":122}},"24":{"start":{"line":67,"column":26},"end":{"line":67,"column":46}},"25":{"start":{"line":69,"column":4},"end":{"line":96,"column":5}},"26":{"start":{"line":70,"column":6},"end":{"line":70,"column":31}},"27":{"start":{"line":71,"column":6},"end":{"line":71,"column":32}},"28":{"start":{"line":72,"column":6},"end":{"line":72,"column":47}},"29":{"start":{"line":73,"column":6},"end":{"line":73,"column":49}},"30":{"start":{"line":76,"column":6},"end":{"line":76,"column":78}},"31":{"start":{"line":77,"column":6},"end":{"line":77,"column":36}},"32":{"start":{"line":80,"column":31},"end":{"line":80,"column":77}},"33":{"start":{"line":81,"column":29},"end":{"line":84,"column":8}},"34":{"start":{"line":82,"column":8},"end":{"line":82,"column":33}},"35":{"start":{"line":83,"column":8},"end":{"line":83,"column":81}},"36":{"start":{"line":87,"column":17},"end":{"line":87,"column":48}},"37":{"start":{"line":88,"column":6},"end":{"line":88,"column":42}},"38":{"start":{"line":89,"column":6},"end":{"line":89,"column":38}},"39":{"start":{"line":90,"column":6},"end":{"line":90,"column":23}},"40":{"start":{"line":91,"column":6},"end":{"line":91,"column":41}},"41":{"start":{"line":92,"column":6},"end":{"line":92,"column":43}},"42":{"start":{"line":93,"column":6},"end":{"line":93,"column":36}},"43":{"start":{"line":94,"column":6},"end":{"line":94,"column":32}},"44":{"start":{"line":95,"column":6},"end":{"line":95,"column":20}},"45":{"start":{"line":98,"column":4},"end":{"line":103,"column":6}},"46":{"start":{"line":107,"column":4},"end":{"line":110,"column":5}},"47":{"start":{"line":108,"column":6},"end":{"line":108,"column":70}},"48":{"start":{"line":109,"column":6},"end":{"line":109,"column":39}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":18,"column":2},"end":{"line":18,"column":3}},"loc":{"start":{"line":18,"column":21},"end":{"line":21,"column":3}},"line":18},"1":{"name":"(anonymous_1)","decl":{"start":{"line":23,"column":2},"end":{"line":23,"column":3}},"loc":{"start":{"line":23,"column":11},"end":{"line":44,"column":3}},"line":23},"2":{"name":"(anonymous_2)","decl":{"start":{"line":24,"column":69},"end":{"line":24,"column":70}},"loc":{"start":{"line":24,"column":78},"end":{"line":30,"column":5}},"line":24},"3":{"name":"(anonymous_3)","decl":{"start":{"line":46,"column":2},"end":{"line":46,"column":3}},"loc":{"start":{"line":46,"column":23},"end":{"line":51,"column":3}},"line":46},"4":{"name":"(anonymous_4)","decl":{"start":{"line":53,"column":2},"end":{"line":53,"column":3}},"loc":{"start":{"line":53,"column":25},"end":{"line":55,"column":3}},"line":53},"5":{"name":"(anonymous_5)","decl":{"start":{"line":57,"column":2},"end":{"line":57,"column":3}},"loc":{"start":{"line":57,"column":21},"end":{"line":104,"column":3}},"line":57},"6":{"name":"(anonymous_6)","decl":{"start":{"line":81,"column":59},"end":{"line":81,"column":60}},"loc":{"start":{"line":81,"column":79},"end":{"line":84,"column":7}},"line":81},"7":{"name":"(anonymous_7)","decl":{"start":{"line":106,"column":16},"end":{"line":106,"column":17}},"loc":{"start":{"line":106,"column":22},"end":{"line":111,"column":3}},"line":106}},"branchMap":{"0":{"loc":{"start":{"line":25,"column":6},"end":{"line":29,"column":7}},"type":"if","locations":[{"start":{"line":25,"column":6},"end":{"line":29,"column":7}},{"start":{"line":25,"column":6},"end":{"line":29,"column":7}}],"line":25},"1":{"loc":{"start":{"line":32,"column":4},"end":{"line":43,"column":5}},"type":"if","locations":[{"start":{"line":32,"column":4},"end":{"line":43,"column":5}},{"start":{"line":32,"column":4},"end":{"line":43,"column":5}}],"line":32},"2":{"loc":{"start":{"line":36,"column":6},"end":{"line":42,"column":7}},"type":"if","locations":[{"start":{"line":36,"column":6},"end":{"line":42,"column":7}},{"start":{"line":36,"column":6},"end":{"line":42,"column":7}}],"line":36},"3":{"loc":{"start":{"line":38,"column":13},"end":{"line":42,"column":7}},"type":"if","locations":[{"start":{"line":38,"column":13},"end":{"line":42,"column":7}},{"start":{"line":38,"column":13},"end":{"line":42,"column":7}}],"line":38},"4":{"loc":{"start":{"line":47,"column":4},"end":{"line":50,"column":5}},"type":"if","locations":[{"start":{"line":47,"column":4},"end":{"line":50,"column":5}},{"start":{"line":47,"column":4},"end":{"line":50,"column":5}}],"line":47},"5":{"loc":{"start":{"line":58,"column":4},"end":{"line":60,"column":5}},"type":"if","locations":[{"start":{"line":58,"column":4},"end":{"line":60,"column":5}},{"start":{"line":58,"column":4},"end":{"line":60,"column":5}}],"line":58},"6":{"loc":{"start":{"line":62,"column":4},"end":{"line":64,"column":5}},"type":"if","locations":[{"start":{"line":62,"column":4},"end":{"line":64,"column":5}},{"start":{"line":62,"column":4},"end":{"line":64,"column":5}}],"line":62},"7":{"loc":{"start":{"line":69,"column":4},"end":{"line":96,"column":5}},"type":"if","locations":[{"start":{"line":69,"column":4},"end":{"line":96,"column":5}},{"start":{"line":69,"column":4},"end":{"line":96,"column":5}}],"line":69},"8":{"loc":{"start":{"line":76,"column":33},"end":{"line":76,"column":75}},"type":"binary-expr","locations":[{"start":{"line":76,"column":33},"end":{"line":76,"column":48}},{"start":{"line":76,"column":52},"end":{"line":76,"column":75}}],"line":76},"9":{"loc":{"start":{"line":107,"column":4},"end":{"line":110,"column":5}},"type":"if","locations":[{"start":{"line":107,"column":4},"end":{"line":110,"column":5}},{"start":{"line":107,"column":4},"end":{"line":110,"column":5}}],"line":107},"10":{"loc":{"start":{"line":107,"column":8},"end":{"line":107,"column":68}},"type":"binary-expr","locations":[{"start":{"line":107,"column":8},"end":{"line":107,"column":27}},{"start":{"line":107,"column":31},"end":{"line":107,"column":68}}],"line":107}},"s":{"0":1,"1":1,"2":1,"3":7,"4":7,"5":7,"6":7,"7":6,"8":1,"9":7,"10":7,"11":0,"12":0,"13":0,"14":0,"15":0,"16":0,"17":0,"18":0,"19":7,"20":7,"21":0,"22":7,"23":1,"24":7,"25":7,"26":1,"27":1,"28":1,"29":1,"30":6,"31":6,"32":6,"33":6,"34":5,"35":5,"36":6,"37":6,"38":6,"39":6,"40":6,"41":6,"42":6,"43":6,"44":6,"45":7,"46":7,"47":6,"48":6},"f":{"0":7,"1":7,"2":7,"3":0,"4":7,"5":7,"6":5,"7":7},"b":{"0":[6,1],"1":[7,0],"2":[0,0],"3":[0,0],"4":[0,0],"5":[0,7],"6":[1,6],"7":[1,6],"8":[6,4],"9":[6,1],"10":[7,7]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"7a146e21666086d73ad3d23b9d57c3779a8f2258","l":{"5":1,"6":1,"8":1,"19":7,"20":7,"24":7,"25":7,"26":6,"28":1,"32":7,"33":7,"36":0,"37":0,"38":0,"39":0,"41":0,"47":0,"48":0,"49":0,"54":7,"58":7,"59":0,"62":7,"63":1,"67":7,"69":7,"70":1,"71":1,"72":1,"73":1,"76":6,"77":6,"80":6,"81":6,"82":5,"83":5,"87":6,"88":6,"89":6,"90":6,"91":6,"92":6,"93":6,"94":6,"95":6,"98":7,"107":7,"108":6,"109":6}}}

lib/scoped.component.js

@@ -14,2 +14,6 @@ 'use strict';
 
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
 var _propTypes = require('prop-types');
@@ -32,4 +36,3 @@
 
-var reactVersion = Number(_react2.default.version.slice(0, _react2.default.version.indexOf('.')));
-var reactSupportsMultipleChildren = reactVersion >= 16;
+var reactSupportsReturningArrays = !!_reactDom2.default.createPortal;
 
@@ -44,36 +47,10 @@ var Scoped = exports.Scoped = function (_React$Component) {
 
-    if (typeof props.css === 'string') {
-      if (props.css.indexOf('&') <= 0) {
-        console.warn('Kremling\'s <Scoped css="..."> css prop should have the \'&\' character in it to scope the css classes');
+    _this.doneWithCss = function () {
+      if (_this.state.styleRef && --_this.state.styleRef.kremlings === 0) {
+        _this.state.styleRef.parentNode.removeChild(_this.state.styleRef);
+        delete styleTags[_this.props.css];
       }
-      var existingDomEl = styleTags[props.css];
-      if (existingDomEl) {
-        _this.styleRef = existingDomEl;
-        existingDomEl.kremlings++;
-        _this.kremlingAttrName = _this.styleRef.kremlingAttr;
-        _this.kremlingAttrValue = _this.styleRef.kremlingValue;
-      } else {
-        // The attribute for namespacing the css
-        _this.kremlingAttrName = 'data-' + (props.namespace || Scoped.defaultNamespace);
-        _this.kremlingAttrValue = counter++;
+    };
 
-        // The css to append to the dom
-        var kremlingSelector = '[' + _this.kremlingAttrName + '="' + _this.kremlingAttrValue + '"]';
-        var transformedCSS = props.css.replace(/& (.+){/g, function (match, cssRule) {
-          cssRule = cssRule.trim();
-          return kremlingSelector + ' ' + cssRule + ', ' + kremlingSelector + cssRule + ' {';
-        });
-
-        // The dom element
-        var el = document.createElement('style');
-        el.setAttribute('type', 'text/css');
-        el.textContent = transformedCSS;
-        el.kremlings = 1;
-        el.kremlingAttr = kremlingSelector;
-        el.kremlingValue = _this.kremlingAttrValue;
-        document.head.appendChild(el);
-        styleTags[props.css] = el;
-        _this.styleRef = el;
-      }
-    }
+    _this.state = _this.newCssState(props);
     return _this;
@@ -89,3 +66,3 @@ }
         if (_react2.default.isValidElement(child)) {
-          return _react2.default.cloneElement(child, _defineProperty({}, _this2.kremlingAttrName, _this2.kremlingAttrValue));
+          return _react2.default.cloneElement(child, _defineProperty({}, _this2.state.kremlingAttrName, _this2.state.kremlingAttrValue));
         } else {
@@ -96,3 +73,3 @@ return child;
 
-      if (reactSupportsMultipleChildren) {
+      if (reactSupportsReturningArrays) {
         return kremlingChildren;
@@ -103,4 +80,6 @@ } else {
           throw new Error('kremling\'s <Scoped /> component requires exactly one child element unless you are using react@>=16');
+        } else if (kremlingChildren.length === 1) {
+          return kremlingChildren[0];
         } else {
-          return kremlingChildren[0];
+          return null;
         }
@@ -110,8 +89,65 @@ }
   }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      if (this.state.css !== this.props.css) {
+        this.doneWithCss();
+        this.setState(this.newCssState(this.props));
+      }
+    }
+  }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
-      if (--this.styleRef.kremlings === 0) {
-        this.styleRef.parentNode.removeChild(this.styleRef);
-        delete styleTags[this.props.css];
+      this.doneWithCss();
+    }
+  }, {
+    key: 'newCssState',
+    value: function newCssState(props) {
+      if (typeof props.css !== 'string') {
+        return;
       }
+
+      if (props.css.indexOf('&') <= 0) {
+        console.warn('Kremling\'s <Scoped css="..."> css prop should have the \'&\' character in it to scope the css classes');
+      }
+
+      var styleRef = void 0,
+          kremlingAttrName = void 0,
+          kremlingAttrValue = void 0;
+      var existingDomEl = styleTags[props.css];
+
+      if (existingDomEl) {
+        styleRef = existingDomEl;
+        existingDomEl.kremlings++;
+        kremlingAttrName = styleRef.kremlingAttr;
+        kremlingAttrValue = styleRef.kremlingValue;
+      } else {
+        // The attribute for namespacing the css
+        kremlingAttrName = 'data-' + (props.namespace || Scoped.defaultNamespace);
+        kremlingAttrValue = counter++;
+
+        // The css to append to the dom
+        var kremlingSelector = '[' + kremlingAttrName + '="' + kremlingAttrValue + '"]';
+        var transformedCSS = props.css.replace(/& (.+){/g, function (match, cssRule) {
+          cssRule = cssRule.trim();
+          return kremlingSelector + ' ' + cssRule + ', ' + kremlingSelector + cssRule + ' {';
+        });
+
+        // The dom element
+        var el = document.createElement('style');
+        el.setAttribute('type', 'text/css');
+        el.textContent = transformedCSS;
+        el.kremlings = 1;
+        el.kremlingAttr = kremlingSelector;
+        el.kremlingValue = kremlingAttrValue;
+        document.head.appendChild(el);
+        styleTags[props.css] = el;
+        styleRef = el;
+      }
+
+      return {
+        css: props.css,
+        styleRef: styleRef,
+        kremlingAttrName: kremlingAttrName,
+        kremlingAttrValue: kremlingAttrValue
+      };
     }
@@ -118,0 +154,0 @@ }]);

package.json

 {
   "name": "kremling",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Embarrassingly simple css for React",
@@ -5,0 +5,0 @@ "main": "lib/kremling.js",

src/scoped.component.js

 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
@@ -7,4 +8,3 @@
 
-const reactVersion = Number(React.version.slice(0, React.version.indexOf('.')));
-const reactSupportsMultipleChildren = reactVersion >= 16;
+const reactSupportsReturningArrays = !!ReactDOM.createPortal;
 
@@ -16,44 +16,14 @@ export class Scoped extends React.Component {
   }
-  static defaultNamespace = 'kremling';
+
+  static defaultNamespace = 'kremling'
+
   constructor(props) {
     super(props);
-    if (typeof props.css === 'string') {
-      if (props.css.indexOf('&') <= 0) {
-        console.warn(`Kremling's <Scoped css="..."> css prop should have the '&' character in it to scope the css classes`);
-      }
-      const existingDomEl = styleTags[props.css];
-      if (existingDomEl) {
-        this.styleRef = existingDomEl;
-        existingDomEl.kremlings++;
-        this.kremlingAttrName = this.styleRef.kremlingAttr;
-        this.kremlingAttrValue = this.styleRef.kremlingValue;
-      } else {
-        // The attribute for namespacing the css
-        this.kremlingAttrName = `data-${props.namespace || Scoped.defaultNamespace}`;
-        this.kremlingAttrValue = counter++;
+    this.state = this.newCssState(props);
+  }
 
-        // The css to append to the dom
-        const kremlingSelector = `[${this.kremlingAttrName}="${this.kremlingAttrValue}"]`;
-        const transformedCSS = props.css.replace(/& (.+){/g, (match, cssRule) => {
-          cssRule = cssRule.trim();
-          return `${kremlingSelector} ${cssRule}, ${kremlingSelector}${cssRule} {`;
-        });
-
-        // The dom element
-        const el = document.createElement('style');
-        el.setAttribute('type', 'text/css');
-        el.textContent = transformedCSS;
-        el.kremlings = 1;
-        el.kremlingAttr = kremlingSelector;
-        el.kremlingValue = this.kremlingAttrValue;
-        document.head.appendChild(el);
-        styleTags[props.css] = el;
-        this.styleRef = el;
-      }
-    }
-  }
   render() {
     const kremlingChildren = React.Children.map(this.props.children, child => {
       if (React.isValidElement(child)) {
-        return React.cloneElement(child, {[this.kremlingAttrName]: this.kremlingAttrValue});
+        return React.cloneElement(child, {[this.state.kremlingAttrName]: this.state.kremlingAttrValue});
       } else {
@@ -64,3 +34,3 @@ return child;
 
-    if (reactSupportsMultipleChildren) {
+    if (reactSupportsReturningArrays) {
       return kremlingChildren;
@@ -71,10 +41,73 @@ } else {
         throw new Error(`kremling's <Scoped /> component requires exactly one child element unless you are using react@>=16`);
+      } else if (kremlingChildren.length === 1) {
+        return kremlingChildren[0];
       } else {
-        return kremlingChildren[0];
+        return null;
       }
     }
   }
+
+  componentDidUpdate() {
+    if (this.state.css !== this.props.css) {
+      this.doneWithCss();
+      this.setState(this.newCssState(this.props))
+    }
+  }
+
   componentWillUnmount() {
-    if (--this.styleRef.kremlings === 0) {
-      this.styleRef.parentNode.removeChild(this.styleRef);
+    this.doneWithCss();
+  }
+
+  newCssState(props) {
+    if (typeof props.css !== 'string') {
+      return;
+    }
+
+    if (props.css.indexOf('&') <= 0) {
+      console.warn(`Kremling's <Scoped css="..."> css prop should have the '&' character in it to scope the css classes`);
+    }
+
+    let styleRef, kremlingAttrName, kremlingAttrValue;
+    const existingDomEl = styleTags[props.css];
+
+    if (existingDomEl) {
+      styleRef = existingDomEl;
+      existingDomEl.kremlings++;
+      kremlingAttrName = styleRef.kremlingAttr;
+      kremlingAttrValue = styleRef.kremlingValue;
+    } else {
+      // The attribute for namespacing the css
+      kremlingAttrName = `data-${props.namespace || Scoped.defaultNamespace}`;
+      kremlingAttrValue = counter++;
+
+      // The css to append to the dom
+      const kremlingSelector = `[${kremlingAttrName}="${kremlingAttrValue}"]`;
+      const transformedCSS = props.css.replace(/& (.+){/g, (match, cssRule) => {
+        cssRule = cssRule.trim();
+        return `${kremlingSelector} ${cssRule}, ${kremlingSelector}${cssRule} {`;
+      });
+
+      // The dom element
+      const el = document.createElement('style');
+      el.setAttribute('type', 'text/css');
+      el.textContent = transformedCSS;
+      el.kremlings = 1;
+      el.kremlingAttr = kremlingSelector;
+      el.kremlingValue = kremlingAttrValue;
+      document.head.appendChild(el);
+      styleTags[props.css] = el;
+      styleRef = el;
+    }
+
+    return {
+      css: props.css,
+      styleRef,
+      kremlingAttrName,
+      kremlingAttrValue,
+    };
+  }
+
+  doneWithCss = () => {
+    if (this.state.styleRef && --this.state.styleRef.kremlings === 0) {
+      this.state.styleRef.parentNode.removeChild(this.state.styleRef);
       delete styleTags[this.props.css];
@@ -81,0 +114,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54819

increased by10.33%

Lines of code

578

increased by9.68%

No dependency changes