@wordpress/global-styles-engine 1.12.0 → 1.12.1-next.v.202605131032.0

package/build-module/core/render.mjs

@@ -42,6 +42,30 @@ var VALID_BLOCK_PSEUDO_SELECTORS = {
   "core/button": [":hover", ":focus", ":focus-visible", ":active"],
   "core/navigation-link": [":hover", ":focus", ":focus-visible", ":active"]
 };
+var VALID_ELEMENT_PSEUDO_SELECTORS = {
+  link: [
+    ":link",
+    ":any-link",
+    ":visited",
+    ":hover",
+    ":focus",
+    ":focus-visible",
+    ":active"
+  ],
+  button: [
+    ":link",
+    ":any-link",
+    ":visited",
+    ":hover",
+    ":focus",
+    ":focus-visible",
+    ":active"
+  ]
+};
+var RESPONSIVE_BREAKPOINTS = {
+  mobile: "@media (width <= 480px)",
+  tablet: "@media (480px < width <= 782px)"
+};
 function getPresetsClasses(blockSelector = "*", blockPresets = {}) {
   return PRESET_METADATA.reduce(
     (declarations, { path, cssVarInfix, classes }) => {
@@ -423,7 +447,7 @@ function pickStyleAndPseudoKeys(treeToPickFrom, blockName) {
   const entries = Object.entries(treeToPickFrom);
   const allowedPseudoSelectors = blockName ? VALID_BLOCK_PSEUDO_SELECTORS[blockName] ?? [] : [];
   const pickedEntries = entries.filter(
-    ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key)
+    ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || RESPONSIVE_BREAKPOINTS[key]
   );
   const clonedEntries = pickedEntries.map(([key, style]) => [
     key,
@@ -431,65 +455,100 @@ function pickStyleAndPseudoKeys(treeToPickFrom, blockName) {
   ]);
   return Object.fromEntries(clonedEntries);
 }
-function appendPseudoSelectorStyles(styles, selector, ruleset, featureSelectors, treeSettings, blockName, styleVariationSelector) {
-  const pseudoSelectorStyles = Object.entries(styles).filter(
-    ([key]) => key.startsWith(":")
-  );
-  if (!pseudoSelectorStyles.length) {
-    return ruleset;
+function getPseudoStyleNodes(node) {
+  const {
+    styles,
+    selector,
+    featureSelectors,
+    name,
+    elementName,
+    mediaQuery
+  } = node;
+  const pseudoSelectors = name ? VALID_BLOCK_PSEUDO_SELECTORS[name] ?? [] : VALID_ELEMENT_PSEUDO_SELECTORS[elementName ?? ""] ?? [];
+  if (!pseudoSelectors.length) {
+    return [];
   }
-  pseudoSelectorStyles.forEach(([pseudoKey, pseudoStyle]) => {
-    if (!pseudoStyle || typeof pseudoStyle !== "object") {
-      return;
+  return pseudoSelectors.flatMap((pseudoSelector) => {
+    const pseudoStyles = styles?.[pseudoSelector];
+    if (!pseudoStyles || typeof pseudoStyles !== "object") {
+      return [];
     }
-    const remainingPseudoStyles = JSON.parse(
-      JSON.stringify(pseudoStyle)
-    );
-    if (featureSelectors && typeof featureSelectors !== "string") {
-      let pseudoFeatureDeclarations = getFeatureDeclarations(
-        featureSelectors,
-        remainingPseudoStyles
-      );
-      pseudoFeatureDeclarations = updateParagraphTextIndentSelector(
-        pseudoFeatureDeclarations,
-        treeSettings,
-        blockName
-      );
-      pseudoFeatureDeclarations = updateButtonWidthDeclarations(
-        pseudoFeatureDeclarations,
-        treeSettings
-      );
-      Object.entries(pseudoFeatureDeclarations).forEach(
-        ([baseSelector, declarations]) => {
-          if (!declarations.length) {
-            return;
-          }
-          const pseudoFeatureSelector = appendToSelector(
-            baseSelector,
-            pseudoKey
-          );
-          const cssSelector = styleVariationSelector ? concatFeatureVariationSelectorString(
-            pseudoFeatureSelector,
-            styleVariationSelector
-          ) : pseudoFeatureSelector;
-          const rules = declarations.join(";");
-          ruleset += `:root :where(${cssSelector}){${rules};}`;
+    return [
+      {
+        styles: JSON.parse(JSON.stringify(pseudoStyles)),
+        selector,
+        selectorSuffix: pseudoSelector,
+        mediaQuery,
+        featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0,
+        name,
+        elementName
+      }
+    ];
+  });
+}
+function getResponsiveStyleNodes(node) {
+  const {
+    styles,
+    selector,
+    featureSelectors,
+    name,
+    elementName,
+    isStyleVariation
+  } = node;
+  if (!name && !elementName) {
+    return [];
+  }
+  return Object.entries(RESPONSIVE_BREAKPOINTS).flatMap(
+    ([breakpointKey, mediaQuery]) => {
+      const breakpointStyles = styles?.[breakpointKey];
+      if (!breakpointStyles || typeof breakpointStyles !== "object") {
+        return [];
+      }
+      return [
+        {
+          styles: JSON.parse(JSON.stringify(breakpointStyles)),
+          selector,
+          mediaQuery,
+          featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0,
+          name,
+          elementName,
+          isStyleVariation
         }
-      );
-    }
-    const pseudoDeclarations = getStylesDeclarations(
-      remainingPseudoStyles
-    );
-    if (!pseudoDeclarations.length) {
-      return;
+      ];
     }
-    const pseudoSelector = appendToSelector(selector, pseudoKey);
-    const pseudoRule = `:root :where(${pseudoSelector}){${pseudoDeclarations.join(
-      ";"
-    )};}`;
-    ruleset += pseudoRule;
-  });
-  return ruleset;
+  );
+}
+function getVariationFeatureSelectors(featureSelectors, styleVariationSelector) {
+  if (!featureSelectors || typeof featureSelectors === "string") {
+    return void 0;
+  }
+  return Object.fromEntries(
+    Object.entries(featureSelectors).map(([feature, selector]) => {
+      if (typeof selector === "string") {
+        return [
+          feature,
+          concatFeatureVariationSelectorString(
+            selector,
+            styleVariationSelector
+          )
+        ];
+      }
+      return [
+        feature,
+        Object.fromEntries(
+          Object.entries(selector).map(
+            ([subfeature, subfeatureSelector]) => [
+              subfeature,
+              concatFeatureVariationSelectorString(
+                subfeatureSelector,
+                styleVariationSelector
+              )
+            ]
+          )
+        )
+      ];
+    })
+  );
 }
 var getNodesWithStyles = (tree, blockSelectors) => {
   const nodes = [];
@@ -511,6 +570,7 @@ var getNodesWithStyles = (tree, blockSelectors) => {
       nodes.push({
         styles: tree.styles?.elements?.[name] ?? {},
         selector,
+        elementName: name,
         // Top level elements that don't use a class name should not receive the
         // `:root :where()` wrapper to maintain backwards compatibility.
         skipSelectorWrapper: !ELEMENT_CLASS_NAMES[name]
@@ -522,19 +582,36 @@ var getNodesWithStyles = (tree, blockSelectors) => {
       const blockStyles = pickStyleAndPseudoKeys(node, blockName);
       const typedNode = node;
       const variationNodesToAdd = [];
+      const variationStyleNodesToAdd = [];
       if (typedNode?.variations) {
-        const variations = {};
         Object.entries(typedNode.variations).forEach(
           ([variationName, variation]) => {
             const typedVariation = variation;
-            variations[variationName] = pickStyleAndPseudoKeys(
+            const variationStyles = pickStyleAndPseudoKeys(
               typedVariation,
               blockName
             );
             if (typedVariation?.css) {
-              variations[variationName].css = typedVariation.css;
+              variationStyles.css = typedVariation.css;
             }
             const variationSelector = typeof blockSelectors !== "string" ? blockSelectors[blockName]?.styleVariationSelectors?.[variationName] : void 0;
+            if (variationSelector && typeof blockSelectors !== "string") {
+              const blockSelector = blockSelectors[blockName];
+              variationStyleNodesToAdd.push({
+                styles: variationStyles,
+                selector: variationSelector,
+                featureSelectors: getVariationFeatureSelectors(
+                  blockSelector?.featureSelectors,
+                  variationSelector
+                ),
+                fallbackGapValue: blockSelector?.fallbackGapValue,
+                hasLayoutSupport: blockSelector?.hasLayoutSupport,
+                isStyleVariation: true,
+                layoutSelector: variationSelector + blockSelector.selector,
+                layoutHasBlockGapSupport: true,
+                name: blockName
+              });
+            }
             Object.entries(
               typedVariation?.elements ?? {}
             ).forEach(([element, elementStyles]) => {
@@ -544,7 +621,9 @@ var getNodesWithStyles = (tree, blockSelectors) => {
                   selector: scopeSelector(
                     variationSelector,
                     ELEMENTS[element]
-                  )
+                  ),
+                  elementName: element,
+                  isStyleVariation: true
                 });
               }
             });
@@ -577,6 +656,8 @@ var getNodesWithStyles = (tree, blockSelectors) => {
                 }
                 variationNodesToAdd.push({
                   selector: variationBlockSelector,
+                  name: variationBlockName,
+                  isStyleVariation: true,
                   duotoneSelector: variationDuotoneSelector,
                   featureSelectors: variationFeatureSelectors,
                   fallbackGapValue: blockSelectors[variationBlockName]?.fallbackGapValue,
@@ -596,7 +677,9 @@ var getNodesWithStyles = (tree, blockSelectors) => {
                         selector: scopeSelector(
                           variationBlockSelector,
                           ELEMENTS[variationBlockElement]
-                        )
+                        ),
+                        elementName: variationBlockElement,
+                        isStyleVariation: true
                       });
                     }
                   }
@@ -605,7 +688,6 @@ var getNodesWithStyles = (tree, blockSelectors) => {
             );
           }
         );
-        blockStyles.variations = variations;
       }
       if (typeof blockSelectors !== "string" && blockSelectors?.[blockName]?.selector) {
         nodes.push({
@@ -615,10 +697,10 @@ var getNodesWithStyles = (tree, blockSelectors) => {
           selector: blockSelectors[blockName].selector,
           styles: blockStyles,
           featureSelectors: blockSelectors[blockName].featureSelectors,
-          styleVariationSelectors: blockSelectors[blockName].styleVariationSelectors,
           name: blockName
         });
       }
+      nodes.push(...variationStyleNodesToAdd);
       Object.entries(typedNode?.elements ?? {}).forEach(
         ([elementName, value]) => {
           if (typeof blockSelectors !== "string" && value && blockSelectors?.[blockName] && ELEMENTS[elementName]) {
@@ -629,7 +711,8 @@ var getNodesWithStyles = (tree, blockSelectors) => {
                 return elementSelectors.map(
                   (elementSelector) => sel + " " + elementSelector
                 );
-              }).join(",")
+              }).join(","),
+              elementName
             });
           }
         }
@@ -767,6 +850,100 @@ var generateCustomProperties = (tree, blockSelectors) => {
   }
   return ruleset;
 };
+function renderStylesNode(node, {
+  tree,
+  useRootPaddingAlign,
+  disableLayoutStyles,
+  hasBlockGapSupport,
+  hasFallbackGapSupport,
+  disableRootPadding
+}) {
+  const {
+    selector,
+    selectorSuffix,
+    mediaQuery,
+    duotoneSelector,
+    styles,
+    fallbackGapValue,
+    hasLayoutSupport,
+    featureSelectors,
+    layoutSelector,
+    layoutHasBlockGapSupport,
+    skipSelectorWrapper,
+    name
+  } = node;
+  let ruleset = "";
+  const effectiveSelector = selectorSuffix ? appendToSelector(selector, selectorSuffix) : selector;
+  if (featureSelectors && typeof featureSelectors !== "string") {
+    let featureDeclarations = getFeatureDeclarations(
+      featureSelectors,
+      styles
+    );
+    featureDeclarations = updateParagraphTextIndentSelector(
+      featureDeclarations,
+      tree.settings,
+      name
+    );
+    featureDeclarations = updateButtonWidthDeclarations(
+      featureDeclarations,
+      tree.settings
+    );
+    Object.entries(featureDeclarations).forEach(
+      ([featureSelector, declarations]) => {
+        if (declarations.length) {
+          const selectorForRule = selectorSuffix ? appendToSelector(featureSelector, selectorSuffix) : featureSelector;
+          const rules = declarations.join(";");
+          ruleset += `:root :where(${selectorForRule}){${rules};}`;
+        }
+      }
+    );
+  }
+  if (duotoneSelector) {
+    const duotoneStyles = {};
+    if (styles?.filter) {
+      duotoneStyles.filter = styles.filter;
+      delete styles.filter;
+    }
+    const duotoneDeclarations = getStylesDeclarations(duotoneStyles);
+    if (duotoneDeclarations.length) {
+      ruleset += `${duotoneSelector}{${duotoneDeclarations.join(
+        ";"
+      )};}`;
+    }
+  }
+  const selectorForLayout = layoutSelector ?? effectiveSelector;
+  const hasBlockGapSupportForLayout = layoutHasBlockGapSupport ?? hasBlockGapSupport;
+  if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selectorForLayout || hasLayoutSupport)) {
+    ruleset += getLayoutStyles({
+      style: styles,
+      selector: selectorForLayout,
+      hasBlockGapSupport: hasBlockGapSupportForLayout,
+      hasFallbackGapSupport,
+      fallbackGapValue
+    });
+  }
+  const styleDeclarations = getStylesDeclarations(
+    styles,
+    effectiveSelector,
+    useRootPaddingAlign,
+    tree,
+    disableRootPadding
+  );
+  if (styleDeclarations?.length) {
+    const generalSelector = skipSelectorWrapper ? effectiveSelector : `:root :where(${effectiveSelector})`;
+    ruleset += `${generalSelector}{${styleDeclarations.join(";")};}`;
+  }
+  if (styles?.css) {
+    ruleset += processCSSNesting(
+      styles.css,
+      `:root :where(${effectiveSelector})`
+    );
+  }
+  if (mediaQuery && ruleset) {
+    return `${mediaQuery}{${ruleset}}`;
+  }
+  return ruleset;
+}
 var transformToStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = {}) => {
   const options = {
     blockGap: true,
@@ -803,166 +980,27 @@ var transformToStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
     ruleset += "}";
   }
   if (options.blockStyles) {
-    nodesWithStyles.forEach(
-      ({
-        selector,
-        duotoneSelector,
-        styles,
-        fallbackGapValue,
-        hasLayoutSupport,
-        featureSelectors,
-        styleVariationSelectors,
-        skipSelectorWrapper,
-        name
-      }) => {
-        if (featureSelectors) {
-          let featureDeclarations = getFeatureDeclarations(
-            featureSelectors,
-            styles
-          );
-          featureDeclarations = updateParagraphTextIndentSelector(
-            featureDeclarations,
-            tree.settings,
-            name
-          );
-          featureDeclarations = updateButtonWidthDeclarations(
-            featureDeclarations,
-            tree.settings
-          );
-          Object.entries(featureDeclarations).forEach(
-            ([cssSelector, declarations]) => {
-              if (declarations.length) {
-                const rules = declarations.join(";");
-                ruleset += `:root :where(${cssSelector}){${rules};}`;
-              }
-            }
-          );
-        }
-        if (duotoneSelector) {
-          const duotoneStyles = {};
-          if (styles?.filter) {
-            duotoneStyles.filter = styles.filter;
-            delete styles.filter;
-          }
-          const duotoneDeclarations = getStylesDeclarations(duotoneStyles);
-          if (duotoneDeclarations.length) {
-            ruleset += `${duotoneSelector}{${duotoneDeclarations.join(
-              ";"
-            )};}`;
-          }
-        }
-        if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport)) {
-          ruleset += getLayoutStyles({
-            style: styles,
-            selector,
-            hasBlockGapSupport,
-            hasFallbackGapSupport,
-            fallbackGapValue
-          });
-        }
-        const styleDeclarations = getStylesDeclarations(
-          styles,
-          selector,
-          useRootPaddingAlign,
+    nodesWithStyles.forEach((node) => {
+      if (node.isStyleVariation && !options.variationStyles) {
+        return;
+      }
+      const responsiveNodes = getResponsiveStyleNodes(node);
+      [
+        node,
+        ...responsiveNodes,
+        ...getPseudoStyleNodes(node),
+        ...responsiveNodes.flatMap(getPseudoStyleNodes)
+      ].forEach((expandedNode) => {
+        ruleset += renderStylesNode(expandedNode, {
           tree,
+          useRootPaddingAlign,
+          disableLayoutStyles,
+          hasBlockGapSupport,
+          hasFallbackGapSupport,
           disableRootPadding
-        );
-        if (styleDeclarations?.length) {
-          const generalSelector = skipSelectorWrapper ? selector : `:root :where(${selector})`;
-          ruleset += `${generalSelector}{${styleDeclarations.join(
-            ";"
-          )};}`;
-        }
-        if (styles?.css) {
-          ruleset += processCSSNesting(
-            styles.css,
-            `:root :where(${selector})`
-          );
-        }
-        if (options.variationStyles && styleVariationSelectors) {
-          Object.entries(styleVariationSelectors).forEach(
-            ([styleVariationName, styleVariationSelector]) => {
-              const styleVariations = styles?.variations?.[styleVariationName];
-              if (styleVariations) {
-                if (featureSelectors) {
-                  let featureDeclarations = getFeatureDeclarations(
-                    featureSelectors,
-                    styleVariations
-                  );
-                  featureDeclarations = updateParagraphTextIndentSelector(
-                    featureDeclarations,
-                    tree.settings,
-                    name
-                  );
-                  featureDeclarations = updateButtonWidthDeclarations(
-                    featureDeclarations,
-                    tree.settings
-                  );
-                  Object.entries(
-                    featureDeclarations
-                  ).forEach(
-                    ([baseSelector, declarations]) => {
-                      if (declarations.length) {
-                        const cssSelector = concatFeatureVariationSelectorString(
-                          baseSelector,
-                          styleVariationSelector
-                        );
-                        const rules = declarations.join(";");
-                        ruleset += `:root :where(${cssSelector}){${rules};}`;
-                      }
-                    }
-                  );
-                }
-                const styleVariationDeclarations = getStylesDeclarations(
-                  styleVariations,
-                  styleVariationSelector,
-                  useRootPaddingAlign,
-                  tree
-                );
-                if (styleVariationDeclarations.length) {
-                  ruleset += `:root :where(${styleVariationSelector}){${styleVariationDeclarations.join(
-                    ";"
-                  )};}`;
-                }
-                if (styleVariations?.css) {
-                  ruleset += processCSSNesting(
-                    styleVariations.css,
-                    `:root :where(${styleVariationSelector})`
-                  );
-                }
-                ruleset = appendPseudoSelectorStyles(
-                  styleVariations,
-                  styleVariationSelector,
-                  ruleset,
-                  featureSelectors,
-                  tree.settings,
-                  name,
-                  styleVariationSelector
-                );
-                if (hasLayoutSupport && styleVariations?.spacing?.blockGap) {
-                  const variationSelectorWithBlock = styleVariationSelector + selector;
-                  ruleset += getLayoutStyles({
-                    style: styleVariations,
-                    selector: variationSelectorWithBlock,
-                    hasBlockGapSupport: true,
-                    hasFallbackGapSupport,
-                    fallbackGapValue
-                  });
-                }
-              }
-            }
-          );
-        }
-        ruleset = appendPseudoSelectorStyles(
-          styles,
-          selector,
-          ruleset,
-          featureSelectors,
-          tree.settings,
-          name
-        );
-      }
-    );
+        });
+      });
+    });
   }
   if (options.layoutStyles) {
     ruleset = ruleset + ".wp-site-blocks > .alignleft { float: left; margin-right: 2em; }";