@emotion/sheet - npm Package Compare versions

Comparing version 0.10.0-next.1 to 1.0.0-next.2

CHANGELOG.md

 # @emotion/sheet
 
+## 1.0.0-next.2
+
+### Major Changes
+
+- [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - `@import` rules are no longer special-cased - they no longer are always inserted at the beginning of the stylesheet. The responsibility to put them first has been moved to a consumer of this package.
+
+### Patch Changes
+
+- [`91046a8c`](https://github.com/emotion-js/emotion/commit/91046a8c188327a65daac61583ef3c4458f30afb) [#1900](https://github.com/emotion-js/emotion/pull/1900) Thanks [@Andarist](https://github.com/Andarist)! - Renamed `rehydrate` method to `hydrate` to align naming to what is already used in Emotion and React itself.
+
 ## 0.10.0-next.1
@@ -19,2 +29,8 @@
 
+## 0.9.4
+
+### Patch Changes
+
+- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file
+
 ## 0.9.3
@@ -21,0 +37,0 @@

dist/sheet.browser.cjs.js

@@ -90,3 +90,3 @@ 'use strict';
 
-  _proto.rehydrate = function rehydrate(nodes) {
+  _proto.hydrate = function hydrate(nodes) {
     nodes.forEach(this._insertTag);
@@ -105,2 +105,14 @@ };
 
+    if (process.env.NODE_ENV !== 'production') {
+      var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
+
+      if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {
+        // this would only cause problem in speedy mode
+        // but we don't want enabling speedy to affect the observable behavior
+        // so we report this error at all times
+        console.error("You're attempting to insert the following rule:\n" + rule + '\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');
+      }
+      this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;
+    }
+
     if (this.isSpeedy) {
@@ -110,20 +122,8 @@ var sheet = sheetForTag(tag);
       try {
-        // this is a really hot path
-        // we check the second character first because having "i"
-        // as the second character will happen less often than
-        // having "@" as the first character
-        var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers
+        // this is the ultrafast version, works across browsers
         // the big drawback is that the css won't be editable in devtools
-
-        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)
-        // be the first ones in prod and generally later in dev
-        // this shouldn't really matter in the real world though
-        // @import is generally only used for font faces from google fonts and etc.
-        // so while this could be technically correct then it would be slower and larger
-        // for a tiny bit of correctness that won't matter in the real world
-        isImportRule ? 0 : sheet.cssRules.length);
+        sheet.insertRule(rule, sheet.cssRules.length);
       } catch (e) {
         if (process.env.NODE_ENV !== 'production') {
-          console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e);
+          console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
         }
@@ -145,2 +145,6 @@ }
     this.ctr = 0;
+
+    if (process.env.NODE_ENV !== 'production') {
+      this._alreadyInsertedOrderInsensitiveRule = false;
+    }
   };
@@ -147,0 +151,0 @@

dist/sheet.browser.esm.js

@@ -86,3 +86,3 @@ /*
 
-  _proto.rehydrate = function rehydrate(nodes) {
+  _proto.hydrate = function hydrate(nodes) {
     nodes.forEach(this._insertTag);
@@ -101,2 +101,14 @@ };
 
+    if (process.env.NODE_ENV !== 'production') {
+      var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
+
+      if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {
+        // this would only cause problem in speedy mode
+        // but we don't want enabling speedy to affect the observable behavior
+        // so we report this error at all times
+        console.error("You're attempting to insert the following rule:\n" + rule + '\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');
+      }
+      this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;
+    }
+
     if (this.isSpeedy) {
@@ -106,20 +118,8 @@ var sheet = sheetForTag(tag);
       try {
-        // this is a really hot path
-        // we check the second character first because having "i"
-        // as the second character will happen less often than
-        // having "@" as the first character
-        var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers
+        // this is the ultrafast version, works across browsers
         // the big drawback is that the css won't be editable in devtools
-
-        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)
-        // be the first ones in prod and generally later in dev
-        // this shouldn't really matter in the real world though
-        // @import is generally only used for font faces from google fonts and etc.
-        // so while this could be technically correct then it would be slower and larger
-        // for a tiny bit of correctness that won't matter in the real world
-        isImportRule ? 0 : sheet.cssRules.length);
+        sheet.insertRule(rule, sheet.cssRules.length);
       } catch (e) {
         if (process.env.NODE_ENV !== 'production') {
-          console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e);
+          console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
         }
@@ -141,2 +141,6 @@ }
     this.ctr = 0;
+
+    if (process.env.NODE_ENV !== 'production') {
+      this._alreadyInsertedOrderInsensitiveRule = false;
+    }
   };
@@ -143,0 +147,0 @@

dist/sheet.cjs.dev.js

@@ -90,3 +90,3 @@ 'use strict';
 
-  _proto.rehydrate = function rehydrate(nodes) {
+  _proto.hydrate = function hydrate(nodes) {
     nodes.forEach(this._insertTag);
@@ -105,2 +105,14 @@ };
 
+    if (process.env.NODE_ENV !== 'production') {
+      var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
+
+      if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {
+        // this would only cause problem in speedy mode
+        // but we don't want enabling speedy to affect the observable behavior
+        // so we report this error at all times
+        console.error("You're attempting to insert the following rule:\n" + rule + '\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');
+      }
+      this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;
+    }
+
     if (this.isSpeedy) {
@@ -110,20 +122,8 @@ var sheet = sheetForTag(tag);
       try {
-        // this is a really hot path
-        // we check the second character first because having "i"
-        // as the second character will happen less often than
-        // having "@" as the first character
-        var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers
+        // this is the ultrafast version, works across browsers
         // the big drawback is that the css won't be editable in devtools
-
-        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)
-        // be the first ones in prod and generally later in dev
-        // this shouldn't really matter in the real world though
-        // @import is generally only used for font faces from google fonts and etc.
-        // so while this could be technically correct then it would be slower and larger
-        // for a tiny bit of correctness that won't matter in the real world
-        isImportRule ? 0 : sheet.cssRules.length);
+        sheet.insertRule(rule, sheet.cssRules.length);
       } catch (e) {
         if (process.env.NODE_ENV !== 'production') {
-          console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e);
+          console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
         }
@@ -145,2 +145,6 @@ }
     this.ctr = 0;
+
+    if (process.env.NODE_ENV !== 'production') {
+      this._alreadyInsertedOrderInsensitiveRule = false;
+    }
   };
@@ -147,0 +151,0 @@

dist/sheet.cjs.prod.js

@@ -30,3 +30,3 @@ "use strict";
   var _proto = StyleSheet.prototype;
-  return _proto.rehydrate = function(nodes) {
+  return _proto.hydrate = function(nodes) {
     nodes.forEach(this._insertTag);
@@ -39,4 +39,3 @@ }, _proto.insert = function(rule) {
       try {
-        var isImportRule = 105 === rule.charCodeAt(1) && 64 === rule.charCodeAt(0);
-        sheet.insertRule(rule, isImportRule ? 0 : sheet.cssRules.length);
+        sheet.insertRule(rule, sheet.cssRules.length);
       } catch (e) {}
@@ -43,0 +42,0 @@ } else tag.appendChild(document.createTextNode(rule));

dist/sheet.esm.js

@@ -86,3 +86,3 @@ /*
 
-  _proto.rehydrate = function rehydrate(nodes) {
+  _proto.hydrate = function hydrate(nodes) {
     nodes.forEach(this._insertTag);
@@ -101,2 +101,14 @@ };
 
+    if (process.env.NODE_ENV !== 'production') {
+      var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
+
+      if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {
+        // this would only cause problem in speedy mode
+        // but we don't want enabling speedy to affect the observable behavior
+        // so we report this error at all times
+        console.error("You're attempting to insert the following rule:\n" + rule + '\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');
+      }
+      this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;
+    }
+
     if (this.isSpeedy) {
@@ -106,20 +118,8 @@ var sheet = sheetForTag(tag);
       try {
-        // this is a really hot path
-        // we check the second character first because having "i"
-        // as the second character will happen less often than
-        // having "@" as the first character
-        var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers
+        // this is the ultrafast version, works across browsers
         // the big drawback is that the css won't be editable in devtools
-
-        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)
-        // be the first ones in prod and generally later in dev
-        // this shouldn't really matter in the real world though
-        // @import is generally only used for font faces from google fonts and etc.
-        // so while this could be technically correct then it would be slower and larger
-        // for a tiny bit of correctness that won't matter in the real world
-        isImportRule ? 0 : sheet.cssRules.length);
+        sheet.insertRule(rule, sheet.cssRules.length);
       } catch (e) {
         if (process.env.NODE_ENV !== 'production') {
-          console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e);
+          console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
         }
@@ -141,2 +141,6 @@ }
     this.ctr = 0;
+
+    if (process.env.NODE_ENV !== 'production') {
+      this._alreadyInsertedOrderInsensitiveRule = false;
+    }
   };
@@ -143,0 +147,0 @@

package.json

 {
   "name": "@emotion/sheet",
-  "version": "0.10.0-next.1",
+  "version": "1.0.0-next.2",
   "description": "emotion's stylesheet",
@@ -5,0 +5,0 @@ "main": "dist/sheet.cjs.js",

README.md

@@ -64,3 +64,3 @@ # @emotion/sheet
 
-#### rehydrate
+#### hydrate
 
@@ -67,0 +67,0 @@ 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.

src/index.js

@@ -98,3 +98,3 @@ // @flow
 
-  rehydrate(nodes: HTMLStyleElement[]) {
+  hydrate(nodes: HTMLStyleElement[]) {
     nodes.forEach(this._insertTag)
@@ -112,26 +112,30 @@ }
 
+    if (process.env.NODE_ENV !== 'production') {
+      const isImportRule =
+        rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105
+
+      if (isImportRule && (this: any)._alreadyInsertedOrderInsensitiveRule) {
+        // this would only cause problem in speedy mode
+        // but we don't want enabling speedy to affect the observable behavior
+        // so we report this error at all times
+        console.error(
+          `You're attempting to insert the following rule:\n` +
+            rule +
+            '\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.'
+        )
+      }
+
+      ;(this: any)._alreadyInsertedOrderInsensitiveRule =
+        (this: any)._alreadyInsertedOrderInsensitiveRule || !isImportRule
+    }
+
     if (this.isSpeedy) {
       const sheet = sheetForTag(tag)
       try {
-        // this is a really hot path
-        // we check the second character first because having "i"
-        // as the second character will happen less often than
-        // having "@" as the first character
-        let isImportRule =
-          rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64
         // this is the ultrafast version, works across browsers
         // the big drawback is that the css won't be editable in devtools
-        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)
-          // be the first ones in prod and generally later in dev
-          // this shouldn't really matter in the real world though
-          // @import is generally only used for font faces from google fonts and etc.
-          // so while this could be technically correct then it would be slower and larger
-          // for a tiny bit of correctness that won't matter in the real world
-          isImportRule ? 0 : sheet.cssRules.length
-        )
+        sheet.insertRule(rule, sheet.cssRules.length)
       } catch (e) {
         if (process.env.NODE_ENV !== 'production') {
-          console.warn(
+          console.error(
             `There was a problem inserting the following rule: "${rule}"`,
@@ -153,3 +157,6 @@ e
     this.ctr = 0
+    if (process.env.NODE_ENV !== 'production') {
+      ;(this: any)._alreadyInsertedOrderInsensitiveRule = false
+    }
   }
 }

types/index.d.ts

@@ -23,3 +23,3 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
   flush(): void
-  rehydrate(nodes: Array<HTMLStyleElement>): void
+  hydrate(nodes: Array<HTMLStyleElement>): 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

31157

increased by6.65%

Number of package files

13

increased by8.33%

Lines of code

661

increased by1.69%

No dependency changes