@emotion/sheet - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

CHANGELOG.md

 # @emotion/sheet
 
+## 1.1.1
+
+### Patch Changes
+
+- [#2728](https://github.com/emotion-js/emotion/pull/2728) [`6c2d7a60`](https://github.com/emotion-js/emotion/commit/6c2d7a6010af85502ae33d14dcbd3bb62ed7612e) Thanks [@Peeja](https://github.com/Peeja)! - TypeScript type for the `container` option has been adjusted. It will now accept a `ShadowRoot`, or any other kind of `Node`.
+
 ## 1.1.0
@@ -4,0 +10,0 @@

dist/emotion-sheet.browser.cjs.js

@@ -59,2 +59,3 @@ 'use strict';
 var StyleSheet = /*#__PURE__*/function () {
+  // Using Node instead of HTMLElement since container may be a ShadowRoot
   function StyleSheet(options) {
@@ -61,0 +62,0 @@ var _this = this;

dist/emotion-sheet.browser.esm.js

@@ -55,2 +55,3 @@ /*
 var StyleSheet = /*#__PURE__*/function () {
+  // Using Node instead of HTMLElement since container may be a ShadowRoot
   function StyleSheet(options) {
@@ -57,0 +58,0 @@ var _this = this;

dist/emotion-sheet.cjs.dev.js

@@ -59,2 +59,3 @@ 'use strict';
 var StyleSheet = /*#__PURE__*/function () {
+  // Using Node instead of HTMLElement since container may be a ShadowRoot
   function StyleSheet(options) {
@@ -61,0 +62,0 @@ var _this = this;

dist/emotion-sheet.cjs.prod.js

@@ -1,51 +0,139 @@
-"use strict";
+'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/*
+
+Based off glamor's StyleSheet, thanks Sunil ❤️
+
+high performance StyleSheet for css-in-js systems
+
+- uses multiple style tags behind the scenes for millions of rules
+- uses `insertRule` for appending in production for *much* faster performance
+
+// usage
+
+import { StyleSheet } from '@emotion/sheet'
+
+let styleSheet = new StyleSheet({ key: '', container: document.head })
+
+styleSheet.insert('#box { border: 1px solid red; }')
+- appends a css rule into the stylesheet
+
+styleSheet.flush()
+- empties the stylesheet of all its contents
+
+*/
+// $FlowFixMe
 function sheetForTag(tag) {
-  if (tag.sheet) return tag.sheet;
-  for (var i = 0; i < document.styleSheets.length; i++) if (document.styleSheets[i].ownerNode === tag) return document.styleSheets[i];
+  if (tag.sheet) {
+    // $FlowFixMe
+    return tag.sheet;
+  } // this weirdness brought to you by firefox
+
+  /* istanbul ignore next */
+
+
+  for (var i = 0; i < document.styleSheets.length; i++) {
+    if (document.styleSheets[i].ownerNode === tag) {
+      // $FlowFixMe
+      return document.styleSheets[i];
+    }
+  }
 }
 
 function createStyleElement(options) {
-  var tag = document.createElement("style");
-  return tag.setAttribute("data-emotion", options.key), void 0 !== options.nonce && tag.setAttribute("nonce", options.nonce), 
-  tag.appendChild(document.createTextNode("")), tag.setAttribute("data-s", ""), tag;
+  var tag = document.createElement('style');
+  tag.setAttribute('data-emotion', options.key);
+
+  if (options.nonce !== undefined) {
+    tag.setAttribute('nonce', options.nonce);
+  }
+
+  tag.appendChild(document.createTextNode(''));
+  tag.setAttribute('data-s', '');
+  return tag;
 }
 
-Object.defineProperty(exports, "__esModule", {
-  value: !0
-});
-
-var StyleSheet = function() {
+var StyleSheet = /*#__PURE__*/function () {
+  // Using Node instead of HTMLElement since container may be a ShadowRoot
   function StyleSheet(options) {
     var _this = this;
-    this._insertTag = function(tag) {
+
+    this._insertTag = function (tag) {
       var before;
-      before = 0 === _this.tags.length ? _this.insertionPoint ? _this.insertionPoint.nextSibling : _this.prepend ? _this.container.firstChild : _this.before : _this.tags[_this.tags.length - 1].nextSibling, 
-      _this.container.insertBefore(tag, before), _this.tags.push(tag);
-    }, this.isSpeedy = void 0 === options.speedy || options.speedy, this.tags = [], 
-    this.ctr = 0, this.nonce = options.nonce, this.key = options.key, this.container = options.container, 
-    this.prepend = options.prepend, this.insertionPoint = options.insertionPoint, this.before = null;
+
+      if (_this.tags.length === 0) {
+        if (_this.insertionPoint) {
+          before = _this.insertionPoint.nextSibling;
+        } else if (_this.prepend) {
+          before = _this.container.firstChild;
+        } else {
+          before = _this.before;
+        }
+      } else {
+        before = _this.tags[_this.tags.length - 1].nextSibling;
+      }
+
+      _this.container.insertBefore(tag, before);
+
+      _this.tags.push(tag);
+    };
+
+    this.isSpeedy = options.speedy === undefined ?         "production" === 'production' : options.speedy;
+    this.tags = [];
+    this.ctr = 0;
+    this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
+
+    this.key = options.key;
+    this.container = options.container;
+    this.prepend = options.prepend;
+    this.insertionPoint = options.insertionPoint;
+    this.before = null;
   }
+
   var _proto = StyleSheet.prototype;
-  return _proto.hydrate = function(nodes) {
+
+  _proto.hydrate = function hydrate(nodes) {
     nodes.forEach(this._insertTag);
-  }, _proto.insert = function(rule) {
-    this.ctr % (this.isSpeedy ? 65e3 : 1) == 0 && this._insertTag(createStyleElement(this));
+  };
+
+  _proto.insert = function insert(rule) {
+    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
+    // 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
+    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
+      this._insertTag(createStyleElement(this));
+    }
+
     var tag = this.tags[this.tags.length - 1];
+
     if (this.isSpeedy) {
       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) {
-        0;
       }
-    } else tag.appendChild(document.createTextNode(rule));
+    } else {
+      tag.appendChild(document.createTextNode(rule));
+    }
+
     this.ctr++;
-  }, _proto.flush = function() {
-    this.tags.forEach((function(tag) {
+  };
+
+  _proto.flush = function flush() {
+    // $FlowFixMe
+    this.tags.forEach(function (tag) {
       return tag.parentNode && tag.parentNode.removeChild(tag);
-    })), this.tags = [], this.ctr = 0;
-  }, StyleSheet;
+    });
+    this.tags = [];
+    this.ctr = 0;
+  };
+
+  return StyleSheet;
 }();
 
 exports.StyleSheet = StyleSheet;

dist/emotion-sheet.esm.js

@@ -55,2 +55,3 @@ /*
 var StyleSheet = /*#__PURE__*/function () {
+  // Using Node instead of HTMLElement since container may be a ShadowRoot
   function StyleSheet(options) {
@@ -57,0 +58,0 @@ var _this = this;

package.json

 {
   "name": "@emotion/sheet",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "emotion's stylesheet",
@@ -26,4 +26,5 @@ "main": "dist/emotion-sheet.cjs.js",
   "devDependencies": {
-    "dtslint": "^0.3.0"
+    "@definitelytyped/dtslint": "0.0.112",
+    "typescript": "^4.5.5"
   }
 }

README.md

@@ -28,3 +28,3 @@ # @emotion/sheet
   key: string
-  container: HTMLElement
+  container: Node
   speedy?: boolean
@@ -31,0 +31,0 @@ prepend?: boolean

src/index.js

@@ -45,3 +45,3 @@ // @flow
   key: string,
-  container: HTMLElement,
+  container: Node,
   speedy?: boolean,
@@ -70,3 +70,4 @@ prepend?: boolean,
   tags: HTMLStyleElement[]
-  container: HTMLElement
+  // Using Node instead of HTMLElement since container may be a ShadowRoot
+  container: Node
   key: string
@@ -73,0 +74,0 @@ nonce: string | void

types/index.d.ts

@@ -7,3 +7,3 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
   key: string
-  container: HTMLElement
+  container: Node
   speedy?: boolean
@@ -19,6 +19,6 @@ /** @deprecate use `insertionPoint` instead */
   tags: Array<HTMLStyleElement>
-  container: HTMLElement
+  container: Node
   key: string
   nonce?: string
-  before?: Element | null
+  before?: ChildNode | null
   constructor(options?: Options)
@@ -25,0 +25,0 @@ insert(rule: string): void

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

42380

increased by5.84%

Lines of code

768

increased by9.09%

Worsened metrics

Dev dependency count

2

increased by100%

No dependency changes