@wordpress/block-editor 15.6.1 → 15.7.0

package/build-module/components/global-styles/use-global-styles-output.js

@@ -1,979 +0,0 @@
-import {
-  __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
-  __EXPERIMENTAL_ELEMENTS as ELEMENTS,
-  getBlockSupport,
-  getBlockTypes,
-  store as blocksStore
-} from "@wordpress/blocks";
-import { useSelect } from "@wordpress/data";
-import { useContext, useMemo } from "@wordpress/element";
-import { getCSSRules, getCSSValueFromRawStyle } from "@wordpress/style-engine";
-import { privateApis as componentsPrivateApis } from "@wordpress/components";
-import {
-  PRESET_METADATA,
-  ROOT_BLOCK_SELECTOR,
-  ROOT_CSS_PROPERTIES_SELECTOR,
-  scopeSelector,
-  scopeFeatureSelectors,
-  appendToSelector,
-  getBlockStyleVariationSelector,
-  getResolvedValue
-} from "./utils";
-import { getBlockCSSSelector } from "./get-block-css-selector";
-import { getTypographyFontSizeValue } from "./typography-utils";
-import { GlobalStylesContext } from "./context";
-import { useGlobalSetting } from "./hooks";
-import { getDuotoneFilter } from "../duotone/utils";
-import { getGapCSSValue } from "../../hooks/gap";
-import { setBackgroundStyleDefaults } from "../../hooks/background";
-import { store as blockEditorStore } from "../../store";
-import { LAYOUT_DEFINITIONS } from "../../layouts/definitions";
-import { getValueFromObjectPath, setImmutably } from "../../utils/object";
-import { unlock } from "../../lock-unlock";
-const ELEMENT_CLASS_NAMES = {
-  button: "wp-element-button",
-  caption: "wp-element-caption"
-};
-const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
-  __experimentalBorder: "border",
-  color: "color",
-  spacing: "spacing",
-  typography: "typography"
-};
-const { kebabCase } = unlock(componentsPrivateApis);
-function getPresetsDeclarations(blockPresets = {}, mergedSettings) {
-  return PRESET_METADATA.reduce(
-    (declarations, { path, valueKey, valueFunc, cssVarInfix }) => {
-      const presetByOrigin = getValueFromObjectPath(
-        blockPresets,
-        path,
-        []
-      );
-      ["default", "theme", "custom"].forEach((origin) => {
-        if (presetByOrigin[origin]) {
-          presetByOrigin[origin].forEach((value) => {
-            if (valueKey && !valueFunc) {
-              declarations.push(
-                `--wp--preset--${cssVarInfix}--${kebabCase(
-                  value.slug
-                )}: ${value[valueKey]}`
-              );
-            } else if (valueFunc && typeof valueFunc === "function") {
-              declarations.push(
-                `--wp--preset--${cssVarInfix}--${kebabCase(
-                  value.slug
-                )}: ${valueFunc(value, mergedSettings)}`
-              );
-            }
-          });
-        }
-      });
-      return declarations;
-    },
-    []
-  );
-}
-function getPresetsClasses(blockSelector = "*", blockPresets = {}) {
-  return PRESET_METADATA.reduce(
-    (declarations, { path, cssVarInfix, classes }) => {
-      if (!classes) {
-        return declarations;
-      }
-      const presetByOrigin = getValueFromObjectPath(
-        blockPresets,
-        path,
-        []
-      );
-      ["default", "theme", "custom"].forEach((origin) => {
-        if (presetByOrigin[origin]) {
-          presetByOrigin[origin].forEach(({ slug }) => {
-            classes.forEach(({ classSuffix, propertyName }) => {
-              const classSelectorToUse = `.has-${kebabCase(
-                slug
-              )}-${classSuffix}`;
-              const selectorToUse = blockSelector.split(",").map(
-                (selector) => `${selector}${classSelectorToUse}`
-              ).join(",");
-              const value = `var(--wp--preset--${cssVarInfix}--${kebabCase(
-                slug
-              )})`;
-              declarations += `${selectorToUse}{${propertyName}: ${value} !important;}`;
-            });
-          });
-        }
-      });
-      return declarations;
-    },
-    ""
-  );
-}
-function getPresetsSvgFilters(blockPresets = {}) {
-  return PRESET_METADATA.filter(
-    // Duotone are the only type of filters for now.
-    (metadata) => metadata.path.at(-1) === "duotone"
-  ).flatMap((metadata) => {
-    const presetByOrigin = getValueFromObjectPath(
-      blockPresets,
-      metadata.path,
-      {}
-    );
-    return ["default", "theme"].filter((origin) => presetByOrigin[origin]).flatMap(
-      (origin) => presetByOrigin[origin].map(
-        (preset) => getDuotoneFilter(
-          `wp-duotone-${preset.slug}`,
-          preset.colors
-        )
-      )
-    ).join("");
-  });
-}
-function flattenTree(input = {}, prefix, token) {
-  let result = [];
-  Object.keys(input).forEach((key) => {
-    const newKey = prefix + kebabCase(key.replace("/", "-"));
-    const newLeaf = input[key];
-    if (newLeaf instanceof Object) {
-      const newPrefix = newKey + token;
-      result = [...result, ...flattenTree(newLeaf, newPrefix, token)];
-    } else {
-      result.push(`${newKey}: ${newLeaf}`);
-    }
-  });
-  return result;
-}
-function concatFeatureVariationSelectorString(featureSelector, styleVariationSelector) {
-  const featureSelectors = featureSelector.split(",");
-  const combinedSelectors = [];
-  featureSelectors.forEach((selector) => {
-    combinedSelectors.push(
-      `${styleVariationSelector.trim()}${selector.trim()}`
-    );
-  });
-  return combinedSelectors.join(", ");
-}
-const getFeatureDeclarations = (selectors, styles) => {
-  const declarations = {};
-  Object.entries(selectors).forEach(([feature, selector]) => {
-    if (feature === "root" || !styles?.[feature]) {
-      return;
-    }
-    const isShorthand = typeof selector === "string";
-    if (!isShorthand) {
-      Object.entries(selector).forEach(
-        ([subfeature, subfeatureSelector]) => {
-          if (subfeature === "root" || !styles?.[feature][subfeature]) {
-            return;
-          }
-          const subfeatureStyles = {
-            [feature]: {
-              [subfeature]: styles[feature][subfeature]
-            }
-          };
-          const newDeclarations = getStylesDeclarations(subfeatureStyles);
-          declarations[subfeatureSelector] = [
-            ...declarations[subfeatureSelector] || [],
-            ...newDeclarations
-          ];
-          delete styles[feature][subfeature];
-        }
-      );
-    }
-    if (isShorthand || selector.root) {
-      const featureSelector = isShorthand ? selector : selector.root;
-      const featureStyles = { [feature]: styles[feature] };
-      const newDeclarations = getStylesDeclarations(featureStyles);
-      declarations[featureSelector] = [
-        ...declarations[featureSelector] || [],
-        ...newDeclarations
-      ];
-      delete styles[feature];
-    }
-  });
-  return declarations;
-};
-function getStylesDeclarations(blockStyles = {}, selector = "", useRootPaddingAlign, tree = {}, disableRootPadding = false) {
-  const isRoot = ROOT_BLOCK_SELECTOR === selector;
-  const output = Object.entries(STYLE_PROPERTY).reduce(
-    (declarations, [key, { value, properties, useEngine, rootOnly }]) => {
-      if (rootOnly && !isRoot) {
-        return declarations;
-      }
-      const pathToValue = value;
-      if (pathToValue[0] === "elements" || useEngine) {
-        return declarations;
-      }
-      const styleValue = getValueFromObjectPath(
-        blockStyles,
-        pathToValue
-      );
-      if (key === "--wp--style--root--padding" && (typeof styleValue === "string" || !useRootPaddingAlign)) {
-        return declarations;
-      }
-      if (properties && typeof styleValue !== "string") {
-        Object.entries(properties).forEach((entry) => {
-          const [name, prop] = entry;
-          if (!getValueFromObjectPath(styleValue, [prop], false)) {
-            return;
-          }
-          const cssProperty = name.startsWith("--") ? name : kebabCase(name);
-          declarations.push(
-            `${cssProperty}: ${getCSSValueFromRawStyle(
-              getValueFromObjectPath(styleValue, [prop])
-            )}`
-          );
-        });
-      } else if (getValueFromObjectPath(blockStyles, pathToValue, false)) {
-        const cssProperty = key.startsWith("--") ? key : kebabCase(key);
-        declarations.push(
-          `${cssProperty}: ${getCSSValueFromRawStyle(
-            getValueFromObjectPath(blockStyles, pathToValue)
-          )}`
-        );
-      }
-      return declarations;
-    },
-    []
-  );
-  if (!!blockStyles.background) {
-    if (blockStyles.background?.backgroundImage) {
-      blockStyles.background.backgroundImage = getResolvedValue(
-        blockStyles.background.backgroundImage,
-        tree
-      );
-    }
-    if (!isRoot && !!blockStyles.background?.backgroundImage?.id) {
-      blockStyles = {
-        ...blockStyles,
-        background: {
-          ...blockStyles.background,
-          ...setBackgroundStyleDefaults(blockStyles.background)
-        }
-      };
-    }
-  }
-  const extraRules = getCSSRules(blockStyles);
-  extraRules.forEach((rule) => {
-    if (isRoot && (useRootPaddingAlign || disableRootPadding) && rule.key.startsWith("padding")) {
-      return;
-    }
-    const cssProperty = rule.key.startsWith("--") ? rule.key : kebabCase(rule.key);
-    let ruleValue = getResolvedValue(rule.value, tree, null);
-    if (cssProperty === "font-size") {
-      ruleValue = getTypographyFontSizeValue(
-        { size: ruleValue },
-        tree?.settings
-      );
-    }
-    if (cssProperty === "aspect-ratio") {
-      output.push("min-height: unset");
-    }
-    output.push(`${cssProperty}: ${ruleValue}`);
-  });
-  return output;
-}
-function getLayoutStyles({
-  layoutDefinitions = LAYOUT_DEFINITIONS,
-  style,
-  selector,
-  hasBlockGapSupport,
-  hasFallbackGapSupport,
-  fallbackGapValue
-}) {
-  let ruleset = "";
-  let gapValue = hasBlockGapSupport ? getGapCSSValue(style?.spacing?.blockGap) : "";
-  if (hasFallbackGapSupport) {
-    if (selector === ROOT_BLOCK_SELECTOR) {
-      gapValue = !gapValue ? "0.5em" : gapValue;
-    } else if (!hasBlockGapSupport && fallbackGapValue) {
-      gapValue = fallbackGapValue;
-    }
-  }
-  if (gapValue && layoutDefinitions) {
-    Object.values(layoutDefinitions).forEach(
-      ({ className, name, spacingStyles }) => {
-        if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) {
-          return;
-        }
-        if (spacingStyles?.length) {
-          spacingStyles.forEach((spacingStyle) => {
-            const declarations = [];
-            if (spacingStyle.rules) {
-              Object.entries(spacingStyle.rules).forEach(
-                ([cssProperty, cssValue]) => {
-                  declarations.push(
-                    `${cssProperty}: ${cssValue ? cssValue : gapValue}`
-                  );
-                }
-              );
-            }
-            if (declarations.length) {
-              let combinedSelector = "";
-              if (!hasBlockGapSupport) {
-                combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:where(.${className}${spacingStyle?.selector || ""})` : `:where(${selector}.${className}${spacingStyle?.selector || ""})`;
-              } else {
-                combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:root :where(.${className})${spacingStyle?.selector || ""}` : `:root :where(${selector}-${className})${spacingStyle?.selector || ""}`;
-              }
-              ruleset += `${combinedSelector} { ${declarations.join(
-                "; "
-              )}; }`;
-            }
-          });
-        }
-      }
-    );
-    if (selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport) {
-      ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} { --wp--style--block-gap: ${gapValue}; }`;
-    }
-  }
-  if (selector === ROOT_BLOCK_SELECTOR && layoutDefinitions) {
-    const validDisplayModes = ["block", "flex", "grid"];
-    Object.values(layoutDefinitions).forEach(
-      ({ className, displayMode, baseStyles }) => {
-        if (displayMode && validDisplayModes.includes(displayMode)) {
-          ruleset += `${selector} .${className} { display:${displayMode}; }`;
-        }
-        if (baseStyles?.length) {
-          baseStyles.forEach((baseStyle) => {
-            const declarations = [];
-            if (baseStyle.rules) {
-              Object.entries(baseStyle.rules).forEach(
-                ([cssProperty, cssValue]) => {
-                  declarations.push(
-                    `${cssProperty}: ${cssValue}`
-                  );
-                }
-              );
-            }
-            if (declarations.length) {
-              const combinedSelector = `.${className}${baseStyle?.selector || ""}`;
-              ruleset += `${combinedSelector} { ${declarations.join(
-                "; "
-              )}; }`;
-            }
-          });
-        }
-      }
-    );
-  }
-  return ruleset;
-}
-const STYLE_KEYS = [
-  "border",
-  "color",
-  "dimensions",
-  "spacing",
-  "typography",
-  "filter",
-  "outline",
-  "shadow",
-  "background"
-];
-function pickStyleKeys(treeToPickFrom) {
-  if (!treeToPickFrom) {
-    return {};
-  }
-  const entries = Object.entries(treeToPickFrom);
-  const pickedEntries = entries.filter(
-    ([key]) => STYLE_KEYS.includes(key)
-  );
-  const clonedEntries = pickedEntries.map(([key, style]) => [
-    key,
-    JSON.parse(JSON.stringify(style))
-  ]);
-  return Object.fromEntries(clonedEntries);
-}
-const getNodesWithStyles = (tree, blockSelectors) => {
-  const nodes = [];
-  if (!tree?.styles) {
-    return nodes;
-  }
-  const styles = pickStyleKeys(tree.styles);
-  if (styles) {
-    nodes.push({
-      styles,
-      selector: ROOT_BLOCK_SELECTOR,
-      // Root selector (body) styles should not be wrapped in `:root where()` to keep
-      // specificity at (0,0,1) and maintain backwards compatibility.
-      skipSelectorWrapper: true
-    });
-  }
-  Object.entries(ELEMENTS).forEach(([name, selector]) => {
-    if (tree.styles?.elements?.[name]) {
-      nodes.push({
-        styles: tree.styles?.elements?.[name],
-        selector,
-        // 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]
-      });
-    }
-  });
-  Object.entries(tree.styles?.blocks ?? {}).forEach(
-    ([blockName, node]) => {
-      const blockStyles = pickStyleKeys(node);
-      if (node?.variations) {
-        const variations = {};
-        Object.entries(node.variations).forEach(
-          ([variationName, variation]) => {
-            variations[variationName] = pickStyleKeys(variation);
-            if (variation?.css) {
-              variations[variationName].css = variation.css;
-            }
-            const variationSelector = blockSelectors[blockName]?.styleVariationSelectors?.[variationName];
-            Object.entries(variation?.elements ?? {}).forEach(
-              ([element, elementStyles]) => {
-                if (elementStyles && ELEMENTS[element]) {
-                  nodes.push({
-                    styles: elementStyles,
-                    selector: scopeSelector(
-                      variationSelector,
-                      ELEMENTS[element]
-                    )
-                  });
-                }
-              }
-            );
-            Object.entries(variation?.blocks ?? {}).forEach(
-              ([
-                variationBlockName,
-                variationBlockStyles
-              ]) => {
-                const variationBlockSelector = scopeSelector(
-                  variationSelector,
-                  blockSelectors[variationBlockName]?.selector
-                );
-                const variationDuotoneSelector = scopeSelector(
-                  variationSelector,
-                  blockSelectors[variationBlockName]?.duotoneSelector
-                );
-                const variationFeatureSelectors = scopeFeatureSelectors(
-                  variationSelector,
-                  blockSelectors[variationBlockName]?.featureSelectors
-                );
-                const variationBlockStyleNodes = pickStyleKeys(variationBlockStyles);
-                if (variationBlockStyles?.css) {
-                  variationBlockStyleNodes.css = variationBlockStyles.css;
-                }
-                nodes.push({
-                  selector: variationBlockSelector,
-                  duotoneSelector: variationDuotoneSelector,
-                  featureSelectors: variationFeatureSelectors,
-                  fallbackGapValue: blockSelectors[variationBlockName]?.fallbackGapValue,
-                  hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport,
-                  styles: variationBlockStyleNodes
-                });
-                Object.entries(
-                  variationBlockStyles.elements ?? {}
-                ).forEach(
-                  ([
-                    variationBlockElement,
-                    variationBlockElementStyles
-                  ]) => {
-                    if (variationBlockElementStyles && ELEMENTS[variationBlockElement]) {
-                      nodes.push({
-                        styles: variationBlockElementStyles,
-                        selector: scopeSelector(
-                          variationBlockSelector,
-                          ELEMENTS[variationBlockElement]
-                        )
-                      });
-                    }
-                  }
-                );
-              }
-            );
-          }
-        );
-        blockStyles.variations = variations;
-      }
-      if (blockSelectors?.[blockName]?.selector) {
-        nodes.push({
-          duotoneSelector: blockSelectors[blockName].duotoneSelector,
-          fallbackGapValue: blockSelectors[blockName].fallbackGapValue,
-          hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport,
-          selector: blockSelectors[blockName].selector,
-          styles: blockStyles,
-          featureSelectors: blockSelectors[blockName].featureSelectors,
-          styleVariationSelectors: blockSelectors[blockName].styleVariationSelectors
-        });
-      }
-      Object.entries(node?.elements ?? {}).forEach(
-        ([elementName, value]) => {
-          if (value && blockSelectors?.[blockName] && ELEMENTS[elementName]) {
-            nodes.push({
-              styles: value,
-              selector: blockSelectors[blockName]?.selector.split(",").map((sel) => {
-                const elementSelectors = ELEMENTS[elementName].split(",");
-                return elementSelectors.map(
-                  (elementSelector) => sel + " " + elementSelector
-                );
-              }).join(",")
-            });
-          }
-        }
-      );
-    }
-  );
-  return nodes;
-};
-const getNodesWithSettings = (tree, blockSelectors) => {
-  const nodes = [];
-  if (!tree?.settings) {
-    return nodes;
-  }
-  const pickPresets = (treeToPickFrom) => {
-    let presets2 = {};
-    PRESET_METADATA.forEach(({ path }) => {
-      const value = getValueFromObjectPath(treeToPickFrom, path, false);
-      if (value !== false) {
-        presets2 = setImmutably(presets2, path, value);
-      }
-    });
-    return presets2;
-  };
-  const presets = pickPresets(tree.settings);
-  const custom = tree.settings?.custom;
-  if (Object.keys(presets).length > 0 || custom) {
-    nodes.push({
-      presets,
-      custom,
-      selector: ROOT_CSS_PROPERTIES_SELECTOR
-    });
-  }
-  Object.entries(tree.settings?.blocks ?? {}).forEach(
-    ([blockName, node]) => {
-      const blockPresets = pickPresets(node);
-      const blockCustom = node.custom;
-      if (Object.keys(blockPresets).length > 0 || blockCustom) {
-        nodes.push({
-          presets: blockPresets,
-          custom: blockCustom,
-          selector: blockSelectors[blockName]?.selector
-        });
-      }
-    }
-  );
-  return nodes;
-};
-const toCustomProperties = (tree, blockSelectors) => {
-  const settings = getNodesWithSettings(tree, blockSelectors);
-  let ruleset = "";
-  settings.forEach(({ presets, custom, selector }) => {
-    const declarations = getPresetsDeclarations(presets, tree?.settings);
-    const customProps = flattenTree(custom, "--wp--custom--", "--");
-    if (customProps.length > 0) {
-      declarations.push(...customProps);
-    }
-    if (declarations.length > 0) {
-      ruleset += `${selector}{${declarations.join(";")};}`;
-    }
-  });
-  return ruleset;
-};
-const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = void 0) => {
-  const options = {
-    blockGap: true,
-    blockStyles: true,
-    layoutStyles: true,
-    marginReset: true,
-    presets: true,
-    rootPadding: true,
-    variationStyles: false,
-    ...styleOptions
-  };
-  const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
-  const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
-  const { contentSize, wideSize } = tree?.settings?.layout || {};
-  const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles;
-  let ruleset = "";
-  if (options.presets && (contentSize || wideSize)) {
-    ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} {`;
-    ruleset = contentSize ? ruleset + ` --wp--style--global--content-size: ${contentSize};` : ruleset;
-    ruleset = wideSize ? ruleset + ` --wp--style--global--wide-size: ${wideSize};` : ruleset;
-    ruleset += "}";
-  }
-  if (hasBodyStyles) {
-    ruleset += ":where(body) {margin: 0;";
-    if (options.rootPadding && useRootPaddingAlign) {
-      ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
-				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
-				.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }
-				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0;
-				`;
-    }
-    ruleset += "}";
-  }
-  if (options.blockStyles) {
-    nodesWithStyles.forEach(
-      ({
-        selector,
-        duotoneSelector,
-        styles,
-        fallbackGapValue,
-        hasLayoutSupport,
-        featureSelectors,
-        styleVariationSelectors,
-        skipSelectorWrapper
-      }) => {
-        if (featureSelectors) {
-          const featureDeclarations = getFeatureDeclarations(
-            featureSelectors,
-            styles
-          );
-          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,
-          tree,
-          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) {
-                  const featureDeclarations = getFeatureDeclarations(
-                    featureSelectors,
-                    styleVariations
-                  );
-                  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})`
-                  );
-                }
-              }
-            }
-          );
-        }
-        const pseudoSelectorStyles = Object.entries(styles).filter(
-          ([key]) => key.startsWith(":")
-        );
-        if (pseudoSelectorStyles?.length) {
-          pseudoSelectorStyles.forEach(
-            ([pseudoKey, pseudoStyle]) => {
-              const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
-              if (!pseudoDeclarations?.length) {
-                return;
-              }
-              const _selector = selector.split(",").map((sel) => sel + pseudoKey).join(",");
-              const pseudoRule = `:root :where(${_selector}){${pseudoDeclarations.join(
-                ";"
-              )};}`;
-              ruleset += pseudoRule;
-            }
-          );
-        }
-      }
-    );
-  }
-  if (options.layoutStyles) {
-    ruleset = ruleset + ".wp-site-blocks > .alignleft { float: left; margin-right: 2em; }";
-    ruleset = ruleset + ".wp-site-blocks > .alignright { float: right; margin-left: 2em; }";
-    ruleset = ruleset + ".wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }";
-  }
-  if (options.blockGap && hasBlockGapSupport) {
-    const gapValue = getGapCSSValue(tree?.styles?.spacing?.blockGap) || "0.5em";
-    ruleset = ruleset + `:root :where(.wp-site-blocks) > * { margin-block-start: ${gapValue}; margin-block-end: 0; }`;
-    ruleset = ruleset + ":root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }";
-    ruleset = ruleset + ":root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }";
-  }
-  if (options.presets) {
-    nodesWithSettings.forEach(({ selector, presets }) => {
-      if (ROOT_BLOCK_SELECTOR === selector || ROOT_CSS_PROPERTIES_SELECTOR === selector) {
-        selector = "";
-      }
-      const classes = getPresetsClasses(selector, presets);
-      if (classes.length > 0) {
-        ruleset += classes;
-      }
-    });
-  }
-  return ruleset;
-};
-function toSvgFilters(tree, blockSelectors) {
-  const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(({ presets }) => {
-    return getPresetsSvgFilters(presets);
-  });
-}
-const getSelectorsConfig = (blockType, rootSelector) => {
-  if (blockType?.selectors && Object.keys(blockType.selectors).length > 0) {
-    return blockType.selectors;
-  }
-  const config = { root: rootSelector };
-  Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(
-    ([featureKey, featureName]) => {
-      const featureSelector = getBlockCSSSelector(
-        blockType,
-        featureKey
-      );
-      if (featureSelector) {
-        config[featureName] = featureSelector;
-      }
-    }
-  );
-  return config;
-};
-const getBlockSelectors = (blockTypes, getBlockStyles, variationInstanceId) => {
-  const result = {};
-  blockTypes.forEach((blockType) => {
-    const name = blockType.name;
-    const selector = getBlockCSSSelector(blockType);
-    let duotoneSelector = getBlockCSSSelector(
-      blockType,
-      "filter.duotone"
-    );
-    if (!duotoneSelector) {
-      const rootSelector = getBlockCSSSelector(blockType);
-      const duotoneSupport = getBlockSupport(
-        blockType,
-        "color.__experimentalDuotone",
-        false
-      );
-      duotoneSelector = duotoneSupport && scopeSelector(rootSelector, duotoneSupport);
-    }
-    const hasLayoutSupport = !!blockType?.supports?.layout || !!blockType?.supports?.__experimentalLayout;
-    const fallbackGapValue = blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
-    const blockStyleVariations = getBlockStyles(name);
-    const styleVariationSelectors = {};
-    blockStyleVariations?.forEach((variation) => {
-      const variationSuffix = variationInstanceId ? `-${variationInstanceId}` : "";
-      const variationName = `${variation.name}${variationSuffix}`;
-      const styleVariationSelector = getBlockStyleVariationSelector(
-        variationName,
-        selector
-      );
-      styleVariationSelectors[variationName] = styleVariationSelector;
-    });
-    const featureSelectors = getSelectorsConfig(blockType, selector);
-    result[name] = {
-      duotoneSelector,
-      fallbackGapValue,
-      featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : void 0,
-      hasLayoutSupport,
-      name,
-      selector,
-      styleVariationSelectors: blockStyleVariations?.length ? styleVariationSelectors : void 0
-    };
-  });
-  return result;
-};
-function updateConfigWithSeparator(config) {
-  const needsSeparatorStyleUpdate = config.styles?.blocks?.["core/separator"] && config.styles?.blocks?.["core/separator"].color?.background && !config.styles?.blocks?.["core/separator"].color?.text && !config.styles?.blocks?.["core/separator"].border?.color;
-  if (needsSeparatorStyleUpdate) {
-    return {
-      ...config,
-      styles: {
-        ...config.styles,
-        blocks: {
-          ...config.styles.blocks,
-          "core/separator": {
-            ...config.styles.blocks["core/separator"],
-            color: {
-              ...config.styles.blocks["core/separator"].color,
-              text: config.styles?.blocks["core/separator"].color.background
-            }
-          }
-        }
-      }
-    };
-  }
-  return config;
-}
-function processCSSNesting(css, blockSelector) {
-  let processedCSS = "";
-  if (!css || css.trim() === "") {
-    return processedCSS;
-  }
-  const parts = css.split("&");
-  parts.forEach((part) => {
-    if (!part || part.trim() === "") {
-      return;
-    }
-    const isRootCss = !part.includes("{");
-    if (isRootCss) {
-      processedCSS += `:root :where(${blockSelector}){${part.trim()}}`;
-    } else {
-      const splitPart = part.replace("}", "").split("{");
-      if (splitPart.length !== 2) {
-        return;
-      }
-      const [nestedSelector, cssValue] = splitPart;
-      const matches = nestedSelector.match(/([>+~\s]*::[a-zA-Z-]+)/);
-      const pseudoPart = matches ? matches[1] : "";
-      const withoutPseudoElement = matches ? nestedSelector.replace(pseudoPart, "").trim() : nestedSelector.trim();
-      let combinedSelector;
-      if (withoutPseudoElement === "") {
-        combinedSelector = blockSelector;
-      } else {
-        combinedSelector = nestedSelector.startsWith(" ") ? scopeSelector(blockSelector, withoutPseudoElement) : appendToSelector(blockSelector, withoutPseudoElement);
-      }
-      processedCSS += `:root :where(${combinedSelector})${pseudoPart}{${cssValue.trim()}}`;
-    }
-  });
-  return processedCSS;
-}
-function useGlobalStylesOutputWithConfig(mergedConfig = {}, disableRootPadding) {
-  const [blockGap] = useGlobalSetting("spacing.blockGap");
-  const hasBlockGapSupport = blockGap !== null;
-  const hasFallbackGapSupport = !hasBlockGapSupport;
-  const disableLayoutStyles = useSelect((select) => {
-    const { getSettings } = select(blockEditorStore);
-    return !!getSettings().disableLayoutStyles;
-  });
-  const { getBlockStyles } = useSelect(blocksStore);
-  return useMemo(() => {
-    if (!mergedConfig?.styles || !mergedConfig?.settings) {
-      return [];
-    }
-    const updatedConfig = updateConfigWithSeparator(mergedConfig);
-    const blockSelectors = getBlockSelectors(
-      getBlockTypes(),
-      getBlockStyles
-    );
-    const customProperties = toCustomProperties(
-      updatedConfig,
-      blockSelectors
-    );
-    const globalStyles = toStyles(
-      updatedConfig,
-      blockSelectors,
-      hasBlockGapSupport,
-      hasFallbackGapSupport,
-      disableLayoutStyles,
-      disableRootPadding
-    );
-    const svgs = toSvgFilters(updatedConfig, blockSelectors);
-    const styles = [
-      {
-        css: customProperties,
-        isGlobalStyles: true
-      },
-      {
-        css: globalStyles,
-        isGlobalStyles: true
-      },
-      // Load custom CSS in own stylesheet so that any invalid CSS entered in the input won't break all the global styles in the editor.
-      {
-        css: updatedConfig.styles.css ?? "",
-        isGlobalStyles: true
-      },
-      {
-        assets: svgs,
-        __unstableType: "svg",
-        isGlobalStyles: true
-      }
-    ];
-    getBlockTypes().forEach((blockType) => {
-      if (updatedConfig.styles.blocks[blockType.name]?.css) {
-        const selector = blockSelectors[blockType.name].selector;
-        styles.push({
-          css: processCSSNesting(
-            updatedConfig.styles.blocks[blockType.name]?.css,
-            selector
-          ),
-          isGlobalStyles: true
-        });
-      }
-    });
-    return [styles, updatedConfig.settings];
-  }, [
-    hasBlockGapSupport,
-    hasFallbackGapSupport,
-    mergedConfig,
-    disableLayoutStyles,
-    disableRootPadding,
-    getBlockStyles
-  ]);
-}
-function useGlobalStylesOutput(disableRootPadding = false) {
-  const { merged: mergedConfig } = useContext(GlobalStylesContext);
-  return useGlobalStylesOutputWithConfig(mergedConfig, disableRootPadding);
-}
-export {
-  getBlockSelectors,
-  getLayoutStyles,
-  getNodesWithSettings,
-  getNodesWithStyles,
-  getStylesDeclarations,
-  processCSSNesting,
-  toCustomProperties,
-  toStyles,
-  toSvgFilters,
-  useGlobalStylesOutput,
-  useGlobalStylesOutputWithConfig
-};
-//# sourceMappingURL=use-global-styles-output.js.map