@fluid-app/fluid-cli-portal 0.1.33 → 0.1.34

package/dist/index.mjs

@@ -2527,18 +2527,10 @@ function validateCssUrl(value, cssUrlPath, errors) {
 		});
 		return;
 	}
-	if (!isValidRuntimeDescriptorUrl(value)) {
-		errors.push({
-			code: "INVALID_SOURCE_PACKAGE",
-			path: cssUrlPath,
-			message: "Widget package cssUrls entries must be https URLs, trusted local http URLs, or relative URLs."
-		});
-		return;
-	}
-	if (!isAbsoluteRuntimeUrl(value) && !isWidgetPackageCssArtifactPath(value)) errors.push({
+	if (!isWidgetPackageCssArtifactPath(value)) errors.push({
 		code: "INVALID_SOURCE_PACKAGE",
 		path: cssUrlPath,
-		message: "Widget package relative cssUrls entries must be top-level CSS artifact filenames matching [A-Za-z0-9._~-]+.css."
+		message: "Widget package cssUrls entries must be top-level generated CSS artifact filenames matching [A-Za-z0-9._~-]+.css. Self-host external CSS or fonts via @font-face in widget CSS so the build can isolate them."
 	});
 }
 function validateRuntimeDescriptorUrl(value, urlPath) {
@@ -2622,21 +2614,19 @@ function validateOptionalRecordField(record, key, path, errors) {
 }
 function mergeCssUrls(sourceCssUrls, generatedCssUrls) {
 	const generatedCssUrlSet = new Set(generatedCssUrls ?? []);
+	generatedCssUrls?.forEach((cssUrl, index) => {
+		validateGeneratedCssArtifactUrl(cssUrl, `generated cssUrls[${index}]`);
+	});
 	sourceCssUrls?.forEach((cssUrl, index) => {
-		validateRuntimeDescriptorUrl(cssUrl, `cssUrls[${index}]`);
-		if (isAbsoluteRuntimeUrl(cssUrl)) return;
-		if (!isWidgetPackageCssArtifactPath(cssUrl)) throw new Error(`cssUrls[${index}] relative URL ${JSON.stringify(cssUrl)} must be a top-level CSS artifact filename matching [A-Za-z0-9._~-]+.css.`);
+		validateGeneratedCssArtifactUrl(cssUrl, `cssUrls[${index}]`);
 		if (generatedCssUrlSet.has(cssUrl)) return;
-		throw new Error(`cssUrls[${index}] relative URL ${JSON.stringify(cssUrl)} must match a generated top-level CSS artifact. Import the CSS from the widget package bundle or remove it from cssUrls.`);
+		throw new Error(`cssUrls[${index}] URL ${JSON.stringify(cssUrl)} must match a generated top-level CSS artifact. Import the CSS from the widget package bundle or remove it from cssUrls.`);
 	});
-	const cssUrls = Array.from(new Set([...sourceCssUrls ?? [], ...generatedCssUrls ?? []]));
-	cssUrls.forEach((cssUrl, index) => {
-		validateRuntimeDescriptorUrl(cssUrl, `cssUrls[${index}]`);
-	});
-	return cssUrls;
+	return Array.from(new Set([...sourceCssUrls ?? [], ...generatedCssUrls ?? []]));
 }
-function isAbsoluteRuntimeUrl(value) {
-	return /^[a-zA-Z][a-zA-Z\d+.-]*:/.test(value);
+function validateGeneratedCssArtifactUrl(value, cssUrlPath) {
+	if (value.trim().length === 0) throw new Error(`${cssUrlPath} must be a non-empty string.`);
+	if (!isWidgetPackageCssArtifactPath(value)) throw new Error(`${cssUrlPath} must be a top-level generated CSS artifact filename matching [A-Za-z0-9._~-]+.css. Self-host external CSS or fonts via @font-face in widget CSS so the build can isolate them.`);
 }
 function normalizePropertySchema(value, widgetType) {
 	return {
@@ -2806,9 +2796,13 @@ async function buildSharedWidgetPackage(options) {
 	}
 }
 function createWidgetPackageEntrySource(options) {
+	const runtimePackageId = getWidgetPackageDescriptorPackageId(options.validated);
 	return `import * as widgetConfig from ${JSON.stringify(options.configImportPath)};
+import { createElement } from "react";
 
 const SOURCE_PACKAGE_MARKER = "__fluidSourceWidgetPackage";
+const WIDGET_PACKAGE_ID = ${JSON.stringify(runtimePackageId)};
+const WIDGET_PACKAGE_VERSION = ${JSON.stringify(options.validated.version)};
 const descriptors = ${JSON.stringify(options.validated.widgets, null, 2)};
 
 function isSourceWidgetPackage(value) {
@@ -2832,12 +2826,31 @@ const componentsByName = new Map(
   sourcePackage.widgets.map((widget) => [widget.name, widget.component]),
 );
 
+function createScopedWidgetComponent(component, descriptor) {
+  const wrapperTagName = descriptor.container === "inline" ? "span" : "div";
+  const WrappedFluidWidgetComponent = (props) => createElement(
+    wrapperTagName,
+    {
+      "data-fluid-widget-package": WIDGET_PACKAGE_ID,
+      "data-fluid-widget-version": WIDGET_PACKAGE_VERSION,
+      "data-fluid-widget-name": descriptor.name,
+    },
+    // PortalContainerProvider is not imported here because standalone widget packages
+    // only depend on @fluid-app/portal-sdk, which does not currently expose a
+    // public portal-container provider. Radix/ui-primitives portals remain a
+    // residual isolation risk until a public widget-safe provider is available.
+    createElement(component, props),
+  );
+  WrappedFluidWidgetComponent.displayName = "FluidWidgetPackage(" + WIDGET_PACKAGE_ID + "/" + descriptor.name + ")";
+  return WrappedFluidWidgetComponent;
+}
+
 const widgets = descriptors.map((descriptor) => {
   const component = componentsByName.get(descriptor.name);
   if (typeof component !== "function" && typeof component !== "object") {
     throw new Error("Widget package is missing component for " + descriptor.name + ".");
   }
-  return { ...descriptor, component };
+  return { ...descriptor, component: createScopedWidgetComponent(component, descriptor) };
 });
 
 var _fluidWidgets = globalObject.FluidWidgets;
@@ -2846,7 +2859,7 @@ if (!_fluidWidgets || typeof _fluidWidgets.registerPackage !== "function") {
 }
 
 _fluidWidgets.registerPackage({
-  packageId: ${JSON.stringify(options.validated.packageId)},
+  packageId: ${JSON.stringify(runtimePackageId)},
   version: ${JSON.stringify(options.validated.version)},
   widgets,
 });
@@ -2863,6 +2876,8 @@ async function buildWidgetScriptBundle(options) {
 	}), "utf-8");
 	await fs.writeFile(viteConfigPath, createViteConfigSource({
 		entryPath,
+		packageId: getWidgetPackageDescriptorPackageId(options.validated),
+		packageVersion: options.validated.version,
 		publishDir: options.publishDir,
 		projectConfigPath: await resolveProjectViteConfigPath(options.projectDir)
 	}), "utf-8");
@@ -2989,6 +3004,21 @@ export default defineConfig(async (configEnv) => {
 function createWidgetViteConfigObjectSource(options) {
 	const configFileSource = options.disableConfigFileLookup ? "  configFile: false,\n" : "";
 	return `(() => {
+  const widgetPackageId = ${JSON.stringify(options.packageId)};
+  const widgetPackageVersion = ${JSON.stringify(options.packageVersion)};
+  const widgetPackageScopeSelector = '[data-fluid-widget-package="' + widgetPackageId + '"][data-fluid-widget-version="' + widgetPackageVersion + '"]';
+  const widgetPackageGeneratedCssFileName = "widget.css";
+  const widgetPackageKeyframePrefix = "fluid-widget-" + encodeCssIdentifier(widgetPackageId) + "-" + encodeCssIdentifier(widgetPackageVersion) + "-";
+  const widgetPackageLayerPrefix = widgetPackageKeyframePrefix + "layer-";
+  const widgetPackageHostDefaultLayerName = widgetPackageLayerPrefix + "generated-host-defaults";
+  const widgetPackageHostDefaultRule = "@layer " + widgetPackageHostDefaultLayerName + " { " + widgetPackageScopeSelector + " { display: contents; } }";
+  const widgetPackageContainerPrefix = widgetPackageKeyframePrefix + "container-";
+  const widgetPackageCssGlobalNamePrefix = widgetPackageKeyframePrefix + "css-name-";
+  const groupingAtRules = new Set(["media", "supports", "container", "document", "starting-style"]);
+  const unsafeSelectorPattern = /(^|[\\s>+~,])(:root|html|body)(?=$|[\\s.#:[>+~,)])/i;
+  const universalSelectorPattern = /(^|[\\s>+~,])\\*(?=$|[\\s.#:[>+~,)])/g;
+  const pseudoElementOnlySelectorPattern = /^::[A-Za-z-]+(?:\\([^)]*\\))?$/;
+
   function createFluidWidgetBuildInvariants() {
     return {
       copyPublicDir: false,
@@ -3027,12 +3057,1169 @@ function createWidgetViteConfigObjectSource(options) {
     };
   }
 
+  function fluidWidgetCssIsolationPlugin() {
+    return {
+      name: "fluid-widget-css-isolation",
+      enforce: "post",
+      generateBundle(_outputOptions, bundle) {
+        let hasCssAsset = false;
+        for (const asset of Object.values(bundle)) {
+          if (!asset || asset.type !== "asset" || !asset.fileName.endsWith(".css")) continue;
+          hasCssAsset = true;
+          const source = typeof asset.source === "string" ? asset.source : new TextDecoder().decode(asset.source);
+          asset.source = isolateWidgetCssAsset(source, asset.fileName);
+        }
+        if (!hasCssAsset) {
+          this.emitFile({
+            type: "asset",
+            fileName: widgetPackageGeneratedCssFileName,
+            source: widgetPackageHostDefaultRule + "\\n",
+          });
+        }
+      },
+    };
+  }
+
+  function isolateWidgetCssAsset(css, assetName) {
+    const keyframeNames = collectKeyframeNames(css);
+    const fontFamilyNames = collectFontFamilyNames(css);
+    const customPropertyNames = collectRegisteredCustomPropertyNames(css);
+    const placementSensitivePrefix = readPlacementSensitiveCssPrefix(css, assetName);
+    const isolatedCss = isolateCssRange(css, assetName, keyframeNames, fontFamilyNames, customPropertyNames, placementSensitivePrefix.endIndex, css.length).css;
+    return placementSensitivePrefix.css + widgetPackageHostDefaultRule + "\\n" + isolatedCss;
+  }
+
+  function collectKeyframeNames(css) {
+    const names = new Map();
+    visitCssAtRules(css, (atRuleName, atRule) => {
+      if (!isKeyframesAtRule(atRuleName)) return false;
+      const match = /^@(?:-[A-Za-z]+-)?keyframes\\s+([^\\s{]+)/i.exec(atRule.prelude);
+      const name = match?.[1];
+      if (name && !names.has(name)) names.set(name, widgetPackageKeyframePrefix + name);
+      return atRule.blockStart !== -1;
+    });
+    return names;
+  }
+
+  function collectFontFamilyNames(css) {
+    const names = new Map();
+    visitCssAtRules(css, (atRuleName, atRule) => {
+      if (atRuleName !== "font-face" || atRule.blockStart === -1 || atRule.blockEnd === -1) return false;
+      let familyName = "";
+      rewriteDeclarationBlock(css.slice(atRule.blockStart + 1, atRule.blockEnd), (propertyName, rawProperty, value) => {
+        if (propertyName === "font-family" && !familyName) {
+          familyName = normalizeFontFamilyName(value);
+        }
+        return { property: rawProperty, value };
+      });
+      if (familyName && !names.has(familyName)) names.set(familyName, widgetPackageKeyframePrefix + familyName);
+      return true;
+    });
+    return names;
+  }
+
+  function collectRegisteredCustomPropertyNames(css) {
+    const names = new Map();
+    visitCssAtRules(css, (atRuleName, atRule) => {
+      if (atRuleName !== "property") return false;
+      const match = /^@property\\s+(--[A-Za-z0-9_-]+)/i.exec(atRule.prelude);
+      const name = match?.[1];
+      if (name && !names.has(name)) names.set(name, "--" + widgetPackageKeyframePrefix + name.slice(2));
+      return atRule.blockStart !== -1;
+    });
+    return names;
+  }
+
+  function visitCssAtRules(css, visitAtRule) {
+    let index = 0;
+    while (index < css.length) {
+      if (cssStartsWithComment(css, index)) {
+        const commentEnd = css.indexOf("*/", index + 2);
+        index = commentEnd === -1 ? css.length : commentEnd + 2;
+        continue;
+      }
+      const char = css[index];
+      if (char === '"' || char === "'") {
+        index = findCssStringEnd(css, index);
+        continue;
+      }
+      if (char !== "@") {
+        index += 1;
+        continue;
+      }
+      const atRule = readRulePrelude(css, index, css.length);
+      const blockEnd = atRule.blockStart === -1 ? -1 : findMatchingBrace(css, atRule.blockStart, css.length);
+      const shouldSkipBlock = visitAtRule(readAtRuleName(atRule.prelude), { ...atRule, blockEnd });
+      index = shouldSkipBlock && blockEnd !== -1 ? blockEnd + 1 : index + 1;
+    }
+  }
+
+  function isolateCssRange(css, assetName, keyframeNames, fontFamilyNames, customPropertyNames, startIndex, endIndex) {
+    let output = "";
+    let index = startIndex;
+    while (index < endIndex) {
+      if (css.startsWith("/*", index)) {
+        const commentEnd = css.indexOf("*/", index + 2);
+        const nextIndex = commentEnd === -1 ? endIndex : commentEnd + 2;
+        output += css.slice(index, nextIndex);
+        index = nextIndex;
+        continue;
+      }
+
+      if (/\\s/.test(css[index] ?? "")) {
+        output += css[index];
+        index += 1;
+        continue;
+      }
+
+      if (css[index] === "@") {
+        const atRule = readRulePrelude(css, index, endIndex);
+        const atRuleName = readAtRuleName(atRule.prelude);
+        if (atRule.blockStart === -1) {
+          if (atRuleName === "import") {
+            throw new Error('Unsupported @import rule in CSS asset "' + assetName + '" cannot be isolated safely. Self-host external CSS or fonts via @font-face in widget CSS so the build can isolate them.');
+          }
+          if (atRuleName === "charset" || atRuleName === "namespace") {
+            throw new Error('Unsupported @' + atRuleName + ' rule in CSS asset "' + assetName + '" cannot be isolated safely after generated host defaults. Move @' + atRuleName + ' before all non-@charset/@namespace rules.');
+          }
+          if (atRuleName === "layer") {
+            output += rewriteLayerPrelude(atRule.prelude) + css.slice(index + atRule.prelude.length, atRule.end);
+            index = atRule.end;
+            continue;
+          }
+          output += css.slice(index, atRule.end);
+          index = atRule.end;
+          continue;
+        }
+
+        const blockEnd = findMatchingBrace(css, atRule.blockStart, endIndex);
+        if (blockEnd === -1) {
+          output += css.slice(index, endIndex);
+          index = endIndex;
+          continue;
+        }
+
+        const ruleHeader = css.slice(index, atRule.blockStart + 1);
+        if (isKeyframesAtRule(atRuleName)) {
+          output += rewriteKeyframesHeader(ruleHeader, keyframeNames) + namespaceKeyframesBlock(css.slice(atRule.blockStart + 1, blockEnd), keyframeNames, fontFamilyNames, customPropertyNames, assetName) + "}";
+        } else if (atRuleName === "font-face") {
+          output += ruleHeader + namespaceFontFaceBlock(css.slice(atRule.blockStart + 1, blockEnd), fontFamilyNames, customPropertyNames) + "}";
+        } else if (atRuleName === "property") {
+          output += rewritePropertyHeader(ruleHeader, customPropertyNames) + namespaceCustomPropertyReferences(css.slice(atRule.blockStart + 1, blockEnd), customPropertyNames) + "}";
+        } else if (atRuleName === "layer") {
+          output += rewriteLayerPrelude(atRule.prelude) + css.slice(index + atRule.prelude.length, atRule.blockStart + 1) + isolateCssRange(css, assetName, keyframeNames, fontFamilyNames, customPropertyNames, atRule.blockStart + 1, blockEnd).css + "}";
+        } else if (groupingAtRules.has(atRuleName)) {
+          const groupingRuleHeader = atRuleName === "container" ? rewriteContainerAtRuleHeader(ruleHeader) : ruleHeader;
+          output += groupingRuleHeader + isolateCssRange(css, assetName, keyframeNames, fontFamilyNames, customPropertyNames, atRule.blockStart + 1, blockEnd).css + "}";
+        } else {
+          throw new Error('Unsupported @' + atRuleName + ' rule in CSS asset "' + assetName + '" cannot be isolated safely.');
+        }
+        index = blockEnd + 1;
+        continue;
+      }
+
+      const styleRule = readRulePrelude(css, index, endIndex);
+      if (styleRule.blockStart === -1) {
+        output += css.slice(index, styleRule.end);
+        index = styleRule.end;
+        continue;
+      }
+
+      const styleBlockEnd = findMatchingBrace(css, styleRule.blockStart, endIndex);
+      if (styleBlockEnd === -1) {
+        output += css.slice(index, endIndex);
+        index = endIndex;
+        continue;
+      }
+
+      output += isolateSelectorList(styleRule.prelude, assetName) + "{" + namespaceStyleBlock(css.slice(styleRule.blockStart + 1, styleBlockEnd), keyframeNames, fontFamilyNames, customPropertyNames, assetName) + "}";
+      index = styleBlockEnd + 1;
+    }
+
+    return { css: output, index };
+  }
+
+  function readPlacementSensitiveCssPrefix(css, assetName) {
+    let output = "";
+    let index = 0;
+    let hasNamespace = false;
+    while (index < css.length) {
+      const leadingStart = index;
+      index = skipCssWhitespaceAndComments(css, index);
+      const leading = css.slice(leadingStart, index);
+      if (css[index] !== "@") {
+        return { css: output + leading, endIndex: index };
+      }
+
+      const atRule = readRulePrelude(css, index, css.length);
+      const atRuleName = readAtRuleName(atRule.prelude);
+      if (atRuleName !== "charset" && atRuleName !== "namespace") {
+        return { css: output + leading, endIndex: index };
+      }
+      if (atRule.blockStart !== -1) {
+        throw new Error('Unsupported @' + atRuleName + ' rule in CSS asset "' + assetName + '" cannot be isolated safely.');
+      }
+      if (atRuleName === "charset" && hasNamespace) {
+        throw new Error('Unsupported @charset rule in CSS asset "' + assetName + '" cannot be isolated safely after @namespace. Move @charset before @namespace.');
+      }
+      if (atRuleName === "namespace") hasNamespace = true;
+      output += leading + css.slice(index, atRule.end);
+      index = atRule.end;
+    }
+    return { css: output, endIndex: index };
+  }
+
+  function readRulePrelude(css, startIndex, endIndex) {
+    let index = startIndex;
+    let quote = "";
+    let bracketDepth = 0;
+    let parenDepth = 0;
+    while (index < endIndex) {
+      const char = css[index];
+      if (quote) {
+        if (char === "\\\\") index += 2;
+        else {
+          if (char === quote) quote = "";
+          index += 1;
+        }
+        continue;
+      }
+      if (cssStartsWithComment(css, index)) {
+        const commentEnd = css.indexOf("*/", index + 2);
+        index = commentEnd === -1 ? endIndex : Math.min(commentEnd + 2, endIndex);
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        quote = char;
+        index += 1;
+        continue;
+      }
+      if (char === "[") bracketDepth += 1;
+      else if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+      else if (char === "(") parenDepth += 1;
+      else if (char === ")") parenDepth = Math.max(0, parenDepth - 1);
+      else if (bracketDepth === 0 && parenDepth === 0 && char === "{") {
+        return { prelude: css.slice(startIndex, index), blockStart: index, end: index + 1 };
+      } else if (bracketDepth === 0 && parenDepth === 0 && char === ";") {
+        return { prelude: css.slice(startIndex, index), blockStart: -1, end: index + 1 };
+      }
+      index += 1;
+    }
+    return { prelude: css.slice(startIndex, endIndex), blockStart: -1, end: endIndex };
+  }
+
+  function findMatchingBrace(css, openBraceIndex, endIndex) {
+    let depth = 1;
+    let index = openBraceIndex + 1;
+    let quote = "";
+    while (index < endIndex) {
+      const char = css[index];
+      if (quote) {
+        if (char === "\\\\") index += 2;
+        else {
+          if (char === quote) quote = "";
+          index += 1;
+        }
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        quote = char;
+        index += 1;
+        continue;
+      }
+      if (css.startsWith("/*", index)) {
+        const commentEnd = css.indexOf("*/", index + 2);
+        index = commentEnd === -1 ? endIndex : commentEnd + 2;
+        continue;
+      }
+      if (char === "{") depth += 1;
+      else if (char === "}") {
+        depth -= 1;
+        if (depth === 0) return index;
+      }
+      index += 1;
+    }
+    return -1;
+  }
+
+  function readAtRuleName(prelude) {
+    const match = /^@([A-Za-z-]+)/.exec(prelude.trim());
+    return match?.[1]?.toLowerCase() ?? "";
+  }
+
+  function isKeyframesAtRule(atRuleName) {
+    return atRuleName === "keyframes" || atRuleName.endsWith("-keyframes");
+  }
+
+  function rewriteKeyframesHeader(header, keyframeNames) {
+    return header.replace(/(@(?:-[A-Za-z]+-)?keyframes\\s+)([^\\s{]+)/, (_match, prefix, name) => prefix + (keyframeNames.get(name) ?? name));
+  }
+
+  function splitSelectorList(selectorList) {
+    const selectors = [];
+    let current = "";
+    let quote = "";
+    let bracketDepth = 0;
+    let parenDepth = 0;
+    for (let index = 0; index < selectorList.length; index += 1) {
+      const char = selectorList[index];
+      if (quote) {
+        current += char;
+        if (char === "\\\\") {
+          index += 1;
+          current += selectorList[index] ?? "";
+        } else if (char === quote) quote = "";
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        quote = char;
+        current += char;
+        continue;
+      }
+      if (cssStartsWithComment(selectorList, index)) {
+        const commentEnd = selectorList.indexOf("*/", index + 2);
+        const nextIndex = commentEnd === -1 ? selectorList.length : commentEnd + 2;
+        current += selectorList.slice(index, nextIndex);
+        index = nextIndex - 1;
+        continue;
+      }
+      if (char === "[") bracketDepth += 1;
+      else if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+      else if (char === "(") parenDepth += 1;
+      else if (char === ")") parenDepth = Math.max(0, parenDepth - 1);
+      if (char === "," && bracketDepth === 0 && parenDepth === 0) {
+        selectors.push(current);
+        current = "";
+      } else current += char;
+    }
+    selectors.push(current);
+    return selectors;
+  }
+
+  function isolateSelectorList(selectorList, assetName) {
+    return splitSelectorList(selectorList).map((selector) => isolateSelector(selector, assetName)).join(",");
+  }
+
+  function isolateSelector(selector, assetName) {
+    const leadingWhitespace = selector.match(/^\\s*/)?.[0] ?? "";
+    const trailingWhitespace = selector.match(/\\s*$/)?.[0] ?? "";
+    const trimmed = selector.trim();
+    assertSafeSelector(trimmed, assetName);
+    if (trimmed.includes(":host")) {
+      return leadingWhitespace + isolateHostSelector(trimmed, assetName) + trailingWhitespace;
+    }
+    return leadingWhitespace + widgetPackageScopeSelector + " " + trimmed + trailingWhitespace;
+  }
+
+  function isolateHostSelector(selector, assetName) {
+    if (!selector.startsWith(":host")) {
+      throw new Error('Unsupported :host selector "' + selector + '" in CSS asset "' + assetName + '" cannot be isolated safely.');
+    }
+    const match = /^:host(?:\\(([^()]*)\\))?($|[\\s>+~].*)/.exec(selector);
+    if (!match) {
+      throw new Error('Unsupported :host selector "' + selector + '" in CSS asset "' + assetName + '" cannot be isolated safely.');
+    }
+    const hostSelector = (match[1] ?? "").trim();
+    const selectorAfterHost = match[2] ?? "";
+    const firstSelectorAfterHostIndex = skipCssWhitespaceAndComments(selectorAfterHost, 0);
+    const firstSelectorAfterHostChar = selectorAfterHost[firstSelectorAfterHostIndex] ?? "";
+    if (hostSelector.includes(",") || hasTopLevelHostArgumentCombinator(hostSelector) || firstSelectorAfterHostChar === "+" || firstSelectorAfterHostChar === "~" || (hostSelector && (unsafeSelectorPattern.test(hostSelector) || hasUnsafeUniversalSelector(hostSelector)))) {
+      throw new Error('Unsupported :host selector "' + selector + '" in CSS asset "' + assetName + '" cannot be isolated safely.');
+    }
+    return widgetPackageScopeSelector + hostSelector + selectorAfterHost;
+  }
+
+  function hasTopLevelHostArgumentCombinator(value) {
+    let quote = "";
+    let bracketDepth = 0;
+    let hasSelectorBeforeWhitespace = false;
+    let index = 0;
+    while (index < value.length) {
+      const char = value[index];
+      if (quote) {
+        if (char === "\\\\") index += 2;
+        else {
+          if (char === quote) quote = "";
+          index += 1;
+        }
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        quote = char;
+        index += 1;
+        continue;
+      }
+      if (char === "[") {
+        bracketDepth += 1;
+        hasSelectorBeforeWhitespace = true;
+      } else if (char === "]") {
+        bracketDepth = Math.max(0, bracketDepth - 1);
+      } else if (bracketDepth === 0 && (char === "+" || char === "~" || char === ">")) {
+        return true;
+      } else if (bracketDepth === 0 && /\\s/.test(char)) {
+        const nextIndex = skipCssWhitespaceAndComments(value, index);
+        if (hasSelectorBeforeWhitespace && nextIndex < value.length) return true;
+        index = nextIndex;
+        continue;
+      } else if (bracketDepth === 0 && cssStartsWithComment(value, index)) {
+        const nextIndex = skipCssWhitespaceAndComments(value, index);
+        if (hasSelectorBeforeWhitespace && nextIndex < value.length) return true;
+        index = nextIndex;
+        continue;
+      } else if (bracketDepth === 0 && !/\\s/.test(char)) {
+        hasSelectorBeforeWhitespace = true;
+      }
+      index += 1;
+    }
+    return false;
+  }
+
+  function assertSafeSelector(selector, assetName) {
+    if (!selector || unsafeSelectorPattern.test(selector) || hasUnsafeUniversalSelector(selector) || pseudoElementOnlySelectorPattern.test(selector)) {
+      throw new Error('Unsafe selector "' + selector + '" in CSS asset "' + assetName + '" cannot be isolated safely.');
+    }
+  }
+
+  function hasUnsafeUniversalSelector(selector) {
+    universalSelectorPattern.lastIndex = 0;
+    let match;
+    while ((match = universalSelectorPattern.exec(selector)) !== null) {
+      const universalStart = match.index + match[1].length;
+      if (!hasAnchoringSelectorBefore(selector.slice(0, universalStart))) return true;
+    }
+    return false;
+  }
+
+  function hasAnchoringSelectorBefore(value) {
+    return stripCssComments(value).replace(/[\\s>+~]+/g, "").length > 0;
+  }
+
+  function namespaceKeyframesBlock(block, keyframeNames, fontFamilyNames, customPropertyNames, assetName) {
+    let output = "";
+    let index = 0;
+    while (index < block.length) {
+      if (cssStartsWithComment(block, index)) {
+        const commentEnd = block.indexOf("*/", index + 2);
+        const nextIndex = commentEnd === -1 ? block.length : commentEnd + 2;
+        output += block.slice(index, nextIndex);
+        index = nextIndex;
+        continue;
+      }
+      if (/\\s/.test(block[index] ?? "")) {
+        output += block[index];
+        index += 1;
+        continue;
+      }
+      const keyframeRule = readRulePrelude(block, index, block.length);
+      if (keyframeRule.blockStart === -1) {
+        output += block.slice(index, keyframeRule.end);
+        index = keyframeRule.end;
+        continue;
+      }
+      const keyframeBlockEnd = findMatchingBrace(block, keyframeRule.blockStart, block.length);
+      if (keyframeBlockEnd === -1) {
+        output += block.slice(index);
+        index = block.length;
+        continue;
+      }
+      output += keyframeRule.prelude + "{" + namespaceStyleBlock(block.slice(keyframeRule.blockStart + 1, keyframeBlockEnd), keyframeNames, fontFamilyNames, customPropertyNames, assetName) + "}";
+      index = keyframeBlockEnd + 1;
+    }
+    return output;
+  }
+
+  function namespaceStyleBlock(block, keyframeNames, fontFamilyNames, customPropertyNames, assetName) {
+    assertNoNestedCssBlock(block, assetName);
+    return rewriteDeclarationBlock(block, (propertyName, rawProperty, value) => {
+      const nextProperty = namespaceCustomPropertyName(rawProperty, propertyName, customPropertyNames);
+      let nextValue = value;
+      if (propertyName === "animation" || propertyName === "-webkit-animation") {
+        nextValue = namespaceAnimationShorthandValue(nextValue, keyframeNames);
+      } else if (propertyName === "animation-name" || propertyName === "-webkit-animation-name") {
+        nextValue = namespaceAnimationNameValue(nextValue, keyframeNames);
+      } else if (propertyName === "font-family") {
+        nextValue = namespaceFontFamilyValue(nextValue, fontFamilyNames);
+      } else if (propertyName === "font") {
+        nextValue = namespaceFontShorthandValue(nextValue, fontFamilyNames, assetName);
+      }
+      if (propertyName === "container-name") {
+        nextValue = namespaceContainerNameValue(nextValue);
+      } else if (propertyName === "container") {
+        nextValue = namespaceContainerShorthandValue(nextValue);
+      }
+      if (propertyName === "transition" || propertyName === "transition-property" || propertyName === "will-change") {
+        nextValue = namespaceCustomPropertyIdentifierValue(nextValue, customPropertyNames);
+      }
+      if (propertyName === "view-transition-name" || propertyName === "scroll-timeline-name" || propertyName === "animation-timeline") {
+        nextValue = namespaceCssGlobalNameValue(nextValue);
+      }
+      nextValue = namespaceCustomPropertyReferencesValue(nextValue, customPropertyNames);
+      return { property: nextProperty, value: nextValue };
+    });
+  }
+
+  function namespaceFontFaceBlock(block, fontFamilyNames, customPropertyNames) {
+    return rewriteDeclarationBlock(block, (propertyName, rawProperty, value) => {
+      const nextValue = propertyName === "font-family"
+        ? namespaceFontFamilyValue(value, fontFamilyNames)
+        : namespaceCustomPropertyReferencesValue(value, customPropertyNames);
+      return { property: rawProperty, value: nextValue };
+    });
+  }
+
+  function namespaceAnimationNameValue(value, keyframeNames) {
+    return replaceCssValueOutsideProtectedRanges(value, (chunk) => {
+      let nextChunk = chunk;
+      for (const [name, scopedName] of keyframeNames) {
+        nextChunk = nextChunk.replace(new RegExp("(^|[^A-Za-z0-9_-])" + escapeRegExp(name) + "(?=$|[^A-Za-z0-9_-])", "g"), (_match, prefix) => prefix + scopedName);
+      }
+      return nextChunk;
+    });
+  }
+
+  function namespaceAnimationShorthandValue(value, keyframeNames) {
+    if (keyframeNames.size === 0) return value;
+    return splitCssCommaList(value).map((item) => rewriteAnimationShorthandItem(item, keyframeNames)).join(",");
+  }
+
+  function rewriteAnimationShorthandItem(item, keyframeNames) {
+    const tokens = readCssValueTokens(item);
+    const reservedState = createAnimationShorthandReservedState();
+    let output = "";
+    let lastIndex = 0;
+    for (const token of tokens) {
+      const scopedName = keyframeNames.get(token.text);
+      const isReservedToken = consumeAnimationShorthandReservedToken(token.text, reservedState);
+      if (!scopedName || isReservedToken) continue;
+      output += item.slice(lastIndex, token.start) + scopedName;
+      lastIndex = token.end;
+    }
+    return output + item.slice(lastIndex);
+  }
+
+  function createAnimationShorthandReservedState() {
+    return {
+      duration: false,
+      delay: false,
+      timingFunction: false,
+      iterationCount: false,
+      direction: false,
+      fillMode: false,
+      playState: false,
+    };
+  }
+
+  function consumeAnimationShorthandReservedToken(token, state) {
+    const lower = token.toLowerCase();
+    if (isAnimationTimeToken(token)) {
+      if (!state.duration) {
+        state.duration = true;
+        return true;
+      }
+      if (!state.delay) {
+        state.delay = true;
+        return true;
+      }
+      return false;
+    }
+    if (!state.timingFunction && isAnimationTimingFunctionToken(lower)) {
+      state.timingFunction = true;
+      return true;
+    }
+    if (!state.iterationCount && isAnimationIterationCountToken(token, lower)) {
+      state.iterationCount = true;
+      return true;
+    }
+    if (!state.direction && animationDirectionKeywords.has(lower)) {
+      state.direction = true;
+      return true;
+    }
+    if (!state.fillMode && animationFillModeKeywords.has(lower)) {
+      state.fillMode = true;
+      return true;
+    }
+    if (!state.playState && animationPlayStateKeywords.has(lower)) {
+      state.playState = true;
+      return true;
+    }
+    if (animationGlobalKeywords.has(lower)) return true;
+    return false;
+  }
+
+  function isAnimationTimeToken(token) {
+    return /^-?(?:\\d+|\\d*\\.\\d+)(?:ms|s)$/i.test(token);
+  }
+
+  function isAnimationTimingFunctionToken(lowerToken) {
+    return animationTimingFunctionKeywords.has(lowerToken) || lowerToken.includes("(");
+  }
+
+  function isAnimationIterationCountToken(token, lowerToken) {
+    return lowerToken === "infinite" || /^-?(?:\\d+|\\d*\\.\\d+)$/.test(token);
+  }
+
+  const animationTimingFunctionKeywords = new Set([
+    "ease",
+    "ease-in",
+    "ease-in-out",
+    "ease-out",
+    "linear",
+    "step-end",
+    "step-start",
+  ]);
+  const animationDirectionKeywords = new Set(["normal", "reverse", "alternate", "alternate-reverse"]);
+  const animationFillModeKeywords = new Set(["none", "forwards", "backwards", "both"]);
+  const animationPlayStateKeywords = new Set(["running", "paused"]);
+  const animationGlobalKeywords = new Set(["inherit", "initial", "revert", "revert-layer", "unset"]);
+
+  function namespaceFontFamilyValue(value, fontFamilyNames) {
+    if (fontFamilyNames.size === 0) return value;
+    const important = splitCssImportantSuffix(value);
+    return splitCssCommaList(important.value).map((family) => namespaceSingleFontFamily(family, fontFamilyNames)).join(",") + important.suffix;
+  }
+
+  function namespaceFontShorthandValue(value, fontFamilyNames, assetName) {
+    if (fontFamilyNames.size === 0) return value;
+    const familyStart = findFontShorthandFamilyStart(value);
+    if (familyStart === -1) {
+      if (fontShorthandReferencesScopedFontFamily(value, fontFamilyNames)) {
+        throw new Error('Unsupported font shorthand in CSS asset "' + assetName + '" cannot be isolated safely. Use font-family with font-style/font-weight/font-size longhands, or use a supported font shorthand with an explicit font-size before the family list.');
+      }
+      return value;
+    }
+    return value.slice(0, familyStart) + namespaceFontFamilyValue(value.slice(familyStart), fontFamilyNames);
+  }
+
+  function fontShorthandReferencesScopedFontFamily(value, fontFamilyNames) {
+    const tokens = readCssValueTokens(value);
+    return tokens.some((token) => fontFamilyNames.has(normalizeFontFamilyName(token.text)));
+  }
+
+  function splitCssImportantSuffix(value) {
+    const match = /!\\s*important\\s*$/i.exec(value);
+    if (!match) return { value, suffix: "" };
+    return {
+      value: value.slice(0, match.index),
+      suffix: value.slice(match.index),
+    };
+  }
+
+  function namespaceSingleFontFamily(family, fontFamilyNames) {
+    const leadingWhitespace = family.match(/^\\s*/)?.[0] ?? "";
+    const trailingWhitespace = family.match(/\\s*$/)?.[0] ?? "";
+    const trimmed = family.trim();
+    const normalized = normalizeFontFamilyName(trimmed);
+    const scopedName = fontFamilyNames.get(normalized);
+    if (!scopedName) return family;
+    const quote = trimmed[0] === '"' || trimmed[0] === "'" ? trimmed[0] : "";
+    return leadingWhitespace + (quote ? quote + scopedName + quote : scopedName) + trailingWhitespace;
+  }
+
+  function normalizeFontFamilyName(value) {
+    const trimmed = value.trim();
+    if ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith("'") && trimmed.endsWith("'"))) {
+      return trimmed.slice(1, -1);
+    }
+    return trimmed;
+  }
+
+  function rewritePropertyHeader(header, customPropertyNames) {
+    let nextHeader = header;
+    for (const [name, scopedName] of customPropertyNames) {
+      nextHeader = nextHeader.replace(new RegExp("(@property\\\\s+)" + escapeRegExp(name) + "(?=$|[\\\\s{])", "g"), (_match, prefix) => prefix + scopedName);
+    }
+    return nextHeader;
+  }
+
+  function rewriteLayerPrelude(prelude) {
+    const match = /^(@layer\\b)([\\s\\S]*)$/i.exec(prelude);
+    if (!match) return prelude;
+    const layerList = match[2] ?? "";
+    if (!layerList.trim()) return prelude;
+    return match[1] + splitCssCommaList(layerList).map(namespaceLayerName).join(",");
+  }
+
+  function namespaceLayerName(layerName) {
+    const leadingWhitespace = layerName.match(/^\\s*/)?.[0] ?? "";
+    const trailingWhitespace = layerName.match(/\\s*$/)?.[0] ?? "";
+    const trimmed = layerName.trim();
+    return trimmed ? leadingWhitespace + widgetPackageLayerPrefix + trimmed + trailingWhitespace : layerName;
+  }
+
+  function rewriteContainerAtRuleHeader(header) {
+    if (!header.endsWith("{")) return header;
+    return rewriteContainerAtRulePrelude(header.slice(0, -1)) + "{";
+  }
+
+  function rewriteContainerAtRulePrelude(prelude) {
+    const match = /^(@container\\b)([\\s\\S]*)$/i.exec(prelude);
+    if (!match) return prelude;
+    const condition = match[2] ?? "";
+    const leadingWhitespace = condition.match(/^\\s*/)?.[0] ?? "";
+    const conditionBody = condition.slice(leadingWhitespace.length);
+    if (!conditionBody || conditionBody.startsWith("(") || /^(?:style|scroll-state)\\s*\\(/.test(conditionBody)) {
+      return prelude;
+    }
+
+    const tokens = readCssValueTokens(conditionBody);
+    const nameToken = tokens[0];
+    if (!nameToken || nameToken.start !== 0 || isContainerQueryConditionKeyword(nameToken.text) || isReservedContainerName(nameToken.text) || nameToken.text.includes("(")) {
+      return prelude;
+    }
+    return match[1] + leadingWhitespace + namespaceContainerName(nameToken.text) + conditionBody.slice(nameToken.end);
+  }
+
+  function namespaceContainerNameValue(value) {
+    return replaceCssValueOutsideProtectedRanges(value, (chunk) => namespaceContainerNamesInChunk(chunk));
+  }
+
+  function namespaceContainerShorthandValue(value) {
+    const slashIndex = findTopLevelSlash(value);
+    if (slashIndex !== -1) {
+      return namespaceContainerNameValue(value.slice(0, slashIndex)) + value.slice(slashIndex);
+    }
+
+    const trimmed = stripCssComments(value).trim().toLowerCase();
+    if (isReservedContainerName(trimmed) || containerTypeKeywords.has(trimmed)) return value;
+    return namespaceContainerNameValue(value);
+  }
+
+  function namespaceContainerNamesInChunk(chunk) {
+    return chunk.replace(/(^|[^A-Za-z0-9_-])([A-Za-z_][A-Za-z0-9_-]*|-[A-Za-z_][A-Za-z0-9_-]*)(?=$|[^A-Za-z0-9_-])/g, (_match, prefix, name) => {
+      if (isReservedContainerName(name)) return prefix + name;
+      return prefix + namespaceContainerName(name);
+    });
+  }
+
+  function namespaceContainerName(name) {
+    return widgetPackageContainerPrefix + name;
+  }
+
+  function isReservedContainerName(name) {
+    return containerNameReservedKeywords.has(name.toLowerCase());
+  }
+
+  function isContainerQueryConditionKeyword(name) {
+    return containerQueryConditionKeywords.has(name.toLowerCase());
+  }
+
+  const containerTypeKeywords = new Set(["normal", "size", "inline-size", "scroll-state"]);
+  const containerQueryConditionKeywords = new Set(["not", "and", "or"]);
+  const containerNameReservedKeywords = new Set(["none", "inherit", "initial", "revert", "revert-layer", "unset"]);
+
+  function namespaceCustomPropertyName(rawProperty, propertyName, customPropertyNames) {
+    const scopedName = customPropertyNames.get(propertyName);
+    if (!scopedName) return rawProperty;
+    return rawProperty.replace(new RegExp(escapeRegExp(propertyName) + "(?=\\\\s*$)"), scopedName);
+  }
+
+  function namespaceCustomPropertyReferences(block, customPropertyNames) {
+    return rewriteDeclarationBlock(block, (propertyName, rawProperty, value) => ({
+      property: rawProperty,
+      value: namespaceCustomPropertyReferencesValue(value, customPropertyNames),
+    }));
+  }
+
+  function namespaceCustomPropertyReferencesValue(value, customPropertyNames) {
+    if (customPropertyNames.size === 0) return value;
+    return replaceCssValueOutsideProtectedRanges(value, (chunk) => {
+      let nextChunk = chunk;
+      for (const [name, scopedName] of customPropertyNames) {
+        nextChunk = nextChunk.replace(new RegExp("(\\\\bvar\\\\(\\\\s*)" + escapeRegExp(name) + "(?=\\\\s*[,)])", "g"), (_match, prefix) => prefix + scopedName);
+      }
+      return nextChunk;
+    });
+  }
+
+  function namespaceCustomPropertyIdentifierValue(value, customPropertyNames) {
+    if (customPropertyNames.size === 0) return value;
+    return replaceCssValueOutsideProtectedRanges(value, (chunk) => {
+      let nextChunk = chunk;
+      for (const [name, scopedName] of customPropertyNames) {
+        nextChunk = nextChunk.replace(new RegExp("(^|[^A-Za-z0-9_-])" + escapeRegExp(name) + "(?=$|[^A-Za-z0-9_-])", "g"), (_match, prefix) => prefix + scopedName);
+      }
+      return nextChunk;
+    });
+  }
+
+  function namespaceCssGlobalNameValue(value) {
+    return replaceCssValueOutsideProtectedRanges(value, (chunk) => {
+      return chunk.replace(/(^|[^A-Za-z0-9_-])(--[A-Za-z0-9_-]+|[A-Za-z_][A-Za-z0-9_-]*|-[A-Za-z_][A-Za-z0-9_-]*)(?=$|[^A-Za-z0-9_-])/g, (_match, prefix, name, offset, source) => {
+        const nextChar = source[offset + prefix.length + name.length] ?? "";
+        const beforeName = source.slice(0, offset + prefix.length);
+        if (nextChar === "(" || /(?:^|[^A-Za-z0-9_-])var\\s*\\($/i.test(beforeName) || cssGlobalNameReservedKeywords.has(name.toLowerCase())) return prefix + name;
+        return prefix + widgetPackageCssGlobalNamePrefix + name;
+      });
+    });
+  }
+
+  const cssGlobalNameReservedKeywords = new Set(["auto", "none", "inherit", "initial", "revert", "revert-layer", "unset"]);
+
+  function assertNoNestedCssBlock(block, assetName) {
+    let index = 0;
+    let quote = "";
+    let parenDepth = 0;
+    while (index < block.length) {
+      const char = block[index];
+      if (quote) {
+        if (char === "\\\\") index += 2;
+        else {
+          if (char === quote) quote = "";
+          index += 1;
+        }
+        continue;
+      }
+      if (cssStartsWithComment(block, index)) {
+        const commentEnd = block.indexOf("*/", index + 2);
+        index = commentEnd === -1 ? block.length : commentEnd + 2;
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        quote = char;
+        index += 1;
+        continue;
+      }
+      if (char === "(") parenDepth += 1;
+      else if (char === ")") parenDepth = Math.max(0, parenDepth - 1);
+      else if (char === "{" && parenDepth === 0) {
+        throw new Error('Unsupported nested CSS rule in CSS asset "' + assetName + '" cannot be isolated safely. Compile nested CSS before building the widget package.');
+      }
+      index += 1;
+    }
+  }
+
+  function rewriteDeclarationBlock(block, rewriteDeclaration) {
+    let output = "";
+    let declarationStart = 0;
+    let index = 0;
+    let quote = "";
+    let parenDepth = 0;
+    while (index < block.length) {
+      const char = block[index];
+      if (quote) {
+        if (char === "\\\\") index += 2;
+        else {
+          if (char === quote) quote = "";
+          index += 1;
+        }
+        continue;
+      }
+      if (cssStartsWithComment(block, index)) {
+        const commentEnd = block.indexOf("*/", index + 2);
+        index = commentEnd === -1 ? block.length : commentEnd + 2;
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        quote = char;
+        index += 1;
+        continue;
+      }
+      if (char === "(") parenDepth += 1;
+      else if (char === ")") parenDepth = Math.max(0, parenDepth - 1);
+      else if (char === ";" && parenDepth === 0) {
+        output += rewriteDeclarationSegment(block.slice(declarationStart, index), rewriteDeclaration) + ";";
+        declarationStart = index + 1;
+      }
+      index += 1;
+    }
+    return output + rewriteDeclarationSegment(block.slice(declarationStart), rewriteDeclaration);
+  }
+
+  function rewriteDeclarationSegment(segment, rewriteDeclaration) {
+    const colonIndex = findDeclarationColon(segment);
+    if (colonIndex === -1) return segment;
+    const rawProperty = segment.slice(0, colonIndex);
+    const rawPropertyName = stripCssComments(rawProperty).trim();
+    const propertyName = rawPropertyName.startsWith("--") ? rawPropertyName : rawPropertyName.toLowerCase();
+    if (!propertyName) return segment;
+    const rewritten = rewriteDeclaration(propertyName, rawProperty, segment.slice(colonIndex + 1));
+    return rewritten.property + ":" + rewritten.value;
+  }
+
+  function findDeclarationColon(segment) {
+    let index = 0;
+    let quote = "";
+    let parenDepth = 0;
+    while (index < segment.length) {
+      const char = segment[index];
+      if (quote) {
+        if (char === "\\\\") index += 2;
+        else {
+          if (char === quote) quote = "";
+          index += 1;
+        }
+        continue;
+      }
+      if (cssStartsWithComment(segment, index)) {
+        const commentEnd = segment.indexOf("*/", index + 2);
+        index = commentEnd === -1 ? segment.length : commentEnd + 2;
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        quote = char;
+        index += 1;
+        continue;
+      }
+      if (char === "(") parenDepth += 1;
+      else if (char === ")") parenDepth = Math.max(0, parenDepth - 1);
+      else if (char === ":" && parenDepth === 0) return index;
+      index += 1;
+    }
+    return -1;
+  }
+
+  function replaceCssValueOutsideProtectedRanges(value, replaceChunk) {
+    let output = "";
+    let chunkStart = 0;
+    let index = 0;
+    while (index < value.length) {
+      if (cssStartsWithComment(value, index)) {
+        output += replaceChunk(value.slice(chunkStart, index));
+        const commentEnd = value.indexOf("*/", index + 2);
+        const nextIndex = commentEnd === -1 ? value.length : commentEnd + 2;
+        output += value.slice(index, nextIndex);
+        index = nextIndex;
+        chunkStart = index;
+        continue;
+      }
+      const char = value[index];
+      if (char === '"' || char === "'") {
+        output += replaceChunk(value.slice(chunkStart, index));
+        const stringEnd = findCssStringEnd(value, index);
+        output += value.slice(index, stringEnd);
+        index = stringEnd;
+        chunkStart = index;
+        continue;
+      }
+      if (isCssUrlFunctionStart(value, index)) {
+        output += replaceChunk(value.slice(chunkStart, index));
+        const urlEnd = findCssFunctionEnd(value, value.indexOf("(", index));
+        output += value.slice(index, urlEnd);
+        index = urlEnd;
+        chunkStart = index;
+        continue;
+      }
+      index += 1;
+    }
+    return output + replaceChunk(value.slice(chunkStart));
+  }
+
+  function findCssStringEnd(value, quoteIndex) {
+    const quote = value[quoteIndex];
+    let index = quoteIndex + 1;
+    while (index < value.length) {
+      const char = value[index];
+      if (char === "\\\\") index += 2;
+      else {
+        index += 1;
+        if (char === quote) return index;
+      }
+    }
+    return value.length;
+  }
+
+  function findCssFunctionEnd(value, openParenIndex) {
+    let index = openParenIndex + 1;
+    let depth = 1;
+    let quote = "";
+    while (index < value.length) {
+      const char = value[index];
+      if (quote) {
+        if (char === "\\\\") index += 2;
+        else {
+          if (char === quote) quote = "";
+          index += 1;
+        }
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        quote = char;
+        index += 1;
+        continue;
+      }
+      if (cssStartsWithComment(value, index)) {
+        const commentEnd = value.indexOf("*/", index + 2);
+        index = commentEnd === -1 ? value.length : commentEnd + 2;
+        continue;
+      }
+      if (char === "(") depth += 1;
+      else if (char === ")") {
+        depth -= 1;
+        if (depth === 0) return index + 1;
+      }
+      index += 1;
+    }
+    return value.length;
+  }
+
+  function findFontShorthandFamilyStart(value) {
+    const tokens = readCssValueTokens(value);
+    for (let index = 0; index < tokens.length; index += 1) {
+      const token = tokens[index];
+      if (!token || !isFontSizeToken(token.text)) continue;
+      if (findTopLevelSlash(token.text) !== -1) return token.end;
+      const slashIndex = skipCssWhitespaceAndComments(value, token.end);
+      if (value[slashIndex] !== "/") return token.end;
+      const lineHeightStart = skipCssWhitespaceAndComments(value, slashIndex + 1);
+      const lineHeightToken = tokens.find((candidate) => candidate.start >= lineHeightStart);
+      return lineHeightToken ? lineHeightToken.end : token.end;
+    }
+    return -1;
+  }
+
+  function readCssValueTokens(value) {
+    const tokens = [];
+    let index = 0;
+    while (index < value.length) {
+      if (/\\s/.test(value[index] ?? "")) {
+        index += 1;
+        continue;
+      }
+      if (cssStartsWithComment(value, index)) {
+        const commentEnd = value.indexOf("*/", index + 2);
+        index = commentEnd === -1 ? value.length : commentEnd + 2;
+        continue;
+      }
+      const start = index;
+      const char = value[index];
+      if (char === '"' || char === "'") {
+        index = findCssStringEnd(value, index);
+      } else {
+        let parenDepth = 0;
+        while (index < value.length) {
+          if (cssStartsWithComment(value, index)) {
+            if (parenDepth === 0) break;
+            const commentEnd = value.indexOf("*/", index + 2);
+            index = commentEnd === -1 ? value.length : commentEnd + 2;
+            continue;
+          }
+          const tokenChar = value[index];
+          if ((tokenChar === '"' || tokenChar === "'") && parenDepth > 0) {
+            index = findCssStringEnd(value, index);
+            continue;
+          }
+          if (tokenChar === "(") parenDepth += 1;
+          else if (tokenChar === ")") parenDepth = Math.max(0, parenDepth - 1);
+          if (parenDepth === 0 && /\\s/.test(tokenChar ?? "")) break;
+          index += 1;
+        }
+      }
+      tokens.push({ start, end: index, text: value.slice(start, index) });
+    }
+    return tokens;
+  }
+
+  function isFontSizeToken(token) {
+    const slashIndex = findTopLevelSlash(token);
+    const sizeToken = slashIndex === -1 ? token : token.slice(0, slashIndex);
+    return /^(?:xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|smaller|larger|math|(?:\\d+|\\d*\\.\\d+)(?:px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cap|ic|lh|rlh|cm|mm|q|in|pc|pt))$/i.test(sizeToken) || isFontSizeFunctionToken(sizeToken);
+  }
+
+  function isFontSizeFunctionToken(token) {
+    return /^(?:calc|clamp|min|max|var|env|abs|sign|round|mod|rem|sin|cos|tan|asin|acos|atan|atan2|pow|sqrt|hypot|log|exp)\\(/i.test(token);
+  }
+
+  function findTopLevelSlash(value) {
+    let index = 0;
+    let quote = "";
+    let parenDepth = 0;
+    while (index < value.length) {
+      const char = value[index];
+      if (quote) {
+        if (char === "\\\\") index += 2;
+        else {
+          if (char === quote) quote = "";
+          index += 1;
+        }
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        quote = char;
+        index += 1;
+        continue;
+      }
+      if (char === "(") parenDepth += 1;
+      else if (char === ")") parenDepth = Math.max(0, parenDepth - 1);
+      else if (char === "/" && parenDepth === 0) return index;
+      index += 1;
+    }
+    return -1;
+  }
+
+  function skipCssWhitespaceAndComments(value, startIndex) {
+    let index = startIndex;
+    while (index < value.length) {
+      if (/\\s/.test(value[index] ?? "")) {
+        index += 1;
+        continue;
+      }
+      if (cssStartsWithComment(value, index)) {
+        const commentEnd = value.indexOf("*/", index + 2);
+        index = commentEnd === -1 ? value.length : commentEnd + 2;
+        continue;
+      }
+      return index;
+    }
+    return index;
+  }
+
+  function cssStartsWithComment(value, index) {
+    return value[index] === "/" && value[index + 1] === "*";
+  }
+
+  function isCssUrlFunctionStart(value, index) {
+    return /^url\\s*\\(/i.test(value.slice(index)) && !/[A-Za-z0-9_-]/.test(value[index - 1] ?? "");
+  }
+
+  function stripCssComments(value) {
+    return value.replace(/\\/\\*[\\s\\S]*?\\*\\//g, "");
+  }
+
+  function splitCssCommaList(value) {
+    const parts = [];
+    let current = "";
+    let quote = "";
+    let parenDepth = 0;
+    for (let index = 0; index < value.length; index += 1) {
+      const char = value[index];
+      if (quote) {
+        current += char;
+        if (char === "\\\\") {
+          index += 1;
+          current += value[index] ?? "";
+        } else if (char === quote) quote = "";
+        continue;
+      }
+      if (char === '"' || char === "'") {
+        quote = char;
+        current += char;
+        continue;
+      }
+      if (char === "(") parenDepth += 1;
+      else if (char === ")") parenDepth = Math.max(0, parenDepth - 1);
+      if (char === "," && parenDepth === 0) {
+        parts.push(current);
+        current = "";
+      } else current += char;
+    }
+    parts.push(current);
+    return parts;
+  }
+
+  function escapeRegExp(value) {
+    return value.replace(/[.*+?^\${}()|[\\]\\\\]/g, "\\\\$&");
+  }
+
+  function encodeCssIdentifier(value) {
+    return Array.from(value, (char) => char.codePointAt(0)?.toString(16).padStart(2, "0") ?? "00").join("_");
+  }
+
   return {
 ${configFileSource}    publicDir: false,
     resolve: {
       conditions: ["fluid-widget-authoring"],
     },
-    plugins: [fluidWidgetBuildInvariantsPlugin()],
+    plugins: [fluidWidgetBuildInvariantsPlugin(), fluidWidgetCssIsolationPlugin()],
     build: createFluidWidgetBuildInvariants(),
   };
 })()`;