@wordpress/block-editor 15.4.1-next.f56bd8138.0 → 15.5.1-next.47f435fc9.0

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

@@ -1,141 +1,154 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_global_styles_output_exports = {};
+__export(use_global_styles_output_exports, {
+  getBlockSelectors: () => getBlockSelectors,
+  getLayoutStyles: () => getLayoutStyles,
+  getNodesWithSettings: () => getNodesWithSettings,
+  getNodesWithStyles: () => getNodesWithStyles,
+  getStylesDeclarations: () => getStylesDeclarations,
+  processCSSNesting: () => processCSSNesting,
+  toCustomProperties: () => toCustomProperties,
+  toStyles: () => toStyles,
+  toSvgFilters: () => toSvgFilters,
+  useGlobalStylesOutput: () => useGlobalStylesOutput,
+  useGlobalStylesOutputWithConfig: () => useGlobalStylesOutputWithConfig
 });
-exports.getBlockSelectors = void 0;
-exports.getLayoutStyles = getLayoutStyles;
-exports.getNodesWithStyles = exports.getNodesWithSettings = void 0;
-exports.getStylesDeclarations = getStylesDeclarations;
-exports.processCSSNesting = processCSSNesting;
-exports.toStyles = exports.toCustomProperties = void 0;
-exports.toSvgFilters = toSvgFilters;
-exports.useGlobalStylesOutput = useGlobalStylesOutput;
-exports.useGlobalStylesOutputWithConfig = useGlobalStylesOutputWithConfig;
-var _blocks = require("@wordpress/blocks");
-var _data = require("@wordpress/data");
-var _element = require("@wordpress/element");
-var _styleEngine = require("@wordpress/style-engine");
-var _components = require("@wordpress/components");
-var _utils = require("./utils");
-var _getBlockCssSelector = require("./get-block-css-selector");
-var _typographyUtils = require("./typography-utils");
-var _context = require("./context");
-var _hooks = require("./hooks");
-var _utils2 = require("../duotone/utils");
-var _gap = require("../../hooks/gap");
-var _background = require("../../hooks/background");
-var _store = require("../../store");
-var _definitions = require("../../layouts/definitions");
-var _object = require("../../utils/object");
-var _lockUnlock = require("../../lock-unlock");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-// Elements that rely on class names in their selectors.
+module.exports = __toCommonJS(use_global_styles_output_exports);
+var import_blocks = require("@wordpress/blocks");
+var import_data = require("@wordpress/data");
+var import_element = require("@wordpress/element");
+var import_style_engine = require("@wordpress/style-engine");
+var import_components = require("@wordpress/components");
+var import_utils = require("./utils");
+var import_get_block_css_selector = require("./get-block-css-selector");
+var import_typography_utils = require("./typography-utils");
+var import_context = require("./context");
+var import_hooks = require("./hooks");
+var import_utils2 = require("../duotone/utils");
+var import_gap = require("../../hooks/gap");
+var import_background = require("../../hooks/background");
+var import_store = require("../../store");
+var import_definitions = require("../../layouts/definitions");
+var import_object = require("../../utils/object");
+var import_lock_unlock = require("../../lock-unlock");
 const ELEMENT_CLASS_NAMES = {
-  button: 'wp-element-button',
-  caption: 'wp-element-caption'
+  button: "wp-element-button",
+  caption: "wp-element-caption"
 };
-
-// List of block support features that can have their related styles
-// generated under their own feature level selector rather than the block's.
 const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
-  __experimentalBorder: 'border',
-  color: 'color',
-  spacing: 'spacing',
-  typography: 'typography'
+  __experimentalBorder: "border",
+  color: "color",
+  spacing: "spacing",
+  typography: "typography"
 };
-const {
-  kebabCase
-} = (0, _lockUnlock.unlock)(_components.privateApis);
-
-/**
- * Transform given preset tree into a set of style declarations.
- *
- * @param {Object} blockPresets
- * @param {Object} mergedSettings Merged theme.json settings.
- *
- * @return {Array<Object>} An array of style declarations.
- */
+const { kebabCase } = (0, import_lock_unlock.unlock)(import_components.privateApis);
 function getPresetsDeclarations(blockPresets = {}, mergedSettings) {
-  return _utils.PRESET_METADATA.reduce((declarations, {
-    path,
-    valueKey,
-    valueFunc,
-    cssVarInfix
-  }) => {
-    const presetByOrigin = (0, _object.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;
-  }, []);
-}
-
-/**
- * Transform given preset tree into a set of preset class declarations.
- *
- * @param {?string} blockSelector
- * @param {Object}  blockPresets
- * @return {string} CSS declarations for the preset classes.
- */
-function getPresetsClasses(blockSelector = '*', blockPresets = {}) {
-  return _utils.PRESET_METADATA.reduce((declarations, {
-    path,
-    cssVarInfix,
-    classes
-  }) => {
-    if (!classes) {
-      return declarations;
-    }
-    const presetByOrigin = (0, _object.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(',') // Selector can be "h1, h2, h3"
-            .map(selector => `${selector}${classSelectorToUse}`).join(',');
-            const value = `var(--wp--preset--${cssVarInfix}--${kebabCase(slug)})`;
-            declarations += `${selectorToUse}{${propertyName}: ${value} !important;}`;
+  return import_utils.PRESET_METADATA.reduce(
+    (declarations, { path, valueKey, valueFunc, cssVarInfix }) => {
+      const presetByOrigin = (0, import_object.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 import_utils.PRESET_METADATA.reduce(
+    (declarations, { path, cssVarInfix, classes }) => {
+      if (!classes) {
+        return declarations;
       }
-    });
-    return declarations;
-  }, '');
+      const presetByOrigin = (0, import_object.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 _utils.PRESET_METADATA.filter(
-  // Duotone are the only type of filters for now.
-  metadata => metadata.path.at(-1) === 'duotone').flatMap(metadata => {
-    const presetByOrigin = (0, _object.getValueFromObjectPath)(blockPresets, metadata.path, {});
-    return ['default', 'theme'].filter(origin => presetByOrigin[origin]).flatMap(origin => presetByOrigin[origin].map(preset => (0, _utils2.getDuotoneFilter)(`wp-duotone-${preset.slug}`, preset.colors))).join('');
+  return import_utils.PRESET_METADATA.filter(
+    // Duotone are the only type of filters for now.
+    (metadata) => metadata.path.at(-1) === "duotone"
+  ).flatMap((metadata) => {
+    const presetByOrigin = (0, import_object.getValueFromObjectPath)(
+      blockPresets,
+      metadata.path,
+      {}
+    );
+    return ["default", "theme"].filter((origin) => presetByOrigin[origin]).flatMap(
+      (origin) => presetByOrigin[origin].map(
+        (preset) => (0, import_utils2.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('/', '-'));
+  Object.keys(input).forEach((key) => {
+    const newKey = prefix + kebabCase(key.replace("/", "-"));
     const newLeaf = input[key];
     if (newLeaf instanceof Object) {
       const newPrefix = newKey + token;
@@ -146,341 +159,263 @@ function flattenTree(input = {}, prefix, token) {
   });
   return result;
 }
-
-/**
- * Gets variation selector string from feature selector.
- *
- * @param {string} featureSelector        The feature selector.
- *
- * @param {string} styleVariationSelector The style variation selector.
- * @return {string} Combined selector string.
- */
 function concatFeatureVariationSelectorString(featureSelector, styleVariationSelector) {
-  const featureSelectors = featureSelector.split(',');
+  const featureSelectors = featureSelector.split(",");
   const combinedSelectors = [];
-  featureSelectors.forEach(selector => {
-    combinedSelectors.push(`${styleVariationSelector.trim()}${selector.trim()}`);
+  featureSelectors.forEach((selector) => {
+    combinedSelectors.push(
+      `${styleVariationSelector.trim()}${selector.trim()}`
+    );
   });
-  return combinedSelectors.join(', ');
+  return combinedSelectors.join(", ");
 }
-
-/**
- * Generate style declarations for a block's custom feature and subfeature
- * selectors.
- *
- * NOTE: The passed `styles` object will be mutated by this function.
- *
- * @param {Object} selectors Custom selectors object for a block.
- * @param {Object} styles    A block's styles object.
- *
- * @return {Object} Style declarations.
- */
 const getFeatureDeclarations = (selectors, styles) => {
   const declarations = {};
   Object.entries(selectors).forEach(([feature, selector]) => {
-    // We're only processing features/subfeatures that have styles.
-    if (feature === 'root' || !styles?.[feature]) {
+    if (feature === "root" || !styles?.[feature]) {
       return;
     }
-    const isShorthand = typeof selector === 'string';
-
-    // If we have a selector object instead of shorthand process it.
+    const isShorthand = typeof selector === "string";
     if (!isShorthand) {
-      Object.entries(selector).forEach(([subfeature, subfeatureSelector]) => {
-        // Don't process root feature selector yet or any
-        // subfeature that doesn't have a style.
-        if (subfeature === 'root' || !styles?.[feature][subfeature]) {
-          return;
-        }
-
-        // Create a temporary styles object and build
-        // declarations for subfeature.
-        const subfeatureStyles = {
-          [feature]: {
-            [subfeature]: styles[feature][subfeature]
+      Object.entries(selector).forEach(
+        ([subfeature, subfeatureSelector]) => {
+          if (subfeature === "root" || !styles?.[feature][subfeature]) {
+            return;
           }
-        };
-        const newDeclarations = getStylesDeclarations(subfeatureStyles);
-
-        // Merge new declarations in with any others that
-        // share the same selector.
-        declarations[subfeatureSelector] = [...(declarations[subfeatureSelector] || []), ...newDeclarations];
-
-        // Remove the subfeature's style now it will be
-        // included under its own selector not the block's.
-        delete styles[feature][subfeature];
-      });
+          const subfeatureStyles = {
+            [feature]: {
+              [subfeature]: styles[feature][subfeature]
+            }
+          };
+          const newDeclarations = getStylesDeclarations(subfeatureStyles);
+          declarations[subfeatureSelector] = [
+            ...declarations[subfeatureSelector] || [],
+            ...newDeclarations
+          ];
+          delete styles[feature][subfeature];
+        }
+      );
     }
-
-    // Now subfeatures have been processed and removed, we can
-    // process root, or shorthand, feature selectors.
     if (isShorthand || selector.root) {
       const featureSelector = isShorthand ? selector : selector.root;
-
-      // Create temporary style object and build declarations for feature.
-      const featureStyles = {
-        [feature]: styles[feature]
-      };
+      const featureStyles = { [feature]: styles[feature] };
       const newDeclarations = getStylesDeclarations(featureStyles);
-
-      // Merge new declarations with any others that share the selector.
-      declarations[featureSelector] = [...(declarations[featureSelector] || []), ...newDeclarations];
-
-      // Remove the feature from the block's styles now as it will be
-      // included under its own selector not the block's.
+      declarations[featureSelector] = [
+        ...declarations[featureSelector] || [],
+        ...newDeclarations
+      ];
       delete styles[feature];
     }
   });
   return declarations;
 };
-
-/**
- * Transform given style tree into a set of style declarations.
- *
- * @param {Object}  blockStyles         Block styles.
- *
- * @param {string}  selector            The selector these declarations should attach to.
- *
- * @param {boolean} useRootPaddingAlign Whether to use CSS custom properties in root selector.
- *
- * @param {Object}  tree                A theme.json tree containing layout definitions.
- *
- * @param {boolean} disableRootPadding  Whether to force disable the root padding styles.
- * @return {Array} An array of style declarations.
- */
-function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAlign, tree = {}, disableRootPadding = false) {
-  const isRoot = _utils.ROOT_BLOCK_SELECTOR === selector;
-  const output = Object.entries(_blocks.__EXPERIMENTAL_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 = (0, _object.getValueFromObjectPath)(blockStyles, pathToValue);
-
-    // Root-level padding styles don't currently support strings with CSS shorthand values.
-    // This may change: https://github.com/WordPress/gutenberg/issues/40132.
-    if (key === '--wp--style--root--padding' && (typeof styleValue === 'string' || !useRootPaddingAlign)) {
+function getStylesDeclarations(blockStyles = {}, selector = "", useRootPaddingAlign, tree = {}, disableRootPadding = false) {
+  const isRoot = import_utils.ROOT_BLOCK_SELECTOR === selector;
+  const output = Object.entries(import_blocks.__EXPERIMENTAL_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 = (0, import_object.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 (!(0, import_object.getValueFromObjectPath)(styleValue, [prop], false)) {
+            return;
+          }
+          const cssProperty = name.startsWith("--") ? name : kebabCase(name);
+          declarations.push(
+            `${cssProperty}: ${(0, import_style_engine.getCSSValueFromRawStyle)(
+              (0, import_object.getValueFromObjectPath)(styleValue, [prop])
+            )}`
+          );
+        });
+      } else if ((0, import_object.getValueFromObjectPath)(blockStyles, pathToValue, false)) {
+        const cssProperty = key.startsWith("--") ? key : kebabCase(key);
+        declarations.push(
+          `${cssProperty}: ${(0, import_style_engine.getCSSValueFromRawStyle)(
+            (0, import_object.getValueFromObjectPath)(blockStyles, pathToValue)
+          )}`
+        );
+      }
       return declarations;
-    }
-    if (properties && typeof styleValue !== 'string') {
-      Object.entries(properties).forEach(entry => {
-        const [name, prop] = entry;
-        if (!(0, _object.getValueFromObjectPath)(styleValue, [prop], false)) {
-          // Do not create a declaration
-          // for sub-properties that don't have any value.
-          return;
-        }
-        const cssProperty = name.startsWith('--') ? name : kebabCase(name);
-        declarations.push(`${cssProperty}: ${(0, _styleEngine.getCSSValueFromRawStyle)((0, _object.getValueFromObjectPath)(styleValue, [prop]))}`);
-      });
-    } else if ((0, _object.getValueFromObjectPath)(blockStyles, pathToValue, false)) {
-      const cssProperty = key.startsWith('--') ? key : kebabCase(key);
-      declarations.push(`${cssProperty}: ${(0, _styleEngine.getCSSValueFromRawStyle)((0, _object.getValueFromObjectPath)(blockStyles, pathToValue))}`);
-    }
-    return declarations;
-  }, []);
-
-  /*
-   * Preprocess background image values.
-   *
-   * Note: As we absorb more and more styles into the engine, we could simplify this function.
-   * A refactor is for the style engine to handle ref resolution (and possibly defaults)
-   * via a public util used internally and externally. Theme.json tree and defaults could be passed
-   * as options.
-   */
+    },
+    []
+  );
   if (!!blockStyles.background) {
-    /*
-     * Resolve dynamic values before they are compiled by the style engine,
-     * which doesn't (yet) resolve dynamic values.
-     */
     if (blockStyles.background?.backgroundImage) {
-      blockStyles.background.backgroundImage = (0, _utils.getResolvedValue)(blockStyles.background.backgroundImage, tree);
+      blockStyles.background.backgroundImage = (0, import_utils.getResolvedValue)(
+        blockStyles.background.backgroundImage,
+        tree
+      );
     }
-
-    /*
-     * Set default values for block background styles.
-     * Top-level styles are an exception as they are applied to the body.
-     */
     if (!isRoot && !!blockStyles.background?.backgroundImage?.id) {
       blockStyles = {
         ...blockStyles,
         background: {
           ...blockStyles.background,
-          ...(0, _background.setBackgroundStyleDefaults)(blockStyles.background)
+          ...(0, import_background.setBackgroundStyleDefaults)(blockStyles.background)
         }
       };
     }
   }
-  const extraRules = (0, _styleEngine.getCSSRules)(blockStyles);
-  extraRules.forEach(rule => {
-    // Don't output padding properties if padding variables are set or if we're not editing a full template.
-    if (isRoot && (useRootPaddingAlign || disableRootPadding) && rule.key.startsWith('padding')) {
+  const extraRules = (0, import_style_engine.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 = (0, _utils.getResolvedValue)(rule.value, tree, null);
-
-    // Calculate fluid typography rules where available.
-    if (cssProperty === 'font-size') {
-      /*
-       * getTypographyFontSizeValue() will check
-       * if fluid typography has been activated and also
-       * whether the incoming value can be converted to a fluid value.
-       * Values that already have a "clamp()" function will not pass the test,
-       * and therefore the original $value will be returned.
-       */
-      ruleValue = (0, _typographyUtils.getTypographyFontSizeValue)({
-        size: ruleValue
-      }, tree?.settings);
+    const cssProperty = rule.key.startsWith("--") ? rule.key : kebabCase(rule.key);
+    let ruleValue = (0, import_utils.getResolvedValue)(rule.value, tree, null);
+    if (cssProperty === "font-size") {
+      ruleValue = (0, import_typography_utils.getTypographyFontSizeValue)(
+        { size: ruleValue },
+        tree?.settings
+      );
     }
-
-    // For aspect ratio to work, other dimensions rules (and Cover block defaults) must be unset.
-    // This ensures that a fixed height does not override the aspect ratio.
-    if (cssProperty === 'aspect-ratio') {
-      output.push('min-height: unset');
+    if (cssProperty === "aspect-ratio") {
+      output.push("min-height: unset");
     }
     output.push(`${cssProperty}: ${ruleValue}`);
   });
   return output;
 }
-
-/**
- * Get generated CSS for layout styles by looking up layout definitions provided
- * in theme.json, and outputting common layout styles, and specific blockGap values.
- *
- * @param {Object}  props
- * @param {Object}  props.layoutDefinitions     Layout definitions, keyed by layout type.
- * @param {Object}  props.style                 A style object containing spacing values.
- * @param {string}  props.selector              Selector used to group together layout styling rules.
- * @param {boolean} props.hasBlockGapSupport    Whether or not the theme opts-in to blockGap support.
- * @param {boolean} props.hasFallbackGapSupport Whether or not the theme allows fallback gap styles.
- * @param {?string} props.fallbackGapValue      An optional fallback gap value if no real gap value is available.
- * @return {string} Generated CSS rules for the layout styles.
- */
 function getLayoutStyles({
-  layoutDefinitions = _definitions.LAYOUT_DEFINITIONS,
+  layoutDefinitions = import_definitions.LAYOUT_DEFINITIONS,
   style,
   selector,
   hasBlockGapSupport,
   hasFallbackGapSupport,
   fallbackGapValue
 }) {
-  let ruleset = '';
-  let gapValue = hasBlockGapSupport ? (0, _gap.getGapCSSValue)(style?.spacing?.blockGap) : '';
-
-  // Ensure a fallback gap value for the root layout definitions,
-  // and use a fallback value if one is provided for the current block.
+  let ruleset = "";
+  let gapValue = hasBlockGapSupport ? (0, import_gap.getGapCSSValue)(style?.spacing?.blockGap) : "";
   if (hasFallbackGapSupport) {
-    if (selector === _utils.ROOT_BLOCK_SELECTOR) {
-      gapValue = !gapValue ? '0.5em' : gapValue;
+    if (selector === import_utils.ROOT_BLOCK_SELECTOR) {
+      gapValue = !gapValue ? "0.5em" : gapValue;
     } else if (!hasBlockGapSupport && fallbackGapValue) {
       gapValue = fallbackGapValue;
     }
   }
   if (gapValue && layoutDefinitions) {
-    Object.values(layoutDefinitions).forEach(({
-      className,
-      name,
-      spacingStyles
-    }) => {
-      // Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
-      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) {
-              // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
-              combinedSelector = selector === _utils.ROOT_BLOCK_SELECTOR ? `:where(.${className}${spacingStyle?.selector || ''})` : `:where(${selector}.${className}${spacingStyle?.selector || ''})`;
-            } else {
-              combinedSelector = selector === _utils.ROOT_BLOCK_SELECTOR ? `:root :where(.${className})${spacingStyle?.selector || ''}` : `:root :where(${selector}-${className})${spacingStyle?.selector || ''}`;
+    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}`
+                  );
+                }
+              );
             }
-            ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
-          }
-        });
+            if (declarations.length) {
+              let combinedSelector = "";
+              if (!hasBlockGapSupport) {
+                combinedSelector = selector === import_utils.ROOT_BLOCK_SELECTOR ? `:where(.${className}${spacingStyle?.selector || ""})` : `:where(${selector}.${className}${spacingStyle?.selector || ""})`;
+              } else {
+                combinedSelector = selector === import_utils.ROOT_BLOCK_SELECTOR ? `:root :where(.${className})${spacingStyle?.selector || ""}` : `:root :where(${selector}-${className})${spacingStyle?.selector || ""}`;
+              }
+              ruleset += `${combinedSelector} { ${declarations.join(
+                "; "
+              )}; }`;
+            }
+          });
+        }
       }
-    });
-    // For backwards compatibility, ensure the legacy block gap CSS variable is still available.
-    if (selector === _utils.ROOT_BLOCK_SELECTOR && hasBlockGapSupport) {
-      ruleset += `${_utils.ROOT_CSS_PROPERTIES_SELECTOR} { --wp--style--block-gap: ${gapValue}; }`;
+    );
+    if (selector === import_utils.ROOT_BLOCK_SELECTOR && hasBlockGapSupport) {
+      ruleset += `${import_utils.ROOT_CSS_PROPERTIES_SELECTOR} { --wp--style--block-gap: ${gapValue}; }`;
     }
   }
-
-  // Output base styles
-  if (selector === _utils.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('; ')}; }`;
-          }
-        });
+  if (selector === import_utils.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'];
+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));
-  // clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it
-  const clonedEntries = pickedEntries.map(([key, style]) => [key, JSON.parse(JSON.stringify(style))]);
+  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) => {
-  var _tree$styles$blocks;
   const nodes = [];
   if (!tree?.styles) {
     return nodes;
   }
-
-  // Top-level.
   const styles = pickStyleKeys(tree.styles);
   if (styles) {
     nodes.push({
       styles,
-      selector: _utils.ROOT_BLOCK_SELECTOR,
+      selector: import_utils.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(_blocks.__EXPERIMENTAL_ELEMENTS).forEach(([name, selector]) => {
+  Object.entries(import_blocks.__EXPERIMENTAL_ELEMENTS).forEach(([name, selector]) => {
     if (tree.styles?.elements?.[name]) {
       nodes.push({
         styles: tree.styles?.elements?.[name],
@@ -491,160 +426,169 @@ const getNodesWithStyles = (tree, blockSelectors) => {
       });
     }
   });
-
-  // Iterate over blocks: they can have styles & elements.
-  Object.entries((_tree$styles$blocks = tree.styles?.blocks) !== null && _tree$styles$blocks !== void 0 ? _tree$styles$blocks : {}).forEach(([blockName, node]) => {
-    var _node$elements;
-    const blockStyles = pickStyleKeys(node);
-    if (node?.variations) {
-      const variations = {};
-      Object.entries(node.variations).forEach(([variationName, variation]) => {
-        var _variation$elements, _variation$blocks;
-        variations[variationName] = pickStyleKeys(variation);
-        if (variation?.css) {
-          variations[variationName].css = variation.css;
-        }
-        const variationSelector = blockSelectors[blockName]?.styleVariationSelectors?.[variationName];
-
-        // Process the variation's inner element styles.
-        // This comes before the inner block styles so the
-        // element styles within the block type styles take
-        // precedence over these.
-        Object.entries((_variation$elements = variation?.elements) !== null && _variation$elements !== void 0 ? _variation$elements : {}).forEach(([element, elementStyles]) => {
-          if (elementStyles && _blocks.__EXPERIMENTAL_ELEMENTS[element]) {
-            nodes.push({
-              styles: elementStyles,
-              selector: (0, _utils.scopeSelector)(variationSelector, _blocks.__EXPERIMENTAL_ELEMENTS[element])
-            });
-          }
-        });
-
-        // Process the variations inner block type styles.
-        Object.entries((_variation$blocks = variation?.blocks) !== null && _variation$blocks !== void 0 ? _variation$blocks : {}).forEach(([variationBlockName, variationBlockStyles]) => {
-          var _variationBlockStyles;
-          const variationBlockSelector = (0, _utils.scopeSelector)(variationSelector, blockSelectors[variationBlockName]?.selector);
-          const variationDuotoneSelector = (0, _utils.scopeSelector)(variationSelector, blockSelectors[variationBlockName]?.duotoneSelector);
-          const variationFeatureSelectors = (0, _utils.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
-          });
-
-          // Process element styles for the inner blocks
-          // of the variation.
-          Object.entries((_variationBlockStyles = variationBlockStyles.elements) !== null && _variationBlockStyles !== void 0 ? _variationBlockStyles : {}).forEach(([variationBlockElement, variationBlockElementStyles]) => {
-            if (variationBlockElementStyles && _blocks.__EXPERIMENTAL_ELEMENTS[variationBlockElement]) {
-              nodes.push({
-                styles: variationBlockElementStyles,
-                selector: (0, _utils.scopeSelector)(variationBlockSelector, _blocks.__EXPERIMENTAL_ELEMENTS[variationBlockElement])
-              });
+  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;
             }
-          });
-        });
-      });
-      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 = node?.elements) !== null && _node$elements !== void 0 ? _node$elements : {}).forEach(([elementName, value]) => {
-      if (value && blockSelectors?.[blockName] && _blocks.__EXPERIMENTAL_ELEMENTS[elementName]) {
+            const variationSelector = blockSelectors[blockName]?.styleVariationSelectors?.[variationName];
+            Object.entries(variation?.elements ?? {}).forEach(
+              ([element, elementStyles]) => {
+                if (elementStyles && import_blocks.__EXPERIMENTAL_ELEMENTS[element]) {
+                  nodes.push({
+                    styles: elementStyles,
+                    selector: (0, import_utils.scopeSelector)(
+                      variationSelector,
+                      import_blocks.__EXPERIMENTAL_ELEMENTS[element]
+                    )
+                  });
+                }
+              }
+            );
+            Object.entries(variation?.blocks ?? {}).forEach(
+              ([
+                variationBlockName,
+                variationBlockStyles
+              ]) => {
+                const variationBlockSelector = (0, import_utils.scopeSelector)(
+                  variationSelector,
+                  blockSelectors[variationBlockName]?.selector
+                );
+                const variationDuotoneSelector = (0, import_utils.scopeSelector)(
+                  variationSelector,
+                  blockSelectors[variationBlockName]?.duotoneSelector
+                );
+                const variationFeatureSelectors = (0, import_utils.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 && import_blocks.__EXPERIMENTAL_ELEMENTS[variationBlockElement]) {
+                      nodes.push({
+                        styles: variationBlockElementStyles,
+                        selector: (0, import_utils.scopeSelector)(
+                          variationBlockSelector,
+                          import_blocks.__EXPERIMENTAL_ELEMENTS[variationBlockElement]
+                        )
+                      });
+                    }
+                  }
+                );
+              }
+            );
+          }
+        );
+        blockStyles.variations = variations;
+      }
+      if (blockSelectors?.[blockName]?.selector) {
         nodes.push({
-          styles: value,
-          selector: blockSelectors[blockName]?.selector.split(',').map(sel => {
-            const elementSelectors = _blocks.__EXPERIMENTAL_ELEMENTS[elementName].split(',');
-            return elementSelectors.map(elementSelector => sel + ' ' + elementSelector);
-          }).join(',')
+          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] && import_blocks.__EXPERIMENTAL_ELEMENTS[elementName]) {
+            nodes.push({
+              styles: value,
+              selector: blockSelectors[blockName]?.selector.split(",").map((sel) => {
+                const elementSelectors = import_blocks.__EXPERIMENTAL_ELEMENTS[elementName].split(",");
+                return elementSelectors.map(
+                  (elementSelector) => sel + " " + elementSelector
+                );
+              }).join(",")
+            });
+          }
+        }
+      );
+    }
+  );
   return nodes;
 };
-exports.getNodesWithStyles = getNodesWithStyles;
 const getNodesWithSettings = (tree, blockSelectors) => {
-  var _tree$settings$blocks;
   const nodes = [];
   if (!tree?.settings) {
     return nodes;
   }
-  const pickPresets = treeToPickFrom => {
-    let presets = {};
-    _utils.PRESET_METADATA.forEach(({
-      path
-    }) => {
-      const value = (0, _object.getValueFromObjectPath)(treeToPickFrom, path, false);
+  const pickPresets = (treeToPickFrom) => {
+    let presets2 = {};
+    import_utils.PRESET_METADATA.forEach(({ path }) => {
+      const value = (0, import_object.getValueFromObjectPath)(treeToPickFrom, path, false);
       if (value !== false) {
-        presets = (0, _object.setImmutably)(presets, path, value);
+        presets2 = (0, import_object.setImmutably)(presets2, path, value);
       }
     });
-    return presets;
+    return presets2;
   };
-
-  // Top-level.
   const presets = pickPresets(tree.settings);
   const custom = tree.settings?.custom;
   if (Object.keys(presets).length > 0 || custom) {
     nodes.push({
       presets,
       custom,
-      selector: _utils.ROOT_CSS_PROPERTIES_SELECTOR
+      selector: import_utils.ROOT_CSS_PROPERTIES_SELECTOR
     });
   }
-
-  // Blocks.
-  Object.entries((_tree$settings$blocks = tree.settings?.blocks) !== null && _tree$settings$blocks !== void 0 ? _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
-      });
+  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;
 };
-exports.getNodesWithSettings = getNodesWithSettings;
 const toCustomProperties = (tree, blockSelectors) => {
   const settings = getNodesWithSettings(tree, blockSelectors);
-  let ruleset = '';
-  settings.forEach(({
-    presets,
-    custom,
-    selector
-  }) => {
+  let ruleset = "";
+  settings.forEach(({ presets, custom, selector }) => {
     const declarations = getPresetsDeclarations(presets, tree?.settings);
-    const customProps = flattenTree(custom, '--wp--custom--', '--');
+    const customProps = flattenTree(custom, "--wp--custom--", "--");
     if (customProps.length > 0) {
       declarations.push(...customProps);
     }
     if (declarations.length > 0) {
-      ruleset += `${selector}{${declarations.join(';')};}`;
+      ruleset += `${selector}{${declarations.join(";")};}`;
     }
   });
   return ruleset;
 };
-exports.toCustomProperties = toCustomProperties;
-const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = undefined) => {
-  // These allow opting out of certain sets of styles.
+const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = void 0) => {
   const options = {
     blockGap: true,
     blockStyles: true,
@@ -658,35 +602,18 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
   const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
   const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
-  const {
-    contentSize,
-    wideSize
-  } = tree?.settings?.layout || {};
+  const { contentSize, wideSize } = tree?.settings?.layout || {};
   const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles;
-  let ruleset = '';
+  let ruleset = "";
   if (options.presets && (contentSize || wideSize)) {
-    ruleset += `${_utils.ROOT_CSS_PROPERTIES_SELECTOR} {`;
+    ruleset += `${import_utils.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 += '}';
+    ruleset += "}";
   }
   if (hasBodyStyles) {
-    /*
-     * Reset default browser margin on the body element.
-     * This is set on the body selector **before** generating the ruleset
-     * from the `theme.json`. This is to ensure that if the `theme.json` declares
-     * `margin` in its `spacing` declaration for the `body` element then these
-     * user-generated values take precedence in the CSS cascade.
-     * @link https://github.com/WordPress/gutenberg/issues/36147.
-     */
-    ruleset += ':where(body) {margin: 0;';
-
-    // Root padding styles should be output for full templates, patterns and template parts.
+    ruleset += ":where(body) {margin: 0;";
     if (options.rootPadding && useRootPaddingAlign) {
-      /*
-       * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
-       * almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.
-       */
       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); }
@@ -694,141 +621,157 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
 				.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 += '}';
+    ruleset += "}";
   }
   if (options.blockStyles) {
-    nodesWithStyles.forEach(({
-      selector,
-      duotoneSelector,
-      styles,
-      fallbackGapValue,
-      hasLayoutSupport,
-      featureSelectors,
-      styleVariationSelectors,
-      skipSelectorWrapper
-    }) => {
-      // Process styles for block support features with custom feature level
-      // CSS selectors set.
-      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};}`;
+    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(
+              ";"
+            )};}`;
           }
-        });
-      }
-
-      // Process duotone styles.
-      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 && (import_utils.ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport)) {
+          ruleset += getLayoutStyles({
+            style: styles,
+            selector,
+            hasBlockGapSupport,
+            hasFallbackGapSupport,
+            fallbackGapValue
+          });
         }
-      }
-
-      // Process blockGap and layout styles.
-      if (!disableLayoutStyles && (_utils.ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport)) {
-        ruleset += getLayoutStyles({
-          style: styles,
+        const styleDeclarations = getStylesDeclarations(
+          styles,
           selector,
-          hasBlockGapSupport,
-          hasFallbackGapSupport,
-          fallbackGapValue
-        });
-      }
-
-      // Process the remaining block styles (they use either normal block class or __experimentalSelector).
-      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 the block uses any custom selectors for block support, add those first.
-            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};}`;
+          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};}`;
+                      }
+                    }
+                  );
                 }
-              });
-            }
-
-            // Otherwise add regular selectors.
-            const styleVariationDeclarations = getStylesDeclarations(styleVariations, styleVariationSelector, useRootPaddingAlign, tree);
-            if (styleVariationDeclarations.length) {
-              ruleset += `:root :where(${styleVariationSelector}){${styleVariationDeclarations.join(';')};}`;
+                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})`
+                  );
+                }
+              }
             }
-            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;
             }
-          }
-        });
-      }
-
-      // Check for pseudo selector in `styles` and handle separately.
-      const pseudoSelectorStyles = Object.entries(styles).filter(([key]) => key.startsWith(':'));
-      if (pseudoSelectorStyles?.length) {
-        pseudoSelectorStyles.forEach(([pseudoKey, pseudoStyle]) => {
-          const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
-          if (!pseudoDeclarations?.length) {
-            return;
-          }
-
-          // `selector` may be provided in a form
-          // where block level selectors have sub element
-          // selectors appended to them as a comma separated
-          // string.
-          // e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
-          // Split and append pseudo selector to create
-          // the proper rules to target the elements.
-          const _selector = selector.split(',').map(sel => sel + pseudoKey).join(',');
-
-          // As pseudo classes such as :hover, :focus etc. have class-level
-          // specificity, they must use the `:root :where()` wrapper. This.
-          // caps the specificity at `0-1-0` to allow proper nesting of variations
-          // and block type element styles.
-          const pseudoRule = `:root :where(${_selector}){${pseudoDeclarations.join(';')};}`;
-          ruleset += pseudoRule;
-        });
+          );
+        }
       }
-    });
+    );
   }
   if (options.layoutStyles) {
-    /* Add alignment / layout styles */
-    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; }';
+    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) {
-    // Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
-    const gapValue = (0, _gap.getGapCSSValue)(tree?.styles?.spacing?.blockGap) || '0.5em';
+    const gapValue = (0, import_gap.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; }';
+    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 (_utils.ROOT_BLOCK_SELECTOR === selector || _utils.ROOT_CSS_PROPERTIES_SELECTOR === selector) {
-        // Do not add extra specificity for top-level classes.
-        selector = '';
+    nodesWithSettings.forEach(({ selector, presets }) => {
+      if (import_utils.ROOT_BLOCK_SELECTOR === selector || import_utils.ROOT_CSS_PROPERTIES_SELECTOR === selector) {
+        selector = "";
       }
       const classes = getPresetsClasses(selector, presets);
       if (classes.length > 0) {
@@ -838,12 +781,9 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
   }
   return ruleset;
 };
-exports.toStyles = toStyles;
 function toSvgFilters(tree, blockSelectors) {
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(({
-    presets
-  }) => {
+  return nodesWithSettings.flatMap(({ presets }) => {
     return getPresetsSvgFilters(presets);
   });
 }
@@ -851,66 +791,66 @@ 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 = (0, _getBlockCssSelector.getBlockCSSSelector)(blockType, featureKey);
-    if (featureSelector) {
-      config[featureName] = featureSelector;
+  const config = { root: rootSelector };
+  Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(
+    ([featureKey, featureName]) => {
+      const featureSelector = (0, import_get_block_css_selector.getBlockCSSSelector)(
+        blockType,
+        featureKey
+      );
+      if (featureSelector) {
+        config[featureName] = featureSelector;
+      }
     }
-  });
+  );
   return config;
 };
 const getBlockSelectors = (blockTypes, getBlockStyles, variationInstanceId) => {
   const result = {};
-  blockTypes.forEach(blockType => {
+  blockTypes.forEach((blockType) => {
     const name = blockType.name;
-    const selector = (0, _getBlockCssSelector.getBlockCSSSelector)(blockType);
-    let duotoneSelector = (0, _getBlockCssSelector.getBlockCSSSelector)(blockType, 'filter.duotone');
-
-    // Keep backwards compatibility for support.color.__experimentalDuotone.
+    const selector = (0, import_get_block_css_selector.getBlockCSSSelector)(blockType);
+    let duotoneSelector = (0, import_get_block_css_selector.getBlockCSSSelector)(
+      blockType,
+      "filter.duotone"
+    );
     if (!duotoneSelector) {
-      const rootSelector = (0, _getBlockCssSelector.getBlockCSSSelector)(blockType);
-      const duotoneSupport = (0, _blocks.getBlockSupport)(blockType, 'color.__experimentalDuotone', false);
-      duotoneSelector = duotoneSupport && (0, _utils.scopeSelector)(rootSelector, duotoneSupport);
+      const rootSelector = (0, import_get_block_css_selector.getBlockCSSSelector)(blockType);
+      const duotoneSupport = (0, import_blocks.getBlockSupport)(
+        blockType,
+        "color.__experimentalDuotone",
+        false
+      );
+      duotoneSelector = duotoneSupport && (0, import_utils.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}` : '';
+    blockStyleVariations?.forEach((variation) => {
+      const variationSuffix = variationInstanceId ? `-${variationInstanceId}` : "";
       const variationName = `${variation.name}${variationSuffix}`;
-      const styleVariationSelector = (0, _utils.getBlockStyleVariationSelector)(variationName, selector);
+      const styleVariationSelector = (0, import_utils.getBlockStyleVariationSelector)(
+        variationName,
+        selector
+      );
       styleVariationSelectors[variationName] = styleVariationSelector;
     });
-
-    // For each block support feature add any custom selectors.
     const featureSelectors = getSelectorsConfig(blockType, selector);
     result[name] = {
       duotoneSelector,
       fallbackGapValue,
-      featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : undefined,
+      featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : void 0,
       hasLayoutSupport,
       name,
       selector,
-      styleVariationSelectors: blockStyleVariations?.length ? styleVariationSelectors : undefined
+      styleVariationSelectors: blockStyleVariations?.length ? styleVariationSelectors : void 0
     };
   });
   return result;
 };
-
-/**
- * If there is a separator block whose color is defined in theme.json via background,
- * update the separator color to the same value by using border color.
- *
- * @param {Object} config Theme.json configuration file object.
- * @return {Object} configTheme.json configuration file object updated.
- */
-exports.getBlockSelectors = getBlockSelectors;
 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;
+  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,
@@ -918,11 +858,11 @@ function updateConfigWithSeparator(config) {
         ...config.styles,
         blocks: {
           ...config.styles.blocks,
-          'core/separator': {
-            ...config.styles.blocks['core/separator'],
+          "core/separator": {
+            ...config.styles.blocks["core/separator"],
             color: {
-              ...config.styles.blocks['core/separator'].color,
-              text: config.styles?.blocks['core/separator'].color.background
+              ...config.styles.blocks["core/separator"].color,
+              text: config.styles?.blocks["core/separator"].color.background
             }
           }
         }
@@ -932,133 +872,127 @@ function updateConfigWithSeparator(config) {
   return config;
 }
 function processCSSNesting(css, blockSelector) {
-  let processedCSS = '';
-  if (!css || css.trim() === '') {
+  let processedCSS = "";
+  if (!css || css.trim() === "") {
     return processedCSS;
   }
-
-  // Split CSS nested rules.
-  const parts = css.split('&');
-  parts.forEach(part => {
-    if (!part || part.trim() === '') {
+  const parts = css.split("&");
+  parts.forEach((part) => {
+    if (!part || part.trim() === "") {
       return;
     }
-    const isRootCss = !part.includes('{');
+    const isRootCss = !part.includes("{");
     if (isRootCss) {
-      // If the part doesn't contain braces, it applies to the root level.
       processedCSS += `:root :where(${blockSelector}){${part.trim()}}`;
     } else {
-      // If the part contains braces, it's a nested CSS rule.
-      const splitPart = part.replace('}', '').split('{');
+      const splitPart = part.replace("}", "").split("{");
       if (splitPart.length !== 2) {
         return;
       }
       const [nestedSelector, cssValue] = splitPart;
-
-      // Handle pseudo elements such as ::before, ::after, etc. Regex will also
-      // capture any leading combinator such as >, +, or ~, as well as spaces.
-      // This allows pseudo elements as descendants e.g. `.parent ::before`.
       const matches = nestedSelector.match(/([>+~\s]*::[a-zA-Z-]+)/);
-      const pseudoPart = matches ? matches[1] : '';
-      const withoutPseudoElement = matches ? nestedSelector.replace(pseudoPart, '').trim() : nestedSelector.trim();
+      const pseudoPart = matches ? matches[1] : "";
+      const withoutPseudoElement = matches ? nestedSelector.replace(pseudoPart, "").trim() : nestedSelector.trim();
       let combinedSelector;
-      if (withoutPseudoElement === '') {
-        // Only contained a pseudo element to use the block selector to form
-        // the final `:root :where()` selector.
+      if (withoutPseudoElement === "") {
         combinedSelector = blockSelector;
       } else {
-        // If the nested selector is a descendant of the block scope it with the
-        // block selector. Otherwise append it to the block selector.
-        combinedSelector = nestedSelector.startsWith(' ') ? (0, _utils.scopeSelector)(blockSelector, withoutPseudoElement) : (0, _utils.appendToSelector)(blockSelector, withoutPseudoElement);
+        combinedSelector = nestedSelector.startsWith(" ") ? (0, import_utils.scopeSelector)(blockSelector, withoutPseudoElement) : (0, import_utils.appendToSelector)(blockSelector, withoutPseudoElement);
       }
-
-      // Build final rule, re-adding any pseudo element outside the `:where()`
-      // to maintain valid CSS selector.
       processedCSS += `:root :where(${combinedSelector})${pseudoPart}{${cssValue.trim()}}`;
     }
   });
   return processedCSS;
 }
-
-/**
- * Returns the global styles output using a global styles configuration.
- * If wishing to generate global styles and settings based on the
- * global styles config loaded in the editor context, use `useGlobalStylesOutput()`.
- * The use case for a custom config is to generate bespoke styles
- * and settings for previews, or other out-of-editor experiences.
- *
- * @param {Object}  mergedConfig       Global styles configuration.
- * @param {boolean} disableRootPadding Disable root padding styles.
- *
- * @return {Array} Array of stylesheets and settings.
- */
 function useGlobalStylesOutputWithConfig(mergedConfig = {}, disableRootPadding) {
-  const [blockGap] = (0, _hooks.useGlobalSetting)('spacing.blockGap');
+  const [blockGap] = (0, import_hooks.useGlobalSetting)("spacing.blockGap");
   const hasBlockGapSupport = blockGap !== null;
-  const hasFallbackGapSupport = !hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
-  const disableLayoutStyles = (0, _data.useSelect)(select => {
-    const {
-      getSettings
-    } = select(_store.store);
+  const hasFallbackGapSupport = !hasBlockGapSupport;
+  const disableLayoutStyles = (0, import_data.useSelect)((select) => {
+    const { getSettings } = select(import_store.store);
     return !!getSettings().disableLayoutStyles;
   });
-  const {
-    getBlockStyles
-  } = (0, _data.useSelect)(_blocks.store);
-  return (0, _element.useMemo)(() => {
-    var _updatedConfig$styles;
+  const { getBlockStyles } = (0, import_data.useSelect)(import_blocks.store);
+  return (0, import_element.useMemo)(() => {
     if (!mergedConfig?.styles || !mergedConfig?.settings) {
       return [];
     }
     const updatedConfig = updateConfigWithSeparator(mergedConfig);
-    const blockSelectors = getBlockSelectors((0, _blocks.getBlockTypes)(), getBlockStyles);
-    const customProperties = toCustomProperties(updatedConfig, blockSelectors);
-    const globalStyles = toStyles(updatedConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles, disableRootPadding);
+    const blockSelectors = getBlockSelectors(
+      (0, import_blocks.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 = updatedConfig.styles.css) !== null && _updatedConfig$styles !== void 0 ? _updatedConfig$styles : '',
-      isGlobalStyles: true
-    }, {
-      assets: svgs,
-      __unstableType: 'svg',
-      isGlobalStyles: true
-    }];
-
-    // Loop through the blocks to check if there are custom CSS values.
-    // If there are, get the block selector and push the selector together with
-    // the CSS value to the 'stylesheets' array.
-    (0, _blocks.getBlockTypes)().forEach(blockType => {
+    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
+      }
+    ];
+    (0, import_blocks.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),
+          css: processCSSNesting(
+            updatedConfig.styles.blocks[blockType.name]?.css,
+            selector
+          ),
           isGlobalStyles: true
         });
       }
     });
     return [styles, updatedConfig.settings];
-  }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig, disableLayoutStyles, disableRootPadding, getBlockStyles]);
+  }, [
+    hasBlockGapSupport,
+    hasFallbackGapSupport,
+    mergedConfig,
+    disableLayoutStyles,
+    disableRootPadding,
+    getBlockStyles
+  ]);
 }
-
-/**
- * Returns the global styles output based on the current state of global styles config loaded in the editor context.
- *
- * @param {boolean} disableRootPadding Disable root padding styles.
- *
- * @return {Array} Array of stylesheets and settings.
- */
 function useGlobalStylesOutput(disableRootPadding = false) {
-  const {
-    merged: mergedConfig
-  } = (0, _element.useContext)(_context.GlobalStylesContext);
+  const { merged: mergedConfig } = (0, import_element.useContext)(import_context.GlobalStylesContext);
   return useGlobalStylesOutputWithConfig(mergedConfig, disableRootPadding);
 }
-//# sourceMappingURL=use-global-styles-output.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getBlockSelectors,
+  getLayoutStyles,
+  getNodesWithSettings,
+  getNodesWithStyles,
+  getStylesDeclarations,
+  processCSSNesting,
+  toCustomProperties,
+  toStyles,
+  toSvgFilters,
+  useGlobalStylesOutput,
+  useGlobalStylesOutputWithConfig
+});
+//# sourceMappingURL=use-global-styles-output.js.map