@emotion/sheet - npm Package Compare versions

Comparing version 0.6.0 to 0.6.2

dist/index.cjs.js

@@ -35,3 +35,5 @@ 'use strict';
 
+  /* istanbul ignore next */
 
+
   for (var i = 0; i < document.styleSheets.length; i++) {
@@ -45,134 +47,56 @@ if (document.styleSheets[i].ownerNode === tag) {
 
-function makeStyleTag(opts) {
-  var tag = document.createElement('style');
-  tag.type = 'text/css';
-  tag.setAttribute('data-emotion', opts.key || '');
-
-  if (opts.nonce !== undefined) {
-    tag.setAttribute('nonce', opts.nonce);
-  }
-
-  tag.appendChild(document.createTextNode('')) // $FlowFixMe
-  ;
-  (opts.container !== undefined ? opts.container : document.head).appendChild(tag);
-  return tag;
-}
-
-function _DynamicStyleSheet(options) {
-  this.ctr = 0;
-  this.opts = options;
-}
-
-function _inject() {
-  if (process.env.NODE_ENV !== 'production' && this.tag !== undefined) {
-    throw new Error('This stylesheet has already been injected');
-  }
-
-  this.tag = makeStyleTag(this.opts);
-  this.sheet = sheetForTag(this.tag);
-}
-
-function _insertRules(rules) {
-  this.removeRules();
-  rules.forEach(this.insert, this);
-}
-
-function _insert(rule) {
-  try {
-    this.sheet.insertRule(rule, this.ctr);
-    this.ctr++;
-  } catch (e) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn("Invalid Rule: \"" + rule + "\"", e);
-    }
-  }
-}
-
-function _removeRules() {
-  if (this.ctr !== 0) {
-    while (this.ctr--) {
-      this.sheet.deleteRule(this.ctr);
-    }
-
-    this.ctr = 0;
-  }
-}
-
-function _flush() {
-  // $FlowFixMe
-  this.tag.parentNode.removeChild(this.tag);
-  this.ctr = 0; // $FlowFixMe
-
-  this.tag = undefined; // $FlowFixMe
-
-  this.sheet = undefined;
-}
-
-var DynamicStyleSheet =
-/*#__PURE__*/
-function () {
-  var _proto = _DynamicStyleSheet.prototype;
-  _proto.inject = _inject;
-  _proto.insertRules = _insertRules;
-  _proto.insert = _insert;
-  _proto.removeRules = _removeRules;
-  _proto.flush = _flush;
-  return _DynamicStyleSheet;
-}();
-
 function _StyleSheet(options) {
-  this.isSpeedy = process.env.NODE_ENV === 'production'; // the big drawback here is that the css won't be editable in devtools
+  if (options === undefined) options = {};
+  this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy; // maxLength is how many rules we have per style tag, it's 65000 in speedy mode
+  // because that's the upper limit in IE 10 TODO: make sure that is actually correct
+  // it's 1 in dev because we insert source maps that map a single rule to a location
+  // and you can only have one source map per style tag
 
+  this.maxLength = options.maxLength || this.isSpeedy ? 65000 : 1;
   this.tags = [];
   this.ctr = 0;
-  this.opts = options;
-}
+  this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
 
-function _inject2() {
-  if (this.injected) {
-    throw new Error('already injected!');
-  }
+  this.key = options.key; // $FlowFixMe
 
-  if (this.isSpeedy) {
-    this.tags[0] = makeStyleTag(this.opts);
-  }
-
-  this.injected = true;
+  this.container = options.container || (typeof document !== 'undefined' ? document.head : null);
 }
 
-function _speedy(bool) {
-  if (this.ctr !== 0) {
-    // cannot change speedy mode after inserting any rule to sheet. Either call speedy(${bool}) earlier in your app, or call flush() before speedy(${bool})
-    throw new Error("cannot change speedy now");
+function _insert(rule) {
+  if (this.ctr % this.maxLength === 0) {
+    this._insertStyleTag();
   }
 
-  this.isSpeedy = !!bool;
-}
+  var tag = this.tags[this.tags.length - 1];
 
-function _insert2(rule, sourceMap) {
-  // this is the ultrafast version, works across browsers
   if (this.isSpeedy) {
-    var tag = this.tags[this.tags.length - 1];
     var sheet = sheetForTag(tag);
 
     try {
+      // this is the ultrafast version, works across browsers
+      // the big drawback is that the css won't be editable in devtools
       sheet.insertRule(rule, sheet.cssRules.length);
     } catch (e) {
       if (process.env.NODE_ENV !== 'production') {
-        console.warn('illegal rule', rule); // eslint-disable-line no-console
+        console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e);
       }
     }
   } else {
-    var _tag = makeStyleTag(this.opts);
-
-    this.tags.push(_tag);
-
-    _tag.appendChild(document.createTextNode(rule + (sourceMap || '')));
+    tag.appendChild(document.createTextNode(rule));
   }
 
   this.ctr++;
+}
 
-  if (this.ctr % 65000 === 0) {
-    this.tags.push(makeStyleTag(this.opts));
+function _insertStyleTag() {
+  var tag = document.createElement('style');
+  tag.setAttribute('data-emotion', this.key || '');
+
+  if (this.nonce !== undefined) {
+    tag.setAttribute('nonce', this.nonce);
   }
+
+  tag.appendChild(document.createTextNode(''));
+  this.container.appendChild(tag);
+  this.tags.push(tag);
 }
@@ -184,9 +108,7 @@
 
-function _flush2() {
+function _flush() {
   // $FlowFixMe
   this.tags.forEach(_ref);
   this.tags = [];
-  this.ctr = 0; // todo - look for remnants in document.styleSheets
-
-  this.injected = false;
+  this.ctr = 0;
 }
@@ -197,12 +119,10 @@
 function () {
-  var _proto2 = _StyleSheet.prototype;
-  _proto2.inject = _inject2;
-  _proto2.speedy = _speedy;
-  _proto2.insert = _insert2;
-  _proto2.flush = _flush2;
+  var _proto = _StyleSheet.prototype;
+  _proto.insert = _insert;
+  _proto._insertStyleTag = _insertStyleTag;
+  _proto.flush = _flush;
   return _StyleSheet;
 }();
 
-exports.DynamicStyleSheet = DynamicStyleSheet;
 exports.StyleSheet = StyleSheet;
 //# sourceMappingURL=index.cjs.js.map

dist/index.es.js

@@ -31,3 +31,5 @@ /*
 
+  /* istanbul ignore next */
 
+
   for (var i = 0; i < document.styleSheets.length; i++) {
@@ -41,134 +43,56 @@ if (document.styleSheets[i].ownerNode === tag) {
 
-function makeStyleTag(opts) {
-  var tag = document.createElement('style');
-  tag.type = 'text/css';
-  tag.setAttribute('data-emotion', opts.key || '');
-
-  if (opts.nonce !== undefined) {
-    tag.setAttribute('nonce', opts.nonce);
-  }
-
-  tag.appendChild(document.createTextNode('')) // $FlowFixMe
-  ;
-  (opts.container !== undefined ? opts.container : document.head).appendChild(tag);
-  return tag;
-}
-
-function _DynamicStyleSheet(options) {
-  this.ctr = 0;
-  this.opts = options;
-}
-
-function _inject() {
-  if (process.env.NODE_ENV !== 'production' && this.tag !== undefined) {
-    throw new Error('This stylesheet has already been injected');
-  }
-
-  this.tag = makeStyleTag(this.opts);
-  this.sheet = sheetForTag(this.tag);
-}
-
-function _insertRules(rules) {
-  this.removeRules();
-  rules.forEach(this.insert, this);
-}
-
-function _insert(rule) {
-  try {
-    this.sheet.insertRule(rule, this.ctr);
-    this.ctr++;
-  } catch (e) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn("Invalid Rule: \"" + rule + "\"", e);
-    }
-  }
-}
-
-function _removeRules() {
-  if (this.ctr !== 0) {
-    while (this.ctr--) {
-      this.sheet.deleteRule(this.ctr);
-    }
-
-    this.ctr = 0;
-  }
-}
-
-function _flush() {
-  // $FlowFixMe
-  this.tag.parentNode.removeChild(this.tag);
-  this.ctr = 0; // $FlowFixMe
-
-  this.tag = undefined; // $FlowFixMe
-
-  this.sheet = undefined;
-}
-
-var DynamicStyleSheet =
-/*#__PURE__*/
-function () {
-  var _proto = _DynamicStyleSheet.prototype;
-  _proto.inject = _inject;
-  _proto.insertRules = _insertRules;
-  _proto.insert = _insert;
-  _proto.removeRules = _removeRules;
-  _proto.flush = _flush;
-  return _DynamicStyleSheet;
-}();
-
 function _StyleSheet(options) {
-  this.isSpeedy = process.env.NODE_ENV === 'production'; // the big drawback here is that the css won't be editable in devtools
+  if (options === undefined) options = {};
+  this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy; // maxLength is how many rules we have per style tag, it's 65000 in speedy mode
+  // because that's the upper limit in IE 10 TODO: make sure that is actually correct
+  // it's 1 in dev because we insert source maps that map a single rule to a location
+  // and you can only have one source map per style tag
 
+  this.maxLength = options.maxLength || this.isSpeedy ? 65000 : 1;
   this.tags = [];
   this.ctr = 0;
-  this.opts = options;
-}
+  this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
 
-function _inject2() {
-  if (this.injected) {
-    throw new Error('already injected!');
-  }
+  this.key = options.key; // $FlowFixMe
 
-  if (this.isSpeedy) {
-    this.tags[0] = makeStyleTag(this.opts);
-  }
-
-  this.injected = true;
+  this.container = options.container || (typeof document !== 'undefined' ? document.head : null);
 }
 
-function _speedy(bool) {
-  if (this.ctr !== 0) {
-    // cannot change speedy mode after inserting any rule to sheet. Either call speedy(${bool}) earlier in your app, or call flush() before speedy(${bool})
-    throw new Error("cannot change speedy now");
+function _insert(rule) {
+  if (this.ctr % this.maxLength === 0) {
+    this._insertStyleTag();
   }
 
-  this.isSpeedy = !!bool;
-}
+  var tag = this.tags[this.tags.length - 1];
 
-function _insert2(rule, sourceMap) {
-  // this is the ultrafast version, works across browsers
   if (this.isSpeedy) {
-    var tag = this.tags[this.tags.length - 1];
     var sheet = sheetForTag(tag);
 
     try {
+      // this is the ultrafast version, works across browsers
+      // the big drawback is that the css won't be editable in devtools
       sheet.insertRule(rule, sheet.cssRules.length);
     } catch (e) {
       if (process.env.NODE_ENV !== 'production') {
-        console.warn('illegal rule', rule); // eslint-disable-line no-console
+        console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e);
       }
     }
   } else {
-    var _tag = makeStyleTag(this.opts);
-
-    this.tags.push(_tag);
-
-    _tag.appendChild(document.createTextNode(rule + (sourceMap || '')));
+    tag.appendChild(document.createTextNode(rule));
   }
 
   this.ctr++;
+}
 
-  if (this.ctr % 65000 === 0) {
-    this.tags.push(makeStyleTag(this.opts));
+function _insertStyleTag() {
+  var tag = document.createElement('style');
+  tag.setAttribute('data-emotion', this.key || '');
+
+  if (this.nonce !== undefined) {
+    tag.setAttribute('nonce', this.nonce);
   }
+
+  tag.appendChild(document.createTextNode(''));
+  this.container.appendChild(tag);
+  this.tags.push(tag);
 }
@@ -180,9 +104,7 @@
 
-function _flush2() {
+function _flush() {
   // $FlowFixMe
   this.tags.forEach(_ref);
   this.tags = [];
-  this.ctr = 0; // todo - look for remnants in document.styleSheets
-
-  this.injected = false;
+  this.ctr = 0;
 }
@@ -193,11 +115,10 @@
 function () {
-  var _proto2 = _StyleSheet.prototype;
-  _proto2.inject = _inject2;
-  _proto2.speedy = _speedy;
-  _proto2.insert = _insert2;
-  _proto2.flush = _flush2;
+  var _proto = _StyleSheet.prototype;
+  _proto.insert = _insert;
+  _proto._insertStyleTag = _insertStyleTag;
+  _proto.flush = _flush;
   return _StyleSheet;
 }();
 
-export { DynamicStyleSheet, StyleSheet };
+export { StyleSheet };
 //# sourceMappingURL=index.es.js.map

package.json

 {
   "name": "@emotion/sheet",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "emotion's stylesheet",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

README.md

@@ -84,1 +84,5 @@ # @emotion/sheet
 ```
+
+# Thanks
+
+This StyleSheet is based on [glamor's StyleSheet](https://github.com/threepointone/glamor) written by [Sunil Pai](https://github.com/threepointone). ❤️

No alert changes

Improved metrics

Number of lines in readme file

88

increased by4.76%

Worsened metrics

Total package byte prevSize

24081

decreased by-22.53%

Lines of code

296

decreased by-30.35%

No dependency changes