@descope-ui/common 0.0.10 → 0.0.12

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.12](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.11...@descope-ui/common-0.0.12) (2025-05-28)
+
+## [0.0.11](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.10...@descope-ui/common-0.0.11) (2025-04-29)
+
+
+### Bug Fixes
+
+* CSSStyleSheet fallback for older browser ([#639](https://github.com/descope/web-components-ui/issues/639)) ([1ff86cc](https://github.com/descope/web-components-ui/commit/1ff86ccd6d5a00de025207d99f034772b92ac910))
+
 ## [0.0.10](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.9...@descope-ui/common-0.0.10) (2025-04-16)
 
 ## [0.0.9](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.8...@descope-ui/common-0.0.9) (2025-03-06)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/common",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "dependencies": {
     "element-internals-polyfill": "^1.3.9",
     "color": "^4.2.3",

package/src/componentsHelpers/index.js

@@ -45,19 +45,19 @@ export const observeChildren = (ele, callback) => {
 
 const createSyncAttrsCb =
   (srcEle, targetEle, mapAttrs = {}) =>
-  (attrNames) => {
-    attrNames.forEach((attrName) => {
-      const targetAttrName = mapAttrs[attrName] || attrName;
-      const srcAttrVal = srcEle.getAttribute(attrName);
-      if (srcAttrVal !== null) {
-        if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
-          targetEle.setAttribute(targetAttrName, srcAttrVal);
+    (attrNames) => {
+      attrNames.forEach((attrName) => {
+        const targetAttrName = mapAttrs[attrName] || attrName;
+        const srcAttrVal = srcEle.getAttribute(attrName);
+        if (srcAttrVal !== null) {
+          if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+            targetEle.setAttribute(targetAttrName, srcAttrVal);
+          }
+        } else {
+          targetEle.removeAttribute(targetAttrName);
         }
-      } else {
-        targetEle.removeAttribute(targetAttrName);
-      }
-    });
-  };
+      });
+    };
 
 export const syncAttrs = (ele1, ele2, options) => {
   observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
@@ -94,8 +94,16 @@ export const forwardProps = (src, target, props = []) => {
   Object.defineProperties(target, config);
 };
 
-export const injectStyle = (cssString, ref, {prepend = false} = {}) => {
-  const style = new CSSStyleSheet();
+export const injectStyle = (cssString, ref, { prepend = false } = {}) => {
+
+  let style;
+  try {
+    style = new CSSStyleSheet();
+  } catch (e) {
+    // fallback for browsers that don't support CSSStyleSheet
+    return generateStyleTagFallback(cssString, ref, { prepend });
+  }
+
   const _ref = ref?.shadowRoot || ref;
   if (cssString) {
     style.replaceSync(cssString);
@@ -109,3 +117,33 @@ export const injectStyle = (cssString, ref, {prepend = false} = {}) => {
 
   return style;
 }
+
+// we should mimic the CSSStyleSheet API for the fns we are using
+class CSSStyleSheetMock {
+  constructor(cssString, ref, { prepend = false } = {}) {
+    this.styleEle = document.createElement('style');
+    this.styleEle.textContent = cssString;
+    this.styleEle.setAttribute('nonce', window.DESCOPE_NONCE);
+    this.ref = ref?.shadowRoot || ref;
+
+    if (!this.ref) {
+      return
+    }
+
+    if (prepend) {
+      this.ref.prepend(this.styleEle);
+    } else {
+      this.ref.append(this.styleEle);
+    }
+  }
+
+  replaceSync(cssString) {
+    this.styleEle.textContent = cssString;
+  }
+
+  get cssRules() {
+    return this.styleEle.sheet?.cssRules;
+  }
+}
+
+const generateStyleTagFallback = (cssString, ref, { prepend = false } = {}) => new CSSStyleSheetMock(cssString, ref, { prepend });

package/src/componentsMixins/mixins/createStyleMixin/index.js

@@ -1,8 +1,19 @@
-import { BASE_THEME_SECTION, CSS_SELECTOR_SPECIFIER_MULTIPLY } from '../../../constants';
+import {
+  BASE_THEME_SECTION,
+  CSS_SELECTOR_SPECIFIER_MULTIPLY,
+} from '../../../constants';
 import { kebabCaseJoin } from '../../../utils';
-import { getCssVarName, injectStyle, observeAttributes } from '../../../componentsHelpers';
+import {
+  getCssVarName,
+  injectStyle,
+  observeAttributes,
+} from '../../../componentsHelpers';
 import { componentsThemeManager } from '../../../themeHelpers';
-import { createStyle, createCssVarsList, createClassSelectorSpecifier } from './helpers';
+import {
+  createStyle,
+  createCssVarsList,
+  createClassSelectorSpecifier,
+} from './helpers';
 
 const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
 
@@ -54,8 +65,10 @@ export const createStyleMixin =
         this.#baseSelector = baseSelector ?? this.baseSelector;
         this.#getRootElement = getRootElement;
 
-        this.#styleAttributes = Object.keys(CustomStyleMixinClass.cssVarList).map((key) =>
-          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
+        this.#styleAttributes = Object.keys(
+          CustomStyleMixinClass.cssVarList,
+        ).map((key) =>
+          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key),
         );
       }
 
@@ -65,14 +78,23 @@ export const createStyleMixin =
       }
 
       #onComponentThemeChange() {
-        this.#themeStyleEle.replaceSync(this.#componentTheme[this.#themeSection]);
+        this.#themeStyleEle.replaceSync(
+          this.#componentTheme[this.#themeSection],
+        );
+        this.currentThemeName = componentsThemeManager.currentThemeName;
+        // `onThemeChange` - This function is a hook for the component, so it can be implemented in the component
+        // and is executed once theme is change.
+        this.onThemeChange?.(componentsThemeManager.currentThemeName);
       }
 
       #createComponentTheme() {
-        this.#themeStyleEle = injectStyle('', this.#rootElement, { prepend: true });
-        this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(
-          this.#onComponentThemeChange.bind(this)
-        );
+        this.#themeStyleEle = injectStyle('', this.#rootElement, {
+          prepend: true,
+        });
+        this.#disconnectThemeManager =
+          componentsThemeManager.onCurrentThemeChange(
+            this.#onComponentThemeChange.bind(this),
+          );
         this.#onComponentThemeChange();
       }
 
@@ -80,10 +102,13 @@ export const createStyleMixin =
         if (this.#styleAttributes.length) {
           const classSpecifier = createClassSelectorSpecifier(
             componentName,
-            CSS_SELECTOR_SPECIFIER_MULTIPLY
+            CSS_SELECTOR_SPECIFIER_MULTIPLY,
           );
 
-          this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
+          this.#overrideStyleEle = injectStyle(
+            `:host(${classSpecifier}) {}`,
+            this.#rootElement,
+          );
         }
       }
 
@@ -94,7 +119,7 @@ export const createStyleMixin =
 
         const varName = getCssVarName(
           componentName,
-          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
+          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), ''),
         );
 
         if (value) style?.setProperty(varName, value);
@@ -117,7 +142,7 @@ export const createStyleMixin =
           const style = createStyle(
             kebabCaseJoin(componentName, this.#componentNameSuffix),
             this.#baseSelector,
-            mappings
+            mappings,
           );
 
           injectStyle(style, this.#rootElement, { prepend: true });
@@ -125,13 +150,16 @@ export const createStyleMixin =
       }
 
       #addClassName(className) {
-        (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
+        (this.#rootElement.classList || this.#rootElement.host.classList).add(
+          className,
+        );
       }
 
       async init() {
         super.init?.();
         if (this.shadowRoot.isConnected) {
-          this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
+          this.#rootElement =
+            (await this.#getRootElement?.(this)) || this.shadowRoot;
 
           this.#addClassName(componentName);