@uipath/apollo-wind 2.83.0 → 2.84.0

package/dist/components/ui/index.cjs

@@ -39,7 +39,7 @@ var __webpack_modules__ = {
     "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "@/components/ui/card" (module) {
+    "./card" (module) {
         module.exports = require("./card.cjs");
     },
     "./chart" (module) {
@@ -69,7 +69,7 @@ var __webpack_modules__ = {
     "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "./context-menu" (module) {
+    "@/components/ui/context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (module) {
@@ -90,7 +90,7 @@ var __webpack_modules__ = {
     "./drawer" (module) {
         module.exports = require("./drawer.cjs");
     },
-    "./dropdown-menu" (module) {
+    "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
     "./dropzone-overlay" (module) {
@@ -117,7 +117,7 @@ var __webpack_modules__ = {
     "./file-validation" (module) {
         module.exports = require("./file-validation.cjs");
     },
-    "@/components/ui/form-field" (module) {
+    "./form-field" (module) {
         module.exports = require("./form-field.cjs");
     },
     "./hover-card" (module) {
@@ -129,7 +129,7 @@ var __webpack_modules__ = {
     "@/components/ui/input-group" (module) {
         module.exports = require("./input-group.cjs");
     },
-    "./input" (module) {
+    "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
     "./json-tree-view" (module) {
@@ -138,7 +138,7 @@ var __webpack_modules__ = {
     "./label" (module) {
         module.exports = require("./label.cjs");
     },
-    "./layout" (module) {
+    "@/components/ui/layout" (module) {
         module.exports = require("./layout/index.cjs");
     },
     "./live-region" (module) {
@@ -207,7 +207,7 @@ var __webpack_modules__ = {
     "./reference-chip-colors" (module) {
         module.exports = require("./reference-chip-colors.cjs");
     },
-    "./reference-chip" (module) {
+    "@/components/ui/reference-chip" (module) {
         module.exports = require("./reference-chip.cjs");
     },
     "./resizable" (module) {
@@ -255,13 +255,13 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "./table" (module) {
+    "@/components/ui/table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
         module.exports = require("./tabs.cjs");
     },
-    "./textarea" (module) {
+    "@/components/ui/textarea" (module) {
         module.exports = require("./textarea.cjs");
     },
     "./thinking-indicator" (module) {
@@ -282,7 +282,7 @@ var __webpack_modules__ = {
     "./tree-view" (module) {
         module.exports = require("./tree-view.cjs");
     },
-    "./variable-picker" (module) {
+    "@/components/ui/variable-picker" (module) {
         module.exports = require("./variable-picker/index.cjs");
     },
     "./variable-value-control" (module) {
@@ -468,7 +468,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_12[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _card__rspack_import_13 = __webpack_require__("@/components/ui/card");
+    var _card__rspack_import_13 = __webpack_require__("./card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_13)if ([
         "getReferenceChipColors",
@@ -568,7 +568,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_22[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_23 = __webpack_require__("./context-menu");
+    var _context_menu__rspack_import_23 = __webpack_require__("@/components/ui/context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_23)if ([
         "getReferenceChipColors",
@@ -638,7 +638,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_drawer__rspack_import_29[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_30 = __webpack_require__("./dropdown-menu");
+    var _dropdown_menu__rspack_import_30 = __webpack_require__("@/components/ui/dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_30)if ([
         "getReferenceChipColors",
@@ -728,7 +728,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_file_validation__rspack_import_38[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _form_field__rspack_import_39 = __webpack_require__("@/components/ui/form-field");
+    var _form_field__rspack_import_39 = __webpack_require__("./form-field");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _form_field__rspack_import_39)if ([
         "getReferenceChipColors",
@@ -758,7 +758,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_info_tooltip__rspack_import_41[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input__rspack_import_42 = __webpack_require__("./input");
+    var _input__rspack_import_42 = __webpack_require__("@/components/ui/input");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input__rspack_import_42)if ([
         "getReferenceChipColors",
@@ -798,7 +798,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_label__rspack_import_45[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _layout__rspack_import_46 = __webpack_require__("./layout");
+    var _layout__rspack_import_46 = __webpack_require__("@/components/ui/layout");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _layout__rspack_import_46)if ([
         "getReferenceChipColors",
@@ -1018,7 +1018,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_radio_group__rspack_import_67[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _reference_chip__rspack_import_68 = __webpack_require__("./reference-chip");
+    var _reference_chip__rspack_import_68 = __webpack_require__("@/components/ui/reference-chip");
     var _reference_chip_colors__rspack_import_69 = __webpack_require__("./reference-chip-colors");
     var _resizable__rspack_import_70 = __webpack_require__("./resizable");
     var __rspack_reexport = {};
@@ -1170,7 +1170,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_84[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_85 = __webpack_require__("./table");
+    var _table__rspack_import_85 = __webpack_require__("@/components/ui/table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_85)if ([
         "getReferenceChipColors",
@@ -1190,7 +1190,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_86[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _textarea__rspack_import_87 = __webpack_require__("./textarea");
+    var _textarea__rspack_import_87 = __webpack_require__("@/components/ui/textarea");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _textarea__rspack_import_87)if ([
         "getReferenceChipColors",
@@ -1252,7 +1252,7 @@ var __webpack_exports__ = {};
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _tree_view__rspack_import_93 = __webpack_require__("./tree-view");
     var _tree_view__rspack_import_93_default = /*#__PURE__*/ __webpack_require__.n(_tree_view__rspack_import_93);
-    var _variable_picker__rspack_import_94 = __webpack_require__("./variable-picker");
+    var _variable_picker__rspack_import_94 = __webpack_require__("@/components/ui/variable-picker");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _variable_picker__rspack_import_94)if ([
         "getReferenceChipColors",

package/dist/styles.css

@@ -13923,19 +13923,21 @@ body.canvas, .canvas {
 .future-dark, .dark, .dark-hc {
   scrollbar-width: thin;
   scrollbar-color: var(--color-border) transparent;
-  & *::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-  & *::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  & *::-webkit-scrollbar-thumb {
-    background-color: var(--color-border);
-    border-radius: 9999px;
-  }
-  & *::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-border-hover);
+  @supports not (scrollbar-color: auto) {
+    & *::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    & *::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    & *::-webkit-scrollbar-thumb {
+      background-color: var(--color-border);
+      border-radius: 9999px;
+    }
+    & *::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-border-hover);
+    }
   }
 }
 .mat-typography :is( [data-slot="dialog-content"], [data-slot="sheet-content"], [data-slot="alert-dialog-content"], [data-slot="drawer-content"] ) :where(p) {

package/dist/tailwind.css

@@ -897,32 +897,42 @@ body.canvas, .canvas {
  * Dark themes: future-dark + dark-hc are applied to <html>;
  * dark + dark-hc are applied to <body>. Both cases are covered by the
  * class selectors below since * matches all descendants.
+ *
+ * The standard properties inherit, so they cost nothing per element. The
+ * WebKit pseudo-element rules do not: `.dark *::-webkit-scrollbar` makes
+ * Chrome walk every element's ancestors for the theme class on every style
+ * recalc (about 7 ms per copy of this block in Studio Web, MST-17369).
+ * Browsers that implement `scrollbar-color` ignore `::-webkit-scrollbar`
+ * once it is set (Chrome 121+, Safari 26.2+), so the WebKit rules only
+ * exist where the standard properties are missing.
  * ============================================================================ */
 
 .future-dark,
 .dark,
 .dark-hc {
-  /* Firefox — inherits down the tree */
+  /* Firefox, Chrome 121+, Safari 26.2+ — inherits down the tree */
   scrollbar-width: thin;
   scrollbar-color: var(--color-border) transparent;
 
-  /* WebKit — pseudo-elements don't inherit, must target descendants */
-  & *::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  & *::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  & *::-webkit-scrollbar-thumb {
-    background-color: var(--color-border);
-    border-radius: 9999px;
-  }
-
-  & *::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-border-hover);
+  /* Older WebKit — pseudo-elements don't inherit, must target descendants */
+  @supports not (scrollbar-color: auto) {
+    & *::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    & *::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    & *::-webkit-scrollbar-thumb {
+      background-color: var(--color-border);
+      border-radius: 9999px;
+    }
+
+    & *::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-border-hover);
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.83.0",
+  "version": "2.84.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",
@@ -51,6 +51,11 @@
       "import": "./dist/postcss.config.export.js",
       "require": "./dist/postcss.config.export.cjs"
     },
+    "./postcss-scope-preflight": {
+      "types": "./postcss-scope-preflight.d.ts",
+      "import": "./postcss-scope-preflight.js",
+      "default": "./postcss-scope-preflight.js"
+    },
     "./editor-themes": {
       "import": "./dist/editor-themes/index.js",
       "require": "./dist/editor-themes/index.cjs",
@@ -59,7 +64,9 @@
   },
   "files": [
     "dist",
-    "postcss.config.export.js"
+    "postcss.config.export.js",
+    "postcss-scope-preflight.js",
+    "postcss-scope-preflight.d.ts"
   ],
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -177,7 +184,7 @@
     "storybook": "^10.6.2",
     "typescript": "^5.9.3",
     "vitest": "^4.1.12",
-    "@uipath/apollo-ui-icons-react": "1.0.0"
+    "@uipath/apollo-ui-icons-react": "0.0.0"
   },
   "keywords": [
     "react",

package/postcss-scope-preflight.d.ts

@@ -0,0 +1,23 @@
+import type { Plugin, PluginCreator } from 'postcss';
+
+export interface ScopePreflightOptions {
+  /**
+   * Selectors for the elements that own the consumer's DOM: web-component tags, portal markers,
+   * `[data-slot]`. Preflight applies to these elements and their descendants.
+   */
+  roots: string[];
+  /**
+   * Preflight's `html, :host` rule sets the page font from `--font-sans`, a `:root` variable every
+   * consumer in a shared document redefines. By default the font declarations stay on the outermost
+   * root. Pass the selector of the element the consumer renders when it owns the whole document to
+   * apply them there only, so embedded roots inherit the host's font; pass `false` to drop them.
+   */
+  documentRoot?: string | false;
+}
+
+/** Inserts `:where(:scope)` into the subject of a selector, ahead of any pseudo-element. */
+export function scopeSelector(selector: string): string;
+
+declare const scopePreflight: PluginCreator<ScopePreflightOptions> &
+  ((options: ScopePreflightOptions) => Plugin);
+export default scopePreflight;

package/postcss-scope-preflight.js

@@ -0,0 +1,218 @@
+/**
+ * PostCSS plugin: confine Tailwind's Preflight reset to the DOM a consumer renders.
+ *
+ * A micro-frontend's CSS lands in its host's document. Preflight is written for a page you own:
+ * left global it restyles the host's markup, and its `[hidden] { display: none !important }` beats
+ * the host's own unlayered `display` rules. This plugin wraps the Preflight rules, and the bare `*`
+ * resets apollo-wind adds to `@layer base`, in `@scope (roots) { … }`, so they match only inside the
+ * consumer's own root elements.
+ *
+ * `@scope` is the cheap way to do this. The older `X:where(R1, …, Rn, R1 *, …, Rn *)` wrapper makes
+ * Chrome walk every element's ancestor chain once per root for every universal Preflight rule, which
+ * showed up as 100+ ms style recalcs in Studio Web (MST-17369). Inside `@scope`, a bare selector
+ * matches descendants of the root only, so each rule also gets an `X:where(:scope)` copy for the root
+ * itself. `:where()` keeps Preflight at zero specificity, as upstream.
+ *
+ * Runs after Tailwind. Preflight is found by shape, not source file: Tailwind's production optimise
+ * pass re-parses its output, so every rule reports the entry file as its source. The run starts at
+ * the `::backdrop` box-sizing rule and ends at `[hidden]:where(:not([hidden=until-found]))`; if a
+ * Tailwind update moves the end, the plugin throws rather than scope the rest of the base layer. If
+ * the start moves, nothing is scoped: the test against real Tailwind output in `src/styles` is what
+ * catches that, so keep it when bumping Tailwind.
+ *
+ * Two cascade details for consumers:
+ *
+ * - Scoping proximity ranks below specificity but above source order. A scoped Preflight
+ *   declaration therefore beats an unscoped one of equal specificity in the same layer, whatever
+ *   the order, which the old wrapper did not. Override Preflight from an unlayered rule or with
+ *   higher specificity, not from a later rule in `@layer base`.
+ * - Safari 26.0 to 26.3 do not apply `@scope` rules to elements with a UA shadow root (`input`,
+ *   `textarea`; WebKit 305369, fixed in 26.4). Form controls render with UA styles there. Those
+ *   versions are outside UiPath's support matrix (Safari: latest version only), and `@supports`
+ *   cannot detect the bug, so there is no workaround.
+ *
+ * Usage, in a consumer's postcss config:
+ *
+ *   import apolloWind from '@uipath/apollo-wind/postcss';
+ *   import scopePreflight from '@uipath/apollo-wind/postcss-scope-preflight';
+ *   export default { plugins: [...apolloWind.plugins, scopePreflight({ roots: ['my-canvas', '[data-my-portal]'] })] };
+ *
+ * Anything the consumer portals onto `document.body` must carry one of the roots, or it renders
+ * without Preflight. apollo-wind stamps `data-slot` on its components, including what it portals, so
+ * `[data-slot]` is a sensible root for apollo-wind consumers.
+ */
+
+/**
+ * @typedef {object} ScopePreflightOptions
+ * @property {string[]} roots
+ *   Selectors for the elements that own the consumer's DOM: web-component tags, portal markers,
+ *   `[data-slot]`. Preflight applies to these elements and their descendants.
+ * @property {string | false} [documentRoot]
+ *   Preflight's `html, :host` rule sets the page font from `--font-sans`, a `:root` variable every
+ *   consumer in a shared document redefines. By default the font declarations stay on the outermost
+ *   root. Pass the selector of the element the consumer renders when it owns the whole document to
+ *   apply them there only, so embedded roots inherit the host's font; pass `false` to drop them.
+ */
+
+/** Preflight's first rule: the `*, ::before, ::after, ::backdrop` box-sizing reset. */
+const isPreflightStart = (/** @type {import('postcss').Rule} */ rule) =>
+  rule.selectors.some((s) => s.trim() === '::backdrop') &&
+  rule.some((d) => d.type === 'decl' && d.prop === 'box-sizing');
+
+/** Preflight's last rule. */
+const isPreflightEnd = (/** @type {import('postcss').Rule} */ rule) =>
+  /^\[hidden\]:where\(:not\(\[hidden=["']?until-found["']?\]\)\)$/.test(rule.selector.trim());
+
+/** @param {string} selector */
+const isDocumentRoot = (selector) => selector === 'html' || selector === ':host';
+
+/** The inherited typography `html, :host` sets; on an embedded root these follow the host instead. */
+const DOCUMENT_FONT_PROPS = new Set([
+  'font-family',
+  'font-feature-settings',
+  'font-variation-settings',
+]);
+
+// Tailwind's production pass prints `::before`/`::after` in their single-colon form; a pseudo-class
+// after one is invalid, and the minifier empties it to `:where()`.
+const LEGACY_PSEUDO_ELEMENT = /^:(before|after|first-line|first-letter)(?![\w-])/;
+
+/**
+ * Inserts `:where(:scope)` into the subject (last compound) of a selector, ahead of any pseudo-element.
+ * @param {string} selector
+ */
+export function scopeSelector(selector) {
+  const s = selector.trim();
+  let depth = 0;
+  let subjectStart = 0;
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (c === '(' || c === '[') depth++;
+    else if (c === ')' || c === ']') depth--;
+    else if (depth === 0 && (c === ' ' || c === '>' || c === '+' || c === '~'))
+      subjectStart = i + 1;
+  }
+  depth = 0;
+  for (let i = subjectStart; i < s.length; i++) {
+    const c = s[i];
+    if (c === '(' || c === '[') depth++;
+    else if (c === ')' || c === ']') depth--;
+    else if (
+      depth === 0 &&
+      c === ':' &&
+      (s[i + 1] === ':' || LEGACY_PSEUDO_ELEMENT.test(s.slice(i)))
+    )
+      return `${s.slice(0, i)}:where(:scope)${s.slice(i)}`;
+  }
+  return `${s}:where(:scope)`;
+}
+
+/**
+ * @param {ScopePreflightOptions} options
+ * @returns {import('postcss').Plugin}
+ */
+const scopePreflight = (options) => {
+  const roots = options?.roots?.map((r) => r.trim()).filter(Boolean) ?? [];
+  if (roots.length === 0)
+    throw new Error('scope-preflight: `roots` must list at least one selector');
+  const { documentRoot } = options;
+
+  const ROOTS = roots.join(', ');
+  // The outermost root only: `html, :host` sets inherited typography, and on every nested root it
+  // would override what the component's parent chose. Flat lists, no `:is()`: minifiers lower `:is()`
+  // into `:-webkit-any()`/`:-moz-any()` copies.
+  const SCOPE_TOP = `:where(${ROOTS}):where(:not(${roots.map((r) => `${r} *`).join(', ')}))`;
+
+  /**
+   * Rewrites one rule for use inside the `@scope` block: a `:where(:scope)` copy for the root, the
+   * bare selector for its descendants.
+   * @param {import('postcss').Rule} rule
+   */
+  const scopeRule = (rule) => {
+    const selectors = rule.selectors.map((s) => s.trim());
+    rule.selectors = [...selectors.map(scopeSelector), ...selectors];
+  };
+
+  /**
+   * `html, :host` becomes a rule on the outermost root, outside the block. Its font declarations move
+   * to `documentRoot`, or are dropped, when the consumer asked for that.
+   * @param {import('postcss').Rule} rule
+   * @param {import('postcss').Helpers} helpers
+   */
+  const scopeDocumentRule = (rule, { Rule }) => {
+    if (documentRoot !== undefined) {
+      const fontDecls = rule.nodes.filter(
+        (n) => n.type === 'decl' && DOCUMENT_FONT_PROPS.has(n.prop)
+      );
+      for (const decl of fontDecls) decl.remove();
+      if (documentRoot && fontDecls.length) {
+        rule.after(
+          new Rule({ selector: `:where(${documentRoot})`, nodes: fontDecls.map((d) => d.clone()) })
+        );
+      }
+    }
+    rule.selector = SCOPE_TOP;
+    if (rule.nodes.length === 0) rule.remove();
+  };
+
+  return {
+    postcssPlugin: 'scope-preflight',
+    OnceExit(root, helpers) {
+      const { AtRule } = helpers;
+      root.walkAtRules('layer', (layer) => {
+        if (layer.params !== 'base') return;
+        // Collect the nodes to scope first, so the walk is not disturbed by the rewrite.
+        /** @type {import('postcss').ChildNode[]} */
+        const toScope = [];
+        let inPreflight = false;
+        for (const node of layer.nodes ?? []) {
+          if (node.type === 'atrule') {
+            if (inPreflight) toScope.push(node);
+            continue;
+          }
+          if (node.type !== 'rule') continue;
+          if (isPreflightStart(node)) inPreflight = true;
+          if (inPreflight) {
+            toScope.push(node);
+            if (isPreflightEnd(node)) inPreflight = false;
+          } else if (node.selector.trim() === '*') {
+            // A bare `*` in the base layer (apollo-wind's `border-color`) is the same kind of page-wide reset.
+            toScope.push(node);
+          }
+        }
+        if (inPreflight) {
+          // Scoping on to the end of the layer would also wrap the consumer's own base rules
+          // (`body { … }` matches nothing inside a root), with no build error. Fail instead.
+          throw layer.error(
+            'scope-preflight: found the start of Preflight but not its last rule, `[hidden]:where(:not([hidden=until-found]))`. Tailwind may have changed Preflight; update isPreflightEnd.',
+            { plugin: 'scope-preflight' }
+          );
+        }
+
+        // One `@scope` block per run of consecutive nodes. Chrome resolves scope activations per
+        // block, so hundreds of single-rule blocks cost measurably more than a handful.
+        /** @type {import('postcss').AtRule | null} */
+        let block = null;
+        for (const node of toScope) {
+          if (!block || node.prev() !== block) {
+            block = new AtRule({ name: 'scope', params: `(${ROOTS})` });
+            node.before(block);
+          }
+          if (node.type === 'rule' && node.selectors.map((s) => s.trim()).every(isDocumentRoot)) {
+            // Stays outside the block, ahead of it, so its position in the cascade does not change.
+            block.before(node);
+            scopeDocumentRule(node, helpers);
+            // The next node is still adjacent to the block.
+            continue;
+          }
+          if (node.type === 'rule') scopeRule(node);
+          else node.walkRules(scopeRule);
+          block.append(node);
+        }
+      });
+    },
+  };
+};
+scopePreflight.postcss = true;
+
+export default scopePreflight;