inject-stylesheet - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+# 4.0.0
+
+_Breaking Changes_
+
+- Ignore `DOMException` errors when calling `insertRule` while inserting stylesheet
+
 # 3.0.0
@@ -8,2 +14,3 @@
 - drop IE8 support
+- Throw any errors that are not `SyntaxError` when calling `insertRule` while inserting stylesheet
 
@@ -10,0 +17,0 @@ # 2.0.0

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectWithBlocklist = exports.injectWithAllowlist = void 0;
 var inject_stylesheet_1 = require("./lib/inject-stylesheet");
@@ -4,0 +5,0 @@ function injectWithAllowlist(styles, list) {

dist/lib/filter-style-keys.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterStyleKeys = void 0;
 function filterStyleKeys(styleObject, propertyList, isAllowlist) {
@@ -4,0 +5,0 @@ if (propertyList === void 0) { propertyList = []; }

dist/lib/filter-style-values.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterStyleValues = void 0;
 var valueFilters = [/;/, /@import/i, /expression/i, /url/i, /javascript/i];
@@ -4,0 +5,0 @@ function htmlEscape(html) {

dist/lib/inject-stylesheet.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectStylesheet = void 0;
 var validate_selector_1 = require("./validate-selector");
@@ -56,3 +57,3 @@ var filter_style_keys_1 = require("./filter-style-keys");
         catch (err) {
-            if (!(err instanceof SyntaxError)) {
+            if (!(err instanceof SyntaxError || err instanceof DOMException)) {
                 throw err;
@@ -59,0 +60,0 @@ }

dist/lib/validate-selector.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateSelector = void 0;
 function validateSelector(selector) {
@@ -4,0 +5,0 @@ if (selector.trim().length === 0) {

package.json

 {
   "name": "inject-stylesheet",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Create a style element with CSS properties, filtering input using a allowlist or blocklist",
@@ -22,9 +22,9 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@types/jest": "^25.2.1",
-    "eslint": "^6.8.0",
+    "@types/jest": "^26.0.4",
+    "eslint": "^7.4.0",
     "eslint-config-braintree": "^5.0.0-typescript-prep-rc.17",
-    "jest": "^25.3.0",
-    "prettier": "^2.0.4",
-    "ts-jest": "^25.3.1",
-    "typescript": "^3.8.3"
+    "jest": "^26.1.0",
+    "prettier": "^2.0.5",
+    "ts-jest": "^26.1.3",
+    "typescript": "^3.9.7"
   },
@@ -31,0 +31,0 @@ "jest": {

src/__tests__/inject-stylesheet.ts

 import { injectStylesheet } from "../lib/inject-stylesheet";
 import allowlist = require("./support/allowlist.json");
 
+import { mocked } from "ts-jest/utils";
+
 describe("injectStylesheet", () => {
@@ -97,2 +99,53 @@ let testContext: Record<string, HTMLStyleElement>;
   });
+
+  it.each`
+    errorType         | ErrorClass
+    ${"DOMException"} | ${DOMException}
+    ${"SyntaxError"}  | ${SyntaxError}
+  `("ignores $errorType errors when calling insertRule", ({ ErrorClass }) => {
+    const second = document.createElement("div");
+
+    second.id = "second";
+    document.body.appendChild(second);
+
+    jest.spyOn(CSSStyleSheet.prototype, "insertRule");
+    mocked(CSSStyleSheet.prototype.insertRule).mockImplementationOnce(
+      (str: string) => {
+        throw new ErrorClass(`fake dom exception from ${str}`);
+      }
+    );
+
+    testContext.element = injectStylesheet(
+      {
+        "#first": {
+          color: "orange",
+        },
+        "#second": {
+          color: "aqua",
+        },
+        "#third": {
+          color: "aqua",
+        },
+      },
+      allowlist,
+      true
+    );
+
+    expect(CSSStyleSheet.prototype.insertRule).toBeCalledTimes(3);
+    expect(CSSStyleSheet.prototype.insertRule).toBeCalledWith(
+      "#first{color:orange;}",
+      0
+    );
+    expect(CSSStyleSheet.prototype.insertRule).toBeCalledWith(
+      "#second{color:aqua;}",
+      0
+    );
+    expect(CSSStyleSheet.prototype.insertRule).toBeCalledWith(
+      "#third{color:aqua;}",
+      1
+    );
+    expect(getStyle(second, "color")).toBe("aqua");
+
+    mocked(CSSStyleSheet.prototype.insertRule).mockRestore();
+  });
 });

src/lib/inject-stylesheet.ts

@@ -84,3 +84,3 @@ import { validateSelector } from "./validate-selector";
     } catch (err) {
-      if (!(err instanceof SyntaxError)) {
+      if (!(err instanceof SyntaxError || err instanceof DOMException)) {
         throw err;
@@ -87,0 +87,0 @@ }

Fixed 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

Improved metrics

Total package byte prevSize

25443

increased by7.87%

Lines of code

639

increased by8.67%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes