@emotion/sheet - npm Package Compare versions

Comparing version 0.10.0-next.0 to 0.10.0-next.1

CHANGELOG.md

 # @emotion/sheet
 
+## 0.10.0-next.1
+
+### Minor Changes
+
+- [`dfe79aca`](https://github.com/emotion-js/emotion/commit/dfe79aca696fc688f960218b16afee197926fe71) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - Added `rehydrate` method which can be used for SSRed styles. They become a part of a sheet and can be flushed.
+
+### Patch Changes
+
+- [`1e4a741d`](https://github.com/emotion-js/emotion/commit/1e4a741de6424d3d9c1f3ca9695e1953bed3a194) [#1572](https://github.com/emotion-js/emotion/pull/1572) Thanks [@Andarist](https://github.com/Andarist)! - Removed mentions of `maxLength` option in types & docs as it has been removed some time ago.
+
 ## 0.10.0-next.0
@@ -4,0 +14,0 @@

dist/sheet.browser.cjs.js

@@ -61,2 +61,18 @@ 'use strict';
   function StyleSheet(options) {
+    var _this = this;
+
+    this._insertTag = function (tag) {
+      var before;
+
+      if (_this.tags.length === 0) {
+        before = _this.prepend ? _this.container.firstChild : _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 ? process.env.NODE_ENV === 'production' : options.speedy;
@@ -75,2 +91,6 @@ this.tags = [];
 
+  _proto.rehydrate = function rehydrate(nodes) {
+    nodes.forEach(this._insertTag);
+  };
+
   _proto.insert = function insert(rule) {
@@ -81,14 +101,3 @@ // the max length is how many rules we have per style tag, it's 65000 in speedy mode
     if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
-      var _tag = createStyleElement(this);
-
-      var before;
-
-      if (this.tags.length === 0) {
-        before = this.prepend ? this.container.firstChild : this.before;
-      } else {
-        before = this.tags[this.tags.length - 1].nextSibling;
-      }
-
-      this.container.insertBefore(_tag, before);
-      this.tags.push(_tag);
+      this._insertTag(createStyleElement(this));
     }
@@ -109,5 +118,3 @@
 
-        sheet.insertRule(rule, // we need to insert @import rules before anything else
-        // otherwise there will be an error
-        // technically this means that the @import rules will
+        sheet.insertRule(rule, // technically this means that the @import rules will // otherwise there will be an error // we need to insert @import rules before anything else
         // _usually_(not always since there could be multiple style tags)
@@ -114,0 +121,0 @@ // be the first ones in prod and generally later in dev

dist/sheet.browser.esm.js

@@ -57,2 +57,18 @@ /*
   function StyleSheet(options) {
+    var _this = this;
+
+    this._insertTag = function (tag) {
+      var before;
+
+      if (_this.tags.length === 0) {
+        before = _this.prepend ? _this.container.firstChild : _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 ? process.env.NODE_ENV === 'production' : options.speedy;
@@ -71,2 +87,6 @@ this.tags = [];
 
+  _proto.rehydrate = function rehydrate(nodes) {
+    nodes.forEach(this._insertTag);
+  };
+
   _proto.insert = function insert(rule) {
@@ -77,14 +97,3 @@ // the max length is how many rules we have per style tag, it's 65000 in speedy mode
     if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
-      var _tag = createStyleElement(this);
-
-      var before;
-
-      if (this.tags.length === 0) {
-        before = this.prepend ? this.container.firstChild : this.before;
-      } else {
-        before = this.tags[this.tags.length - 1].nextSibling;
-      }
-
-      this.container.insertBefore(_tag, before);
-      this.tags.push(_tag);
+      this._insertTag(createStyleElement(this));
     }
@@ -105,5 +114,3 @@
 
-        sheet.insertRule(rule, // we need to insert @import rules before anything else
-        // otherwise there will be an error
-        // technically this means that the @import rules will
+        sheet.insertRule(rule, // technically this means that the @import rules will // otherwise there will be an error // we need to insert @import rules before anything else
         // _usually_(not always since there could be multiple style tags)
@@ -110,0 +117,0 @@ // be the first ones in prod and generally later in dev

dist/sheet.cjs.dev.js

@@ -61,2 +61,18 @@ 'use strict';
   function StyleSheet(options) {
+    var _this = this;
+
+    this._insertTag = function (tag) {
+      var before;
+
+      if (_this.tags.length === 0) {
+        before = _this.prepend ? _this.container.firstChild : _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 ? process.env.NODE_ENV === 'production' : options.speedy;
@@ -75,2 +91,6 @@ this.tags = [];
 
+  _proto.rehydrate = function rehydrate(nodes) {
+    nodes.forEach(this._insertTag);
+  };
+
   _proto.insert = function insert(rule) {
@@ -81,14 +101,3 @@ // the max length is how many rules we have per style tag, it's 65000 in speedy mode
     if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
-      var _tag = createStyleElement(this);
-
-      var before;
-
-      if (this.tags.length === 0) {
-        before = this.prepend ? this.container.firstChild : this.before;
-      } else {
-        before = this.tags[this.tags.length - 1].nextSibling;
-      }
-
-      this.container.insertBefore(_tag, before);
-      this.tags.push(_tag);
+      this._insertTag(createStyleElement(this));
     }
@@ -109,5 +118,3 @@
 
-        sheet.insertRule(rule, // we need to insert @import rules before anything else
-        // otherwise there will be an error
-        // technically this means that the @import rules will
+        sheet.insertRule(rule, // technically this means that the @import rules will // otherwise there will be an error // we need to insert @import rules before anything else
         // _usually_(not always since there could be multiple style tags)
@@ -114,0 +121,0 @@ // be the first ones in prod and generally later in dev

dist/sheet.cjs.prod.js

@@ -20,13 +20,16 @@ "use strict";
   function StyleSheet(options) {
-    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, 
+    var _this = this;
+    this._insertTag = function(tag) {
+      var before;
+      before = 0 === _this.tags.length ? _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.before = null;
   }
   var _proto = StyleSheet.prototype;
-  return _proto.insert = function(rule) {
-    if (this.ctr % (this.isSpeedy ? 65e3 : 1) == 0) {
-      var before, _tag = createStyleElement(this);
-      before = 0 === this.tags.length ? this.prepend ? this.container.firstChild : this.before : this.tags[this.tags.length - 1].nextSibling, 
-      this.container.insertBefore(_tag, before), this.tags.push(_tag);
-    }
+  return _proto.rehydrate = function(nodes) {
+    nodes.forEach(this._insertTag);
+  }, _proto.insert = function(rule) {
+    this.ctr % (this.isSpeedy ? 65e3 : 1) == 0 && this._insertTag(createStyleElement(this));
     var tag = this.tags[this.tags.length - 1];
@@ -33,0 +36,0 @@ if (this.isSpeedy) {

dist/sheet.esm.js

@@ -57,2 +57,18 @@ /*
   function StyleSheet(options) {
+    var _this = this;
+
+    this._insertTag = function (tag) {
+      var before;
+
+      if (_this.tags.length === 0) {
+        before = _this.prepend ? _this.container.firstChild : _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 ? process.env.NODE_ENV === 'production' : options.speedy;
@@ -71,2 +87,6 @@ this.tags = [];
 
+  _proto.rehydrate = function rehydrate(nodes) {
+    nodes.forEach(this._insertTag);
+  };
+
   _proto.insert = function insert(rule) {
@@ -77,14 +97,3 @@ // the max length is how many rules we have per style tag, it's 65000 in speedy mode
     if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
-      var _tag = createStyleElement(this);
-
-      var before;
-
-      if (this.tags.length === 0) {
-        before = this.prepend ? this.container.firstChild : this.before;
-      } else {
-        before = this.tags[this.tags.length - 1].nextSibling;
-      }
-
-      this.container.insertBefore(_tag, before);
-      this.tags.push(_tag);
+      this._insertTag(createStyleElement(this));
     }
@@ -105,5 +114,3 @@
 
-        sheet.insertRule(rule, // we need to insert @import rules before anything else
-        // otherwise there will be an error
-        // technically this means that the @import rules will
+        sheet.insertRule(rule, // technically this means that the @import rules will // otherwise there will be an error // we need to insert @import rules before anything else
         // _usually_(not always since there could be multiple style tags)
@@ -110,0 +117,0 @@ // be the first ones in prod and generally later in dev

package.json

 {
   "name": "@emotion/sheet",
-  "version": "0.10.0-next.0",
+  "version": "0.10.0-next.1",
   "description": "emotion's stylesheet",
@@ -23,3 +23,3 @@ "main": "dist/sheet.cjs.js",
     "dist",
-    "types"
+    "types/*.d.ts"
   ],
@@ -26,0 +26,0 @@ "devDependencies": {

README.md

@@ -30,3 +30,3 @@ # @emotion/sheet
   speedy?: boolean
-  maxLength?: number
+  prepend?: boolean
 }
@@ -51,5 +51,5 @@ ```
 
-#### maxLength
+#### prepend
 
-This defines the number of rules that are inserted into each style tag. This generally shouldn't be modified.
+This defines where rules are inserted into the `container`. By default they are appended but this can be changed by using `prepend: true` option.
 
@@ -66,2 +66,6 @@ ### Methods
 
+#### rehydrate
+
+This method moves given style elements into sheet's container and put them into internal tags collection. It's can be used for SSRed styles.
+
 ### Example with all options
@@ -79,4 +83,3 @@
   key: 'some-key',
-  container,
-  maxLength: 20
+  container
 })
@@ -83,0 +86,0 @@

src/index.js

@@ -86,2 +86,18 @@ // @flow
   }
+
+  _insertTag = (tag: HTMLStyleElement) => {
+    let before
+    if (this.tags.length === 0) {
+      before = this.prepend ? this.container.firstChild : this.before
+    } else {
+      before = this.tags[this.tags.length - 1].nextSibling
+    }
+    this.container.insertBefore(tag, before)
+    this.tags.push(tag)
+  }
+
+  rehydrate(nodes: HTMLStyleElement[]) {
+    nodes.forEach(this._insertTag)
+  }
+
   insert(rule: string) {
@@ -92,11 +108,3 @@ // the max length is how many rules we have per style tag, it's 65000 in speedy mode
     if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
-      let tag = createStyleElement(this)
-      let before
-      if (this.tags.length === 0) {
-        before = this.prepend ? this.container.firstChild : this.before
-      } else {
-        before = this.tags[this.tags.length - 1].nextSibling
-      }
-      this.container.insertBefore(tag, before)
-      this.tags.push(tag)
+      this._insertTag(createStyleElement(this))
     }
@@ -117,6 +125,3 @@ const tag = this.tags[this.tags.length - 1]
         sheet.insertRule(
-          rule,
-          // we need to insert @import rules before anything else
-          // otherwise there will be an error
-          // technically this means that the @import rules will
+          rule, // technically this means that the @import rules will // otherwise there will be an error // we need to insert @import rules before anything else
           // _usually_(not always since there could be multiple style tags)
@@ -143,2 +148,3 @@ // be the first ones in prod and generally later in dev
   }
+
   flush() {
@@ -145,0 +151,0 @@ // $FlowFixMe

types/index.d.ts

@@ -17,3 +17,2 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
   container: HTMLElement
-  maxLength: number
   key: string
@@ -25,2 +24,3 @@ nonce?: string
   flush(): void
+  rehydrate(nodes: Array<HTMLStyleElement>): void
 }

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

91

increased by3.41%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

29213

decreased by-0.09%

Number of package files

12

decreased by-20%

Lines of code

650

decreased by-8.71%

No dependency changes