@descope-ui/common 2.1.16 → 2.1.18

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.1.18](https://github.com/descope/web-components-ui/compare/web-components-ui-2.1.17...web-components-ui-2.1.18) (2025-10-26)
+
+## [2.1.17](https://github.com/descope/web-components-ui/compare/web-components-ui-2.1.16...web-components-ui-2.1.17) (2025-10-20)
+
+
+### Bug Fixes
+
+* issue 12430 ([#757](https://github.com/descope/web-components-ui/issues/757)) ([a8d2701](https://github.com/descope/web-components-ui/commit/a8d2701ace8ee9910d445689f5376505add76cfe))
+
 ## [2.1.16](https://github.com/descope/web-components-ui/compare/web-components-ui-2.1.15...web-components-ui-2.1.16) (2025-10-19)
 
 ## [2.1.15](https://github.com/descope/web-components-ui/compare/web-components-ui-2.1.14...web-components-ui-2.1.15) (2025-10-16)

package/package.json

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

package/src/componentsHelpers/index.js

@@ -126,6 +126,10 @@ export const injectStyle = (cssString, ref, { prepend = false } = {}) => {
     _ref.adoptedStyleSheets = adoptedStyleSheets;
   }
 
+  if(cssString && !style.cssRules[0]?.style){
+    console.warn(`No style rules were created, make sure the CSS is valid:\n "${cssString}"`)
+  }
+
   return style;
 };
 

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

@@ -1,16 +1,25 @@
 import { camelCaseJoin, isFunction, kebabCase, kebabCaseJoin } from '../../../utils';
 import { getCssVarName } from '../../../componentsHelpers';
 
-const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+const getOverrideCssVarName = (origVarName) => `${origVarName}__override`;
+
+const createCssVar = (varName, fallback, createOverride = false) => {
+  const ret = `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+
+  if (!createOverride) return ret;
+
+  // we are generating an override css var to allow override with fallback to the default var
+  const overrideVarName = getOverrideCssVarName(varName);
+  return `var(${overrideVarName}, ${ret})`;
+};
 
 const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
   isFunction(relativeSelectorOrSelectorFn)
     ? relativeSelectorOrSelectorFn(baseSelector)
-    : `${baseSelector}${
-        /^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
-          ? ` ${relativeSelectorOrSelectorFn}`
-          : relativeSelectorOrSelectorFn
-      }`;
+    : `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+      ? ` ${relativeSelectorOrSelectorFn}`
+      : relativeSelectorOrSelectorFn
+    }`;
 
 class StyleBuilder {
   constructor() {
@@ -50,6 +59,7 @@ const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin(o
 
 export const createStyle = (componentName, baseSelector, mappings) => {
   const style = new StyleBuilder();
+  // we generate all the fallback vars recursively
   const createFallbackVar = (fallback, origVarName) => {
     if (!fallback) return '';
     if (typeof fallback === 'string') return fallback;
@@ -69,7 +79,7 @@ export const createStyle = (componentName, baseSelector, mappings) => {
         style.add(
           createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
           isFunction(property) ? property() : property,
-          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
+          createCssVar(cssVarName, fallbackValue, true) + (important ? '!important' : '')
         );
       }
     );
@@ -96,6 +106,8 @@ export const createCssVarsList = (componentName, mappings) =>
     return Object.assign(
       acc,
       { [attr]: varName },
+      // we are exposing the override css var names, the convention is to add 'Override' suffix to the attribute name
+      { [attr + 'Override']: getOverrideCssVarName(varName) },
       getFallbackVarsNames(attr, varName, mappings[attr])
     );
   }, {});

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

@@ -108,7 +108,7 @@ export const createStyleMixin =
           if (elementId) {
             // basically this is enough to make the selector more specific
             // but just in case there is no id, we will also add the class multiple times
-            classSpecifier += `#${elementId}`;
+            classSpecifier += `#${CSS.escape(elementId)}`;
           }
 
           this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
@@ -117,7 +117,7 @@ export const createStyleMixin =
 
 
       #setAttrOverride(attrName, value) {
-        const style = this.#overrideStyleEle?.cssRules[0]?.style;
+        const style = this.#overrideStyleEle.cssRules[0].style;
 
         if (!style) return;