From 4e03571ba5822f6208a68e62f29a5d25d310b581 Mon Sep 17 00:00:00 2001
From: Vlad Rindevich <vladrin@vaadin.com>
Date: Wed, 13 Oct 2021 06:50:26 +0300
Subject: [PATCH] Reimplement sharing system to address Safari issues (#88)

* refactor: use alternative implementation approach to fix safari issues

* docs: fix README badges

* chore: use 2kB for size-limit

* test: small fixes
---
 .size-limit.js               |  2 +-
 README.md                    |  4 +--
 karma.conf.js                |  4 +--
 src/ConstructedStyleSheet.ts | 68 +++++++++++++++++++++---------------
 src/safari.ts                | 42 ----------------------
 src/utils.ts                 | 15 +-------
 test/polyfill.test.ts        | 32 +++++++++++++++++
 7 files changed, 77 insertions(+), 90 deletions(-)
 delete mode 100644 src/safari.ts

diff --git a/.size-limit.js b/.size-limit.js
index 55aa10b..2aafdff 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -1,6 +1,6 @@
 module.exports = [
   {
     path: 'dist/adoptedStyleSheets.js',
-    limit: '2.5 kB',
+    limit: '2 kB',
   },
 ];
diff --git a/README.md b/README.md
index 922cf00..3557123 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
 # Constructible style sheets polyfill
 
-[![CI](https://github.com/calebdwilliams/construct-style-sheets/actions/workflows/ci/badge.svg)](https://github.com/calebdwilliams/construct-style-sheets/actions)
+[![CI](https://github.com/calebdwilliams/construct-style-sheets/actions/workflows/ci.yml/badge.svg)](https://github.com/calebdwilliams/construct-style-sheets/actions)
 [![npm version](https://img.shields.io/npm/v/construct-style-sheets-polyfill.svg?style=flat)](https://npmjs.org/package/construct-style-sheets-polyfill 'View this project on npm')
-[![codecov](https://codecov.io/gh/calebdwilliams/construct-style-sheets/branch/master/graph/badge.svg)](https://codecov.io/gh/calebdwilliams/construct-style-sheets)
+[![codecov](https://codecov.io/gh/calebdwilliams/construct-style-sheets/branch/main/graph/badge.svg)](https://codecov.io/gh/calebdwilliams/construct-style-sheets)
 
 This package is a polyfill for the [constructible style sheets/adopted style sheets specification](https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md). The full specificaiton is enabled by default in Google Chrome as of version 73.
 
diff --git a/karma.conf.js b/karma.conf.js
index 6bc4d11..303a4b9 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -163,14 +163,14 @@ module.exports = (config) => {
               isolatedModules: true,
               tsconfig: require.resolve('./tsconfig.test.json'),
             }),
-            rollupPluginInstrumentTsCode(),
+            coverage && rollupPluginInstrumentTsCode(),
             rollupPluginInjectCode({
               'index.js': {
                 line: 3,
                 code: "    if ('adoptedStyleSheets' in document) { return; }\n",
               },
             }),
-          ],
+          ].filter(Boolean),
           output: {
             format: 'iife',
             name: 'source',
diff --git a/src/ConstructedStyleSheet.ts b/src/ConstructedStyleSheet.ts
index ec5887f..e40f3a2 100644
--- a/src/ConstructedStyleSheet.ts
+++ b/src/ConstructedStyleSheet.ts
@@ -1,7 +1,6 @@
 import type Location from './Location';
-import {fixBrokenRules, hasBrokenRules} from './safari';
 import {_DOMException, bootstrapper, defineProperty} from './shared';
-import {clearRules, insertAllRules, rejectImports} from './utils';
+import {rejectImports} from './utils';
 
 const cssStyleSheetMethods = [
   'addRule',
@@ -45,12 +44,15 @@ export function isNonConstructedStyleSheetInstance(instance: object): boolean {
  */
 
 /**
- * Basic stylesheet is an sample stylesheet that contains all the CSS rules of
- * the current constructable stylesheet. The document or custom elements can
- * adopt constructable stylesheet; in this case, basic stylesheet's CSS rules
- * are reflected in document/custom element internal <style> elements.
+ * Basic style element is a sample element that contains all the CSS of the
+ * current constructable stylesheet. The document or custom elements can
+ * adopt constructable stylesheet; in this case, basic stylesheet's CSS is
+ * reflected in document/custom element internal <style> elements.
  */
-const $basicStyleSheet = new WeakMap<ConstructedStyleSheet, CSSStyleSheet>();
+const $basicStyleElement = new WeakMap<
+  ConstructedStyleSheet,
+  HTMLStyleElement
+>();
 
 /**
  * Contains all locations associated with the current ConstructedStyleSheet.
@@ -68,6 +70,20 @@ const $adoptersByLocation = new WeakMap<
   WeakMap<Location, HTMLStyleElement>
 >();
 
+type CSSStyleSheetMethodMeta = Readonly<{
+  args: IArguments;
+  method: string;
+}>;
+
+/**
+ * Contains all the methods called for the constructable style sheet. Used to
+ * reflect these methods in created or restyled `<style>` adopters.
+ */
+const $appliedMethods = new WeakMap<
+  ConstructedStyleSheet,
+  Array<CSSStyleSheetMethodMeta>
+>();
+
 /*
  * Package-level control functions
  */
@@ -111,8 +127,12 @@ export function restyleAdopter(
   adopter: HTMLStyleElement,
 ): void {
   requestAnimationFrame(() => {
-    clearRules(adopter.sheet!);
-    insertAllRules($basicStyleSheet.get(sheet)!, adopter.sheet!);
+    adopter.textContent = $basicStyleElement.get(sheet)!.textContent;
+    $appliedMethods
+      .get(sheet)!
+      .forEach((command) =>
+        adopter.sheet![command.method].apply(adopter.sheet!, command.args),
+      );
   });
 }
 
@@ -126,7 +146,7 @@ export function restyleAdopter(
  * properties are initialized.
  */
 function checkInvocationCorrectness(self: ConstructedStyleSheet) {
-  if (!$basicStyleSheet.has(self)) {
+  if (!$basicStyleElement.has(self)) {
     throw new TypeError('Illegal invocation');
   }
 }
@@ -149,9 +169,10 @@ function ConstructedStyleSheet(this: ConstructedStyleSheet) {
   bootstrapper.body.appendChild(style);
 
   // Init private properties
-  $basicStyleSheet.set(self, style.sheet!);
+  $basicStyleElement.set(self, style);
   $locations.set(self, []);
   $adoptersByLocation.set(self, new WeakMap());
+  $appliedMethods.set(self, []);
 }
 
 const proto = ConstructedStyleSheet.prototype;
@@ -175,11 +196,8 @@ proto.replaceSync = function replaceSync(contents) {
   if (typeof contents === 'string') {
     const self = this;
 
-    const style = $basicStyleSheet.get(self)!.ownerNode as HTMLStyleElement;
-    style.textContent = hasBrokenRules
-      ? fixBrokenRules(rejectImports(contents))
-      : rejectImports(contents);
-    $basicStyleSheet.set(self, style.sheet!);
+    $basicStyleElement.get(self)!.textContent = rejectImports(contents);
+    $appliedMethods.set(self, []);
 
     $locations.get(self)!.forEach((location) => {
       if (location.isConnected()) {
@@ -197,7 +215,7 @@ defineProperty(proto, 'cssRules', {
     // CSSStyleSheet.prototype.cssRules;
     checkInvocationCorrectness(this);
 
-    return $basicStyleSheet.get(this)!.cssRules;
+    return $basicStyleElement.get(this)!.sheet!.cssRules;
   },
 });
 
@@ -208,6 +226,8 @@ cssStyleSheetMethods.forEach((method) => {
 
     const args = arguments;
 
+    $appliedMethods.get(self)!.push({method, args});
+
     $locations.get(self)!.forEach((location) => {
       if (location.isConnected()) {
         // Type Note: If location is connected, adopter is already created; and
@@ -217,19 +237,9 @@ cssStyleSheetMethods.forEach((method) => {
       }
     });
 
-    if (hasBrokenRules) {
-      if (method === 'insertRule') {
-        args[0] = fixBrokenRules(args[0]);
-      }
-
-      if (method === 'addRule') {
-        args[1] = fixBrokenRules(args[1]);
-      }
-    }
-
-    const basic = $basicStyleSheet.get(self)!;
+    const basicSheet = $basicStyleElement.get(self)!.sheet!;
 
-    return basic[method].apply(basic, args);
+    return basicSheet[method].apply(basicSheet, args);
   };
 });
 
diff --git a/src/safari.ts b/src/safari.ts
deleted file mode 100644
index c4a8cbc..0000000
--- a/src/safari.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {bootstrapper} from './shared';
-
-export const hasBrokenRules = (function () {
-  const style = bootstrapper.createElement('style');
-  style.textContent = '.x{content:"y"}';
-  bootstrapper.body.appendChild(style);
-
-  return (style.sheet!.cssRules[0] as CSSStyleRule).style.content !== '"y"';
-})();
-
-const brokenRulePatterns = [/content:\s*["']/gm];
-
-/**
- * Adds a special symbol "%" to the broken rule that forces the internal Safari
- * CSS property string converter to add quotes around the value. This function
- * should be only used for the internal basic stylesheet hidden in the
- * bootstrapper because it pollutes the user content with the placeholder
- * symbols. Use the `getCssText` function to remove the placeholder from the
- * CSS string.
- *
- * @param content
- */
-export function fixBrokenRules(content: string): string {
-  return brokenRulePatterns.reduce(
-    (acc, pattern) => acc.replace(pattern, '$&%%%'),
-    content,
-  );
-}
-
-const placeholderPatterns = [/(content:\s*["'])%%%/gm];
-
-/**
- * Removes the placeholder added by `fixBrokenRules` function from the received
- * rule string.
- */
-export const getCssText = hasBrokenRules
-  ? (rule: CSSRule) =>
-      placeholderPatterns.reduce(
-        (acc, pattern) => acc.replace(pattern, '$1'),
-        rule.cssText,
-      )
-  : (rule: CSSRule) => rule.cssText;
diff --git a/src/utils.ts b/src/utils.ts
index d2ba613..5649bc1 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,5 +1,4 @@
-import {getCssText} from './safari';
-import {closedShadowRootRegistry, forEach} from './shared';
+import {closedShadowRootRegistry} from './shared';
 
 const importPattern = /@import.+?;?$/gm;
 
@@ -15,18 +14,6 @@ export function rejectImports(contents: string): string {
   return _contents.trim();
 }
 
-export function clearRules(sheet: CSSStyleSheet): void {
-  for (let i = 0; i < sheet.cssRules.length; i++) {
-    sheet.deleteRule(0);
-  }
-}
-
-export function insertAllRules(from: CSSStyleSheet, to: CSSStyleSheet): void {
-  forEach.call(from.cssRules, (rule, i) => {
-    to.insertRule(getCssText(rule), i);
-  });
-}
-
 /**
  * Cross-platform check for the element to be connected to the DOM
  */
diff --git a/test/polyfill.test.ts b/test/polyfill.test.ts
index a593b66..65be206 100644
--- a/test/polyfill.test.ts
+++ b/test/polyfill.test.ts
@@ -718,5 +718,37 @@ describe('Constructible Style Sheets polyfill', () => {
         checkContent();
       });
     });
+
+    describe('"background" rule', () => {
+      let css: CSSStyleSheet;
+      let element: HTMLElement;
+
+      const checkContent = () => checkGlobalCss(element, {background: ''});
+
+      beforeEach(async () => {
+        css = new CSSStyleSheet();
+        document.adoptedStyleSheets = [css];
+        element = await fixture('<div class="foo"></div>');
+      });
+
+      it('handles rule on replace', () => {
+        css.replaceSync(
+          '.foo { background: none !important; } .foo { background: blue; }',
+        );
+        checkContent();
+      });
+
+      it('handles rule on insertRule', () => {
+        css.insertRule('.foo { background: none !important; }', 0);
+        css.insertRule('.foo { background: blue; }', 1);
+        checkContent();
+      });
+
+      it('handles rule on addRule', () => {
+        css.addRule('.foo', 'background: none !important', 0);
+        css.addRule('.foo', 'background: blue', 1);
+        checkContent();
+      });
+    });
   });
 });