@descope-ui/common 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.1](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.1.0...@descope-ui/common-0.1.1) (2025-09-29)
+
 ## [0.1.0](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.18...@descope-ui/common-0.1.0) (2025-09-02)
 
 

package/package.json

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

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

@@ -102,5 +102,4 @@ export const createCssVarsList = (componentName, mappings) =>
 
 // on some cases we need a selector to be more specific than another
 // for this we have this fn that generate a class selector multiple times
-export const createClassSelectorSpecifier = (className, numOfRepeats) =>
-  Array(numOfRepeats).fill(`.${className}`).join('');
+export const createClassSelectorSpecifier = (className, numOfRepeats) => `.${className}`.repeat(numOfRepeats);

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

@@ -100,18 +100,22 @@ export const createStyleMixin =
 
       #createOverridesStyle() {
         if (this.#styleAttributes.length) {
-          const classSpecifier = createClassSelectorSpecifier(
+          let classSpecifier = createClassSelectorSpecifier(
             componentName,
-            CSS_SELECTOR_SPECIFIER_MULTIPLY,
+            CSS_SELECTOR_SPECIFIER_MULTIPLY
           );
+          const elementId = this.getAttribute('id');
+          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}`;
+          }
 
-          this.#overrideStyleEle = injectStyle(
-            `:host(${classSpecifier}) {}`,
-            this.#rootElement,
-          );
+          this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
         }
       }
 
+
       #setAttrOverride(attrName, value) {
         const style = this.#overrideStyleEle?.cssRules[0].style;
 

package/src/constants.js

@@ -1,4 +1,4 @@
 export const DESCOPE_PREFIX = 'descope';
-export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 5;
 export const BASE_THEME_SECTION = 'host';
 export const PORTAL_THEME_PREFIX = '@';

package/src/themeHelpers/index.js

@@ -71,6 +71,15 @@ export const globalsThemeToStyle = (theme, themeName = '') => {
   return `*[data-theme="${themeName}"] {${style}}`;
 };
 
+function splitAmpersands(str) {
+  const match = str.match(/^(&+)?(.*)$/);
+  return [match[1] || "", (match[2] || "")];
+}
+
+// st attributes are also using selector multiplication
+// so we need to limit the multiplication
+const MAX_SELECTOR_MULTIPLY = 3;
+
 const componentsThemeToStyleObj = (componentsTheme) =>
   transformTheme(componentsTheme, [], (path, val) => {
     const [component, ...restPath] = path;
@@ -79,10 +88,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 
     if (property === 'undefined') {
       // eslint-disable-next-line no-console
-      console.warn(
-        componentName,
-        `theme value: "${val}" is mapped to an invalid property`,
-      );
+      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
     }
 
     // we need a support for portal components theme (e.g. overlay)
@@ -98,23 +104,26 @@ const componentsThemeToStyleObj = (componentsTheme) =>
     // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
     // starts with underscore -> attribute selector
     const attrsSelector = restPath.reduce((acc, section, idx) => {
-      if (section.startsWith('_'))
-        return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
+      const [ampersands, content] = splitAmpersands(section);
+      const selectorMultiplier = Math.min(
+        ampersands.length + 1,  // if there are no & we need to multiply by 1
+        MAX_SELECTOR_MULTIPLY
+      );
+
+      if (content.startsWith('_')) return acc + `[${kebabCase(content.replace(/^_/, ''))}="true"]`.repeat(selectorMultiplier);
 
       const nextSection = restPath[idx + 1];
 
-      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+      if (typeof nextSection !== 'string' || nextSection.startsWith('_') || nextSection.startsWith('&')) {
         // eslint-disable-next-line no-console
         console.error(
           'theme generator',
-          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`,
+          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
         );
         return acc;
       }
 
-      return `${acc}[${kebabCase(section)}="${restPath
-        .splice(idx + 1, 1)
-        .join('')}"]`;
+      return acc + `[${kebabCase(content)}="${restPath.splice(idx + 1, 1).join('')}"]`.repeat(selectorMultiplier);
     }, '');
 
     const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;