Improved constructable stylesheet detection & added cssStyleSheet fun…

…ction
asmcss · Apr 8, 2022 · 995837c · 995837c
1 parent 89de051
commit 995837c
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 20 deletions.
diff --git a/dist/assembler.cjs.js b/dist/assembler.cjs.js
diff --git a/dist/assembler.es.js b/dist/assembler.es.js
diff --git a/dist/assembler.js b/dist/assembler.js
diff --git a/dist/assembler.min.js b/dist/assembler.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asmcss/assembler",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "main": "dist/assembler.cjs.js",
   "module": "dist/assembler.es.js",
   "browser": "dist/assembler.js",

diff --git a/src/index.ts b/src/index.ts
@@ -27,6 +27,9 @@ declare global {
     interface Document {
         adoptedStyleSheets: CSSStyleSheet[];
     }
+    interface Window {
+        ShadyCSS?: any;
+    }
     interface CSSStyleSheet {
         replace(css: string);
         replaceSync(css: string);
@@ -36,12 +39,18 @@ declare global {
     }
 }
 
+
 let styleHandler: StyleHandler = null;
 let supportsConstructable = true;
+let supportsAdoptingStyleSheets = true;
 let settings = null;
 const observedShadowRoots = new WeakMap<ShadowRoot, boolean>();
 
 export function init(options?: {[key: string]: string}): boolean {
+    supportsAdoptingStyleSheets = window.ShadowRoot &&
+        (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
+        'adoptedStyleSheets' in Document.prototype &&
+        'replace' in CSSStyleSheet.prototype;
     settings = getUserSettings(options || document.currentScript.dataset);
 
     if (!settings.enabled) {
@@ -51,7 +60,7 @@ export function init(options?: {[key: string]: string}): boolean {
     let tracker: Set<string>;
     let stylesheet: CSSStyleSheet;
 
-    if (settings.constructable && document.adoptedStyleSheets && Object.isFrozen(document.adoptedStyleSheets)) {
+    if (supportsAdoptingStyleSheets && settings.constructable) {
         stylesheet = new CSSStyleSheet();
         if (settings.generate) {
             const generated = generateStyles(settings);
@@ -80,12 +89,12 @@ export function init(options?: {[key: string]: string}): boolean {
     return true;
 }
 
-export function handleShadowRoot(shadowRoot: ShadowRoot): boolean {
+export function handleShadowRoot(shadowRoot: ShadowRoot, add: boolean = true): boolean {
     if (styleHandler === null) {
         init();
     }
 
-    if (!supportsConstructable || !shadowRoot.adoptedStyleSheets || !Object.isFrozen(shadowRoot.adoptedStyleSheets)) {
+    if (!supportsAdoptingStyleSheets || !supportsConstructable) {
         return false;
     }
 
@@ -95,13 +104,22 @@ export function handleShadowRoot(shadowRoot: ShadowRoot): boolean {
 
     observedShadowRoots.set(shadowRoot, true);
 
-    shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styleHandler.style];
+    if (add) {
+        shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styleHandler.style];
+    }
 
     observeShadow(shadowRoot, styleHandler);
 
     return true;
 }
 
+export function cssStyleSheet(): CSSStyleSheet {
+    if (styleHandler === null) {
+        init();
+    }
+    return styleHandler.style;
+}
+
 if (typeof window !== 'undefined') {
     init();
 }

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -4,6 +4,9 @@ declare global {
     interface Document {
         adoptedStyleSheets: CSSStyleSheet[];
     }
+    interface Window {
+        ShadyCSS?: any;
+    }
     interface CSSStyleSheet {
         replace(css: string): any;
         replaceSync(css: string): any;
@@ -15,4 +18,5 @@ declare global {
 export declare function init(options?: {
     [key: string]: string;
 }): boolean;
-export declare function handleShadowRoot(shadowRoot: ShadowRoot): boolean;
+export declare function handleShadowRoot(shadowRoot: ShadowRoot, add?: boolean): boolean;
+export declare function cssStyleSheet(): CSSStyleSheet;