@emotion/sheet - npm Package Compare versions

Comparing version 0.8.1 to 10.0.0-really-unsafe-please-do-not-use.0

dist/index.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.emotionSheet={})}(this,function(e){"use strict";var t=function(){function e(e){this.isSpeedy=void 0===e.speedy||e.speedy,this.maxLength=this.isSpeedy?65e3:1,this.tags=[],this.ctr=0,this.nonce=e.nonce,this.key=e.key,this.container=e.container}var t=e.prototype;return t.insert=function(e){if(this.ctr%this.maxLength==0){var t,n=(s=this,(i=document.createElement("style")).setAttribute("data-emotion",s.key),void 0!==s.nonce&&i.setAttribute("nonce",s.nonce),i.appendChild(document.createTextNode("")),i);t=0===this.tags.length?this.before:this.tags[this.tags.length-1].nextSibling,this.container.insertBefore(n,t),this.tags.push(n)}var s,i,o=this.tags[this.tags.length-1];if(this.isSpeedy){var h=function(e){if(e.sheet)return e.sheet;for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]}(o);try{h.insertRule(e,h.cssRules.length)}catch(e){}}else o.appendChild(document.createTextNode(e));this.ctr++},t.flush=function(){this.tags.forEach(function(e){return e.parentNode.removeChild(e)}),this.tags=[],this.ctr=0},e}();e.StyleSheet=t,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.emotionSheet={})}(this,function(e){"use strict";var t=function(){function e(e){this.isSpeedy=void 0===e.speedy||e.speedy,this.tags=[],this.ctr=0,this.nonce=e.nonce,this.key=e.key,this.container=e.container}var t=e.prototype;return t.insert=function(e){if(this.ctr%(this.isSpeedy?65e3:1)==0){var t,n=(s=this,(i=document.createElement("style")).setAttribute("data-emotion",s.key),void 0!==s.nonce&&i.setAttribute("nonce",s.nonce),i.appendChild(document.createTextNode("")),i);t=0===this.tags.length?this.before:this.tags[this.tags.length-1].nextSibling,this.container.insertBefore(n,t),this.tags.push(n)}var s,i,o=this.tags[this.tags.length-1];if(this.isSpeedy){var r=function(e){if(e.sheet)return e.sheet;for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]}(o);try{var h=105===e.charCodeAt(1)&&64===e.charCodeAt(0);r.insertRule(e,h?0:r.cssRules.length)}catch(e){}}else o.appendChild(document.createTextNode(e));this.ctr++},t.flush=function(){this.tags.forEach(function(e){return e.parentNode.removeChild(e)}),this.tags=[],this.ctr=0},e}();e.StyleSheet=t,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=index.min.js.map

dist/sheet.browser.esm.js

 /*
 
+Based off glamor's StyleSheet, thanks Sunil ❤️
+
 high performance StyleSheet for css-in-js systems
@@ -7,11 +9,8 @@
 - uses `insertRule` for appending in production for *much* faster performance
-- 'polyfills' on server side
 
 // usage
 
-import StyleSheet from 'glamor/lib/sheet'
-let styleSheet = new StyleSheet()
+import { StyleSheet } from '@emotion/sheet'
 
-styleSheet.inject()
-- 'injects' the stylesheet into the page (or into memory if on server)
+let styleSheet = new StyleSheet({ key: '', container: document.head })
 
@@ -59,7 +58,3 @@ styleSheet.insert('#box { border: 1px solid red; }')
   function StyleSheet(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
-    // 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 = this.isSpeedy ? 65000 : 1;
+    this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
     this.tags = [];
@@ -76,3 +71,6 @@ this.ctr = 0;
   _proto.insert = function insert(rule) {
-    if (this.ctr % this.maxLength === 0) {
+    // 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) {
       var _tag = createStyleElement(this);
@@ -98,5 +96,19 @@
       try {
-        // this is the ultrafast version, works across browsers
+        // 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
         // the big drawback is that the css won't be editable in devtools
-        sheet.insertRule(rule, sheet.cssRules.length);
+
+        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
+        // _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);
       } catch (e) {
@@ -103,0 +115,0 @@ if (process.env.NODE_ENV !== 'production') {

dist/sheet.cjs.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-/*
-
-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
-- 'polyfills' on server side
-
-// usage
-
-import StyleSheet from 'glamor/lib/sheet'
-let styleSheet = new StyleSheet()
-
-styleSheet.inject()
-- 'injects' the stylesheet into the page (or into memory if on server)
-
-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) {
-    // $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];
-    }
-  }
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./sheet.cjs.prod.js');
+} else {
+  module.exports = require('./sheet.cjs.dev.js');
 }
-
-function createStyleElement(options) {
-  var tag = document.createElement('style');
-  tag.setAttribute('data-emotion', options.key);
-
-  if (options.nonce !== undefined) {
-    tag.setAttribute('nonce', options.nonce);
-  }
-
-  tag.appendChild(document.createTextNode(''));
-  return tag;
-}
-
-var StyleSheet =
-/*#__PURE__*/
-function () {
-  function StyleSheet(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
-    // 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 = this.isSpeedy ? 65000 : 1;
-    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;
-  }
-
-  var _proto = StyleSheet.prototype;
-
-  _proto.insert = function insert(rule) {
-    if (this.ctr % this.maxLength === 0) {
-      var _tag = createStyleElement(this);
-
-      var before;
-
-      if (this.tags.length === 0) {
-        before = this.before;
-      } else {
-        before = this.tags[this.tags.length - 1].nextSibling;
-      }
-
-      this.container.insertBefore(_tag, before);
-      this.tags.push(_tag);
-    }
-
-    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) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e);
-        }
-      }
-    } else {
-      tag.appendChild(document.createTextNode(rule));
-    }
-
-    this.ctr++;
-  };
-
-  _proto.flush = function flush() {
-    // $FlowFixMe
-    this.tags.forEach(function (tag) {
-      return tag.parentNode.removeChild(tag);
-    });
-    this.tags = [];
-    this.ctr = 0;
-  };
-
-  return StyleSheet;
-}();
-
-exports.StyleSheet = StyleSheet;

dist/sheet.esm.js

 /*
 
+Based off glamor's StyleSheet, thanks Sunil ❤️
+
 high performance StyleSheet for css-in-js systems
@@ -7,11 +9,8 @@
 - uses `insertRule` for appending in production for *much* faster performance
-- 'polyfills' on server side
 
 // usage
 
-import StyleSheet from 'glamor/lib/sheet'
-let styleSheet = new StyleSheet()
+import { StyleSheet } from '@emotion/sheet'
 
-styleSheet.inject()
-- 'injects' the stylesheet into the page (or into memory if on server)
+let styleSheet = new StyleSheet({ key: '', container: document.head })
 
@@ -59,7 +58,3 @@ styleSheet.insert('#box { border: 1px solid red; }')
   function StyleSheet(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
-    // 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 = this.isSpeedy ? 65000 : 1;
+    this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
     this.tags = [];
@@ -76,3 +71,6 @@ this.ctr = 0;
   _proto.insert = function insert(rule) {
-    if (this.ctr % this.maxLength === 0) {
+    // 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) {
       var _tag = createStyleElement(this);
@@ -98,5 +96,19 @@
       try {
-        // this is the ultrafast version, works across browsers
+        // 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
         // the big drawback is that the css won't be editable in devtools
-        sheet.insertRule(rule, sheet.cssRules.length);
+
+        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
+        // _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);
       } catch (e) {
@@ -103,0 +115,0 @@ if (process.env.NODE_ENV !== 'production') {

package.json

 {
   "name": "@emotion/sheet",
-  "version": "0.8.1",
+  "version": "10.0.0-really-unsafe-please-do-not-use.0",
   "description": "emotion's stylesheet",
@@ -28,3 +28,3 @@ "main": "dist/sheet.cjs.js",
   },
-  "gitHead": "94fed7652759a0f1962da66b922299398e39fe4d"
+  "gitHead": "a5f3825603dffd69fddb44bf5f29afd7c49eabd5"
 }

src/index.js

 // @flow
 /*
 
+Based off glamor's StyleSheet, thanks Sunil ❤️
+
 high performance StyleSheet for css-in-js systems
@@ -8,11 +10,8 @@
 - uses `insertRule` for appending in production for *much* faster performance
-- 'polyfills' on server side
 
 // usage
 
-import StyleSheet from 'glamor/lib/sheet'
-let styleSheet = new StyleSheet()
+import { StyleSheet } from '@emotion/sheet'
 
-styleSheet.inject()
-- 'injects' the stylesheet into the page (or into memory if on server)
+let styleSheet = new StyleSheet({ key: '', container: document.head })
 
@@ -48,4 +47,3 @@ styleSheet.insert('#box { border: 1px solid red; }')
   container: HTMLElement,
-  speedy?: boolean,
-  maxLength?: number
+  speedy?: boolean
 }
@@ -71,3 +69,2 @@
   container: HTMLElement
-  maxLength: number
   key: string
@@ -81,6 +78,2 @@ nonce: string | void
         : options.speedy
-    // maxLength 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
-    this.maxLength = this.isSpeedy ? 65000 : 1
     this.tags = []
@@ -94,3 +87,6 @@ this.ctr = 0
   insert(rule: string) {
-    if (this.ctr % this.maxLength === 0) {
+    // 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) {
       let tag = createStyleElement(this)
@@ -111,5 +107,23 @@ let before
       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, sheet.cssRules.length)
+        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
+          // _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
+        )
       } catch (e) {
@@ -116,0 +130,0 @@ if (process.env.NODE_ENV !== 'production') {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34401

increased by27.98%

Number of package files

13

increased by8.33%

Lines of code

621

increased by25.2%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes