@emotion/sheet - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/emotion-sheet.cjs.d.ts

 export * from "./declarations/src/index";
-//# sourceMappingURL=emotion-sheet.cjs.d.ts.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW1vdGlvbi1zaGVldC5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

dist/emotion-sheet.cjs.js

 'use strict';
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./emotion-sheet.cjs.prod.js");
-} else {
-  module.exports = require("./emotion-sheet.cjs.dev.js");
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var isDevelopment = false;
+
+/*
+
+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
+
+*/
+
+function sheetForTag(tag) {
+  if (tag.sheet) {
+    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) {
+      return document.styleSheets[i];
+    }
+  } // this function should always return with a value
+  // TS can't understand it though so we make it stop complaining here
+
+
+  return undefined;
 }
+
+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(''));
+  tag.setAttribute('data-s', '');
+  return tag;
+}
+
+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) {
+      var before;
+
+      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 ? !isDevelopment : 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;
+
+  _proto.hydrate = function hydrate(nodes) {
+    nodes.forEach(this._insertTag);
+  };
+
+  _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) {
+      }
+    } else {
+      tag.appendChild(document.createTextNode(rule));
+    }
+
+    this.ctr++;
+  };
+
+  _proto.flush = function flush() {
+    this.tags.forEach(function (tag) {
+      var _tag$parentNode;
+
+      return (_tag$parentNode = tag.parentNode) == null ? void 0 : _tag$parentNode.removeChild(tag);
+    });
+    this.tags = [];
+    this.ctr = 0;
+  };
+
+  return StyleSheet;
+}();
+
+exports.StyleSheet = StyleSheet;

dist/emotion-sheet.esm.js

@@ -0,1 +1,3 @@
+var isDevelopment = false;
+
 /*
@@ -23,2 +25,3 @@
 */
+
 function sheetForTag(tag) {
@@ -81,3 +84,3 @@ if (tag.sheet) {
 
-    this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
+    this.isSpeedy = options.speedy === undefined ? !isDevelopment : options.speedy;
     this.tags = [];
@@ -110,15 +113,2 @@ this.ctr = 0;
 
-    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) {
@@ -132,5 +122,2 @@ var sheet = sheetForTag(tag);
       } catch (e) {
-        if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear|-ms-expand|-ms-reveal){/.test(rule)) {
-          console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
-        }
       }
@@ -152,6 +139,2 @@ } else {
     this.ctr = 0;
-
-    if (process.env.NODE_ENV !== 'production') {
-      this._alreadyInsertedOrderInsensitiveRule = false;
-    }
   };
@@ -158,0 +141,0 @@

package.json

 {
   "name": "@emotion/sheet",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "emotion's stylesheet",
   "main": "dist/emotion-sheet.cjs.js",
   "module": "dist/emotion-sheet.esm.js",
-  "browser": {
-    "./dist/emotion-sheet.esm.js": "./dist/emotion-sheet.browser.esm.js"
-  },
   "types": "dist/emotion-sheet.cjs.d.ts",
   "exports": {
     ".": {
-      "module": {
-        "browser": "./dist/emotion-sheet.browser.esm.js",
-        "default": "./dist/emotion-sheet.esm.js"
+      "types": {
+        "import": "./dist/emotion-sheet.cjs.mjs",
+        "default": "./dist/emotion-sheet.cjs.js"
       },
+      "development": {
+        "module": "./dist/emotion-sheet.development.esm.js",
+        "import": "./dist/emotion-sheet.development.cjs.mjs",
+        "default": "./dist/emotion-sheet.development.cjs.js"
+      },
+      "module": "./dist/emotion-sheet.esm.js",
       "import": "./dist/emotion-sheet.cjs.mjs",
@@ -22,2 +25,8 @@ "default": "./dist/emotion-sheet.cjs.js"
   },
+  "imports": {
+    "#is-development": {
+      "development": "./src/conditions/true.ts",
+      "default": "./src/conditions/false.ts"
+    }
+  },
   "license": "MIT",
@@ -38,10 +47,3 @@ "scripts": {
     "typescript": "^5.4.5"
-  },
-  "preconstruct": {
-    "exports": {
-      "envConditions": [
-        "browser"
-      ]
-    }
   }
 }

src/index.ts

@@ -0,1 +1,2 @@
+import isDevelopment from '#is-development'
 /*
@@ -78,5 +79,3 @@
     this.isSpeedy =
-      options.speedy === undefined
-        ? process.env.NODE_ENV === 'production'
-        : options.speedy
+      options.speedy === undefined ? !isDevelopment : options.speedy
     this.tags = []
@@ -123,3 +122,3 @@ this.ctr = 0
 
-    if (process.env.NODE_ENV !== 'production') {
+    if (isDevelopment) {
       const isImportRule =
@@ -151,3 +150,3 @@ rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105
         if (
-          process.env.NODE_ENV !== 'production' &&
+          isDevelopment &&
           !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear|-ms-expand|-ms-reveal){/.test(
@@ -173,3 +172,3 @@ rule
     this.ctr = 0
-    if (process.env.NODE_ENV !== 'production') {
+    if (isDevelopment) {
       this._alreadyInsertedOrderInsensitiveRule = false
@@ -176,0 +175,0 @@ }

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

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

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

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

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

29483

decreased by-4.1%

Lines of code

631

decreased by-2.17%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes