@front10/helpers 2.0.26 → 2.0.27

package/dist/BuildClass/BuildClass.js

@@ -790,9 +790,127 @@ var buildClass = function buildClass(props) {
 
     if (props["cmp-styles"] && _typeof(props["cmp-styles"]) === "object" && props["cmp-styles"].constructor === Object) {
       var styles = JSON.parse(JSON.stringify(props["cmp-styles"]));
+      /**
+       * Checks if a key is a CSS selector that should be treated as nested
+       * (excludes pseudo-selectors which are handled differently at root level)
+       */
+
+      var isNestedSelector = function isNestedSelector(key) {
+        return /^[.#\[>~+]/.test(key) || /^[a-z]+$/i.test(key) && !key.startsWith("@") && !key.includes(":") || key.startsWith("--point--") || key.startsWith("--hashtag--") || key.startsWith("--tilde--") || key.startsWith("--plus--");
+      };
+      /**
+       * Resolves theme/palette values from a string value
+       */
+
+
+      var resolveValue = function resolveValue(value) {
+        if (typeof value !== "string") return value;
+
+        if (value.startsWith("@theme:")) {
+          return (0, _ThemeProvider.getValueFromPath)(value, tokenTheme) || value;
+        }
+
+        if (value.includes("@palette:")) {
+          return (0, _ThemeProvider.getFromPalette)(value, tokenTheme) || value;
+        }
+
+        return value;
+      };
+      /**
+       * Builds CSS properties string from an object, handling @theme and @palette
+       */
+
+
+      var buildCssProperties = function buildCssProperties(obj) {
+        return Object.entries(obj).reduce(function (acc, _ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+              propName = _ref2[0],
+              propValue = _ref2[1];
+
+          if (propName === "@theme") {
+            var themes = Array.isArray(propValue) ? propValue : [propValue];
+            themes.forEach(function (item) {
+              var path = item.startsWith("@theme:") ? item : "@theme:".concat(item);
+              var themeValues = (0, _ThemeProvider.getValueFromPath)(path, tokenTheme) || {};
+              Object.entries(themeValues).forEach(function (_ref3) {
+                var _ref4 = _slicedToArray(_ref3, 2),
+                    k = _ref4[0],
+                    v = _ref4[1];
+
+                acc += "".concat(k, ":").concat(v, ";");
+              });
+            });
+          } else if (typeof propValue === "string") {
+            var resolved = resolveValue(propValue);
+            if (resolved) acc += "".concat(propName, ":").concat(resolved, ";");
+          } else if (propValue) {
+            acc += "".concat(propName, ":").concat(propValue, ";");
+          }
+
+          return acc;
+        }, "");
+      };
+      /**
+       * Recursively builds CSS content for nested selectors within media queries
+       * @param {string} baseSelector - The base selector (e.g., ".fr-xxx")
+       * @param {object} styleObj - The style object to process
+       * @returns {string} - CSS rules string
+       */
+
+
+      var buildNestedMediaContent = function buildNestedMediaContent(baseSelector, styleObj) {
+        var cssRules = "";
+        var directProperties = {};
+        var nestedSelectors = {}; // Separate direct properties from nested selectors
+
+        Object.entries(styleObj).forEach(function (_ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+              key = _ref6[0],
+              value = _ref6[1];
+
+          var new_key = key.replace(/--space--/g, " ").replace(/--point--/g, ".").replace(/--tilde--/g, "~").replace(/--plus--/g, "+").replace(/--hashtag--/g, "#");
+
+          if (_typeof(value) === "object" && value !== null && !Array.isArray(value)) {
+            // Check if this is a nested selector or a complex value
+            if (isNestedSelector(new_key) || new_key.startsWith(":")) {
+              nestedSelectors[new_key] = value;
+            } else {
+              // Treat as direct property with object value (shouldn't happen often)
+              directProperties[new_key] = value;
+            }
+          } else {
+            directProperties[new_key] = value;
+          }
+        }); // Build direct properties for base selector
+
+        if (Object.keys(directProperties).length > 0) {
+          var propsString = buildCssProperties(directProperties);
+
+          if (propsString) {
+            cssRules += "".concat(baseSelector, "{").concat(propsString, "}");
+          }
+        } // Build nested selectors
+
+
+        Object.entries(nestedSelectors).forEach(function (_ref7) {
+          var _ref8 = _slicedToArray(_ref7, 2),
+              selector = _ref8[0],
+              value = _ref8[1];
+
+          var new_selector = selector.replace(/--space--/g, " ").replace(/--point--/g, ".").replace(/--tilde--/g, "~").replace(/--plus--/g, "+").replace(/--hashtag--/g, "#");
+          var combinedSelector = new_selector.startsWith(":") ? "".concat(baseSelector).concat(new_selector) : "".concat(baseSelector, " ").concat(new_selector);
+
+          if (_typeof(value) === "object" && value !== null) {
+            // Recursively handle deeper nesting
+            cssRules += buildNestedMediaContent(combinedSelector, value);
+          }
+        });
+        return cssRules;
+      };
+
       Object.keys(styles).map(function (p) {
         var prop = p.replace(/--space--/g, " ").replace(/--point--/g, ".").replace(/--tilde--/g, "~").replace(/--plus--/g, "+").replace(/--hashtag--/g, "#");
-        var content = "";
+        var content = ""; // Handle string values
 
         if (typeof styles[p] === "string") {
           if (prop === "@theme") {
@@ -807,7 +925,8 @@ var buildClass = function buildClass(props) {
             var valueFromPalette = (0, _ThemeProvider.getFromPalette)(styles[p], tokenTheme);
             if (valueFromPalette) content = "{".concat(prop, ":").concat(valueFromPalette, "}");else if ((0, _canI.canIExecuteClientCode)()) console.warn("Palette color ".concat(styles[p], " not found in theme."));
           } else content = "".concat(styles[p] ? "{".concat(prop, ":").concat(styles[p], "}") : "");
-        }
+        } // Handle @theme array at root level
+
 
         if (prop === "@theme" && styles[p] && Array.isArray(styles[p])) {
           styles[p].forEach(function (item) {
@@ -821,80 +940,112 @@ var buildClass = function buildClass(props) {
             content = result;
           });
           content = "{".concat(content, "}");
-        }
+        } // Handle object values
+
 
         if (styles[p] && _typeof(styles[p]) === "object" && styles[p].constructor === Object) {
-          content = "{".concat(Object.entries(styles[p]).reduce(function (content, _ref) {
-            var _ref2 = _slicedToArray(_ref, 2),
-                propName = _ref2[0],
-                propValue = _ref2[1];
+          // Check if this is a media query with nested selectors
+          if (prop.startsWith("@media")) {
+            var hasNestedSelectors = Object.keys(styles[p]).some(function (key) {
+              return isNestedSelector(key) || key.startsWith(":");
+            });
 
-            var result = content;
+            if (hasNestedSelectors) {
+              // Will be handled specially below
+              content = "__NESTED_MEDIA__";
+            } else {
+              // Standard media query with direct properties
+              content = "{".concat(buildCssProperties(styles[p]), "}");
+            }
+          } else {
+            // Non-media query object handling (original logic)
+            content = "{".concat(Object.entries(styles[p]).reduce(function (content, _ref9) {
+              var _ref10 = _slicedToArray(_ref9, 2),
+                  propName = _ref10[0],
+                  propValue = _ref10[1];
+
+              var result = content;
+
+              if (propName === "@theme") {
+                if (propValue && Array.isArray(propValue)) {
+                  propValue.forEach(function (item) {
+                    var result = content;
+                    var newItem = item;
+                    newItem = (0, _ThemeProvider.getValueFromPath)("@theme:".concat(newItem), tokenTheme) || {};
+                    Object.keys(newItem).map(function (k) {
+                      result += "".concat(k, ":").concat(newItem[k], ";");
+                    });
+                    content = result;
+                  });
+                  result = content;
+                } else {
+                  var path = propValue;
 
-            if (propName === "@theme") {
-              if (propValue && Array.isArray(propValue)) {
-                propValue.forEach(function (item) {
-                  var result = content;
-                  var newItem = item;
-                  newItem = (0, _ThemeProvider.getValueFromPath)("@theme:".concat(newItem), tokenTheme) || {};
-                  Object.keys(newItem).map(function (k) {
-                    result += "".concat(k, ":").concat(newItem[k], ";");
+                  if (!propValue.startsWith("@theme:")) {
+                    path = "@theme:".concat(path);
+                  }
+
+                  var valueFromPath = (0, _ThemeProvider.getValueFromPath)(path, tokenTheme) || {};
+                  Object.keys(valueFromPath).map(function (k) {
+                    result += "".concat(k, ":").concat(valueFromPath[k], ";");
                   });
-                  content = result;
-                });
-                result = content;
-              } else {
-                var path = propValue;
-
-                if (!propValue.startsWith("@theme:")) {
-                  path = "@theme:".concat(path);
                 }
+              } else if (typeof propValue === "string" && propValue.startsWith("@theme:")) {
+                var _valueFromPath = (0, _ThemeProvider.getValueFromPath)(propValue, tokenTheme);
 
-                var valueFromPath = (0, _ThemeProvider.getValueFromPath)(path, tokenTheme) || {};
-                Object.keys(valueFromPath).map(function (k) {
-                  result += "".concat(k, ":").concat(valueFromPath[k], ";");
-                });
-              }
-            } else if (typeof propValue === "string" && propValue.startsWith("@theme:")) {
-              var _valueFromPath = (0, _ThemeProvider.getValueFromPath)(propValue, tokenTheme);
+                if (_valueFromPath) {
+                  result = "".concat(content).concat(propName, ":").concat(_valueFromPath, ";");
+                } else if ((0, _canI.canIExecuteClientCode)()) {
+                  console.warn("Design token ".concat(propValue, " not found in theme."));
+                }
+              } else if (typeof propValue === "string" && propValue.includes("@palette:")) {
+                var _valueFromPalette = (0, _ThemeProvider.getFromPalette)(propValue, tokenTheme);
 
-              if (_valueFromPath) {
-                result = "".concat(content).concat(propName, ":").concat(_valueFromPath, ";");
-              } else if ((0, _canI.canIExecuteClientCode)()) {
-                console.warn("Design token ".concat(propValue, " not found in theme."));
+                if (_valueFromPalette) {
+                  result = "".concat(content).concat(propName, ":").concat(_valueFromPalette, ";");
+                } else if ((0, _canI.canIExecuteClientCode)()) {
+                  console.warn("Palette color ".concat(propValue, " not found in theme."));
+                }
+              } else if (propValue) {
+                result = "".concat(content).concat(propName, ":").concat(propValue, ";");
               }
-            } else if (typeof propValue === "string" && propValue.includes("@palette:")) {
-              var _valueFromPalette = (0, _ThemeProvider.getFromPalette)(propValue, tokenTheme);
 
-              if (_valueFromPalette) {
-                result = "".concat(content).concat(propName, ":").concat(_valueFromPalette, ";");
-              } else if ((0, _canI.canIExecuteClientCode)()) {
-                console.warn("Palette color ".concat(propValue, " not found in theme."));
-              }
-            } else if (propValue) {
-              result = "".concat(content).concat(propName, ":").concat(propValue, ";");
-            }
-
-            return result;
-          }, ""), "}");
+              return result;
+            }, ""), "}");
+          }
         }
 
         content = content && content !== "{}" ? content : null;
 
         if (content) {
-          if (direction === "rtl") content = buildRtl(content);
-          var hash = "fr-".concat((0, _uuid.getUuidMin)("".concat(prop).concat(content)));
-          var contentClass = ".".concat(hash);
-          if (prop.startsWith(":")) contentClass += "".concat(prop).concat(content);else if (prop.startsWith(".") || prop.startsWith("#")) {
-            contentClass += " ".concat(prop).concat(content);
-          } else if (prop.startsWith("@media")) contentClass = "".concat(prop, "{.").concat(hash).concat(content, "}");else contentClass += content;
-
-          if (!isDynamicGeneratedStyleRegistered(hash)) {
-            appendDynamicGeneratedStyles(contentClass);
-            registerDynamicGeneratedStyles(hash);
-          }
+          if (direction === "rtl" && content !== "__NESTED_MEDIA__") content = buildRtl(content); // Handle nested media queries specially
+
+          if (content === "__NESTED_MEDIA__" && prop.startsWith("@media")) {
+            var hash = "fr-".concat((0, _uuid.getUuidMin)("".concat(prop).concat(JSON.stringify(styles[p]))));
+            var nestedContent = buildNestedMediaContent(".".concat(hash), styles[p]);
+
+            if (nestedContent && !isDynamicGeneratedStyleRegistered(hash)) {
+              var mediaRule = "".concat(prop, "{").concat(nestedContent, "}");
+              appendDynamicGeneratedStyles(mediaRule);
+              registerDynamicGeneratedStyles(hash);
+            }
 
-          _class += !_class.includes(hash) ? " ".concat(hash) : "";
+            _class += !_class.includes(hash) ? " ".concat(hash) : "";
+          } else {
+            var _hash = "fr-".concat((0, _uuid.getUuidMin)("".concat(prop).concat(content)));
+
+            var contentClass = ".".concat(_hash);
+            if (prop.startsWith(":")) contentClass += "".concat(prop).concat(content);else if (prop.startsWith(".") || prop.startsWith("#")) {
+              contentClass += " ".concat(prop).concat(content);
+            } else if (prop.startsWith("@media")) contentClass = "".concat(prop, "{.").concat(_hash).concat(content, "}");else contentClass += content;
+
+            if (!isDynamicGeneratedStyleRegistered(_hash)) {
+              appendDynamicGeneratedStyles(contentClass);
+              registerDynamicGeneratedStyles(_hash);
+            }
+
+            _class += !_class.includes(_hash) ? " ".concat(_hash) : "";
+          }
         }
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@front10/helpers",
-  "version": "2.0.26",
+  "version": "2.0.27",
   "description": "Helpers for front10 components",
   "source": "src/index.js",
   "main": "dist/front10-helpers.js",