diff --git a/src/utils/shadow-css.ts b/src/utils/shadow-css.ts
index f2a600bd12c..bbc2c5e9989 100644
--- a/src/utils/shadow-css.ts
+++ b/src/utils/shadow-css.ts
@@ -92,8 +92,26 @@ const _polyfillHostRe = /-shadowcsshost/gim;
  * @param selector The CSS selector we want to match for replacement
  * @returns A look-behind regex containing the selector
  */
-const createSupportsRuleRe = (selector: string) =>
-  new RegExp(`((?<!(^@supports(.*)))|(?<=\{.*))(${selector}\\b)`, 'gim');
+const createSupportsRuleRe = (selector: string) => {
+  // We need to match any occurrence of the selector that's NOT inside @supports selector(...)
+  const safeSelector = escapeRegExpSpecialCharacters(selector);
+
+  // This regex needs to:
+  // 1. Skip selectors inside @supports selector(...) rule conditions
+  // 2. Match selectors in normal CSS rules
+  // 3. Match selectors inside declaration blocks of @supports rules
+
+  // To avoid matching selectors inside @supports selector() conditions, we need to carefully
+  // construct the pattern to look for context that indicates we're NOT inside such a condition.
+  return new RegExp(
+    // First capture group: match any context before the selector that's not inside @supports selector()
+    // Using negative lookahead to avoid matching inside @supports selector(...) condition
+    `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector}))` +
+      // Then match the selector
+      `(${safeSelector}\\b)`,
+    'g',
+  );
+};
 const _colonSlottedRe = createSupportsRuleRe('::slotted');
 const _colonHostRe = createSupportsRuleRe(':host');
 const _colonHostContextRe = createSupportsRuleRe(':host-context');
@@ -212,6 +230,17 @@ const escapeBlocks = (input: string) => {
  * @returns The modified CSS string
  */
 const insertPolyfillHostInCssText = (cssText: string) => {
+  // Special handling for @supports selector() rules
+  // We need to preserve the original selector in the condition but replace it in the declaration
+  const supportsBlocks: string[] = [];
+
+  // First, extract and preserve @supports selector(...) conditions
+  cssText = cssText.replace(/@supports\s+selector\s*\(\s*([^)]*)\s*\)/g, (_, selectorContent) => {
+    const placeholder = `__supports_${supportsBlocks.length}__`;
+    supportsBlocks.push(selectorContent);
+    return `@supports selector(${placeholder})`;
+  });
+
   // These replacements use a special syntax with the `$1`. When the replacement
   // occurs, `$1` maps to the content of the string leading up to the selector
   // to be replaced.
@@ -225,6 +254,11 @@ const insertPolyfillHostInCssText = (cssText: string) => {
     .replace(_colonHostRe, `$1${_polyfillHost}`)
     .replace(_colonSlottedRe, `$1${_polyfillSlotted}`);
 
+  // Now restore the original @supports selector conditions
+  supportsBlocks.forEach((originalSelector, index) => {
+    cssText = cssText.replace(`__supports_${index}__`, originalSelector);
+  });
+
   return cssText;
 };
 
diff --git a/src/utils/test/scope-css.spec.ts b/src/utils/test/scope-css.spec.ts
index d2a981e6535..e31d05ab8e5 100644
--- a/src/utils/test/scope-css.spec.ts
+++ b/src/utils/test/scope-css.spec.ts
@@ -13,7 +13,10 @@
 
 import { scopeCss } from '../shadow-css';
 
-describe('ShadowCss', function () {
+const exampleComponentCss =
+  '@charset "UTF-8";:host{display:block}.x7f9d2e .sc-k8j2m4-h{display:block}.x7f9d2e [clamp].sc-k8j2m4-h{min-width:0}.x7f9d2e .sc-k8j2m4-h{--font-family-text:Helvetica, sans-serif}@supports (font-variation-settings: normal){.x7f9d2e .sc-k8j2m4-h{--font-family-text:Bull VF, Helvetica, sans-serif}}.x7f9d2e .sc-k8j2m4-h:lang(ja){--font-family-text:Noto Sans JP, Helvetica, sans-serif}.x7f9d2e .sc-k8j2m4-h:lang(ar){--font-family-text:Noto Kufi Arabic, Helvetica, sans-serif}.x7f9d2e .sc-k8j2m4-h:lang(ko){--font-family-text:Noto Sans KR, Helvetica, sans-serif}.x7f9d2e .sc-k8j2m4-h:lang(hi){--font-family-text:Noto Sans, Helvetica, sans-serif}.x7f9d2e .sc-k8j2m4-h:lang(he){--font-family-text:Noto Sans Hebrew, Helvetica, sans-serif}.x7f9d2e .sc-k8j2m4-h:lang(ka){--font-family-text:Noto Sans Georgian, Helvetica, sans-serif}.x7f9d2e .sc-k8j2m4-h:lang(th){--font-family-text:Noto Sans Thai, Helvetica, sans-serif}.x7f9d2e .sc-k8j2m4-h:lang(zh){--font-family-text:Microsoft YaHei, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Hiragino Kaku Gothic ProN W3, Osaka, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, Arial Unicode MS, Tahoma, Helvetica, sans-serif}.x7f9d2e .sc-k8j2m4-h:lang(zh-Hant){--font-family-text:Microsoft JhengHei, Geneva CY, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Hiragino Kaku Gothic ProN W3, Osaka, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, Arial Unicode MS, Tahoma, Helvetica, sans-serif}@supports (font-variation-settings: normal){.x7f9d2e .sc-k8j2m4-s>strong,.x7f9d2e .sc-k8j2m4-s>b{font-variation-settings:"opsz" 12, "wght" 700}}.x7f9d2e .a9b3c7{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--text-color, #000F1E);font-family:var(--text-font-family, var(--font-family-text));font-style:var(--text-font-style, inherit);font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 12, "wght" 400;font-weight:var(--text-font-weight, 400);letter-spacing:var(--text-letter-spacing, inherit);line-height:var(--text-line-height, 1.5);margin:0;text-transform:var(--text-text-transform, var(--text-transform, inherit))}.x7f9d2e .f3d8e1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x7f9d2e .b7c4d9{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:var(--text-clamp-length);overflow:hidden}.x7f9d2e .a9b3c7--size-xx-small{font-size:var(--text-font-size, calc(12rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.25);margin-bottom:0.333333em;padding-top:0.666667em}@media (min-width: 380px){.x7f9d2e .a9b3c7--size-xx-small{font-size:calc(1 * var(--text-font-size, calc(12rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media (min-width: 1200px){.x7f9d2e .a9b3c7--size-xx-small{font-size:calc(1 * var(--text-font-size, calc(12rem / var(--base-font-size, 16))))}}.x7f9d2e .a9b3c7--size-x-small{font-size:var(--text-font-size, calc(14rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.357143);margin-bottom:0.428571em;padding-top:0.714286em}@media (min-width: 380px){.x7f9d2e .a9b3c7--size-x-small{font-size:calc(1 * var(--text-font-size, calc(14rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-small{font-size:calc(1 * var(--text-font-size, calc(14rem / var(--base-font-size, 16))))}}.x7f9d2e .a9b3c7--size-small{font-size:var(--text-font-size, calc(17rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.411765);margin-bottom:0.470588em;padding-top:0.705882em}@media (min-width: 380px){.x7f9d2e .a9b3c7--size-small{font-size:calc(1 * var(--text-font-size, calc(17rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media (min-width: 1200px){.x7f9d2e .a9b3c7--size-small{font-size:calc(1 * var(--text-font-size, calc(17rem / var(--base-font-size, 16))))}}.x7f9d2e .a9b3c7--size-medium{font-size:var(--text-font-size, calc(18rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.5);margin-bottom:0.4em;padding-top:0.6em}@media (min-width: 380px){.x7f9d2e .a9b3c7--size-medium{font-size:calc(1 * var(--text-font-size, calc(18rem / var(--base-font-size, 16) + 2 * (100vw - 380px) / 820)))}}@media (min-width: 1200px){.x7f9d2e .a9b3c7--size-medium{font-size:calc(1 * var(--text-font-size, calc(20rem / var(--base-font-size, 16))))}}.x7f9d2e .a9b3c7--size-large{font-size:var(--text-font-size, calc(22rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.333333);margin-bottom:0.5em;padding-top:1.083333em}@media (min-width: 380px){.x7f9d2e .a9b3c7--size-large{font-size:calc(1 * var(--text-font-size, calc(22rem / var(--base-font-size, 16) + 2 * (100vw - 380px) / 820)))}}@media (min-width: 1200px){.x7f9d2e .a9b3c7--size-large{font-size:calc(1 * var(--text-font-size, calc(24rem / var(--base-font-size, 16))))}}.x7f9d2e .a9b3c7--size-x-large{font-size:var(--text-font-size, calc(26rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.137931);margin-bottom:0.413793em;padding-top:1.103448em}@media (min-width: 380px){.x7f9d2e .a9b3c7--size-x-large{font-size:calc(1 * var(--text-font-size, calc(26rem / var(--base-font-size, 16) + 3 * (100vw - 380px) / 820)))}}@media (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-large{font-size:calc(1 * var(--text-font-size, calc(29rem / var(--base-font-size, 16))))}}@media screen and (min-width: 0){.x7f9d2e .a9b3c7--size-xx-small\\@small{font-size:var(--text-font-size, calc(12rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.25);margin-bottom:0.333333em;padding-top:0.666667em}}@media screen and (min-width: 0) and (min-width: 380px){.x7f9d2e .a9b3c7--size-xx-small\\@small{font-size:calc(1 * var(--text-font-size, calc(12rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 0) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-xx-small\\@small{font-size:calc(1 * var(--text-font-size, calc(12rem / var(--base-font-size, 16))))}}@media screen and (min-width: 0){.x7f9d2e .a9b3c7--size-x-small\\@small{font-size:var(--text-font-size, calc(14rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.357143);margin-bottom:0.428571em;padding-top:0.714286em}}@media screen and (min-width: 0) and (min-width: 380px){.x7f9d2e .a9b3c7--size-x-small\\@small{font-size:calc(1 * var(--text-font-size, calc(14rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 0) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-small\\@small{font-size:calc(1 * var(--text-font-size, calc(14rem / var(--base-font-size, 16))))}}@media screen and (min-width: 0){.x7f9d2e .a9b3c7--size-small\\@small{font-size:var(--text-font-size, calc(17rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.411765);margin-bottom:0.470588em;padding-top:0.705882em}}@media screen and (min-width: 0) and (min-width: 380px){.x7f9d2e .a9b3c7--size-small\\@small{font-size:calc(1 * var(--text-font-size, calc(17rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 0) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-small\\@small{font-size:calc(1 * var(--text-font-size, calc(17rem / var(--base-font-size, 16))))}}@media screen and (min-width: 0){.x7f9d2e .a9b3c7--size-medium\\@small{font-size:var(--text-font-size, calc(18rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.5);margin-bottom:0.4em;padding-top:0.6em}}@media screen and (min-width: 0) and (min-width: 380px){.x7f9d2e .a9b3c7--size-medium\\@small{font-size:calc(1 * var(--text-font-size, calc(18rem / var(--base-font-size, 16) + 2 * (100vw - 380px) / 820)))}}@media screen and (min-width: 0) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-medium\\@small{font-size:calc(1 * var(--text-font-size, calc(20rem / var(--base-font-size, 16))))}}@media screen and (min-width: 0){.x7f9d2e .a9b3c7--size-large\\@small{font-size:var(--text-font-size, calc(22rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.333333);margin-bottom:0.5em;padding-top:1.083333em}}@media screen and (min-width: 0) and (min-width: 380px){.x7f9d2e .a9b3c7--size-large\\@small{font-size:calc(1 * var(--text-font-size, calc(22rem / var(--base-font-size, 16) + 2 * (100vw - 380px) / 820)))}}@media screen and (min-width: 0) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-large\\@small{font-size:calc(1 * var(--text-font-size, calc(24rem / var(--base-font-size, 16))))}}@media screen and (min-width: 0){.x7f9d2e .a9b3c7--size-x-large\\@small{font-size:var(--text-font-size, calc(26rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.137931);margin-bottom:0.413793em;padding-top:1.103448em}}@media screen and (min-width: 0) and (min-width: 380px){.x7f9d2e .a9b3c7--size-x-large\\@small{font-size:calc(1 * var(--text-font-size, calc(26rem / var(--base-font-size, 16) + 3 * (100vw - 380px) / 820)))}}@media screen and (min-width: 0) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-large\\@small{font-size:calc(1 * var(--text-font-size, calc(29rem / var(--base-font-size, 16))))}}@media screen and (min-width: 650px){.x7f9d2e .a9b3c7--size-xx-small\\@medium{font-size:var(--text-font-size, calc(12rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.25);margin-bottom:0.333333em;padding-top:0.666667em}}@media screen and (min-width: 650px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-xx-small\\@medium{font-size:calc(1 * var(--text-font-size, calc(12rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 650px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-xx-small\\@medium{font-size:calc(1 * var(--text-font-size, calc(12rem / var(--base-font-size, 16))))}}@media screen and (min-width: 650px){.x7f9d2e .a9b3c7--size-x-small\\@medium{font-size:var(--text-font-size, calc(14rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.357143);margin-bottom:0.428571em;padding-top:0.714286em}}@media screen and (min-width: 650px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-x-small\\@medium{font-size:calc(1 * var(--text-font-size, calc(14rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 650px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-small\\@medium{font-size:calc(1 * var(--text-font-size, calc(14rem / var(--base-font-size, 16))))}}@media screen and (min-width: 650px){.x7f9d2e .a9b3c7--size-small\\@medium{font-size:var(--text-font-size, calc(17rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.411765);margin-bottom:0.470588em;padding-top:0.705882em}}@media screen and (min-width: 650px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-small\\@medium{font-size:calc(1 * var(--text-font-size, calc(17rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 650px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-small\\@medium{font-size:calc(1 * var(--text-font-size, calc(17rem / var(--base-font-size, 16))))}}@media screen and (min-width: 650px){.x7f9d2e .a9b3c7--size-medium\\@medium{font-size:var(--text-font-size, calc(18rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.5);margin-bottom:0.4em;padding-top:0.6em}}@media screen and (min-width: 650px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-medium\\@medium{font-size:calc(1 * var(--text-font-size, calc(18rem / var(--base-font-size, 16) + 2 * (100vw - 380px) / 820)))}}@media screen and (min-width: 650px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-medium\\@medium{font-size:calc(1 * var(--text-font-size, calc(20rem / var(--base-font-size, 16))))}}@media screen and (min-width: 650px){.x7f9d2e .a9b3c7--size-large\\@medium{font-size:var(--text-font-size, calc(22rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.333333);margin-bottom:0.5em;padding-top:1.083333em}}@media screen and (min-width: 650px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-large\\@medium{font-size:calc(1 * var(--text-font-size, calc(22rem / var(--base-font-size, 16) + 2 * (100vw - 380px) / 820)))}}@media screen and (min-width: 650px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-large\\@medium{font-size:calc(1 * var(--text-font-size, calc(24rem / var(--base-font-size, 16))))}}@media screen and (min-width: 650px){.x7f9d2e .a9b3c7--size-x-large\\@medium{font-size:var(--text-font-size, calc(26rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.137931);margin-bottom:0.413793em;padding-top:1.103448em}}@media screen and (min-width: 650px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-x-large\\@medium{font-size:calc(1 * var(--text-font-size, calc(26rem / var(--base-font-size, 16) + 3 * (100vw - 380px) / 820)))}}@media screen and (min-width: 650px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-large\\@medium{font-size:calc(1 * var(--text-font-size, calc(29rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1000px){.x7f9d2e .a9b3c7--size-xx-small\\@large{font-size:var(--text-font-size, calc(12rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.25);margin-bottom:0.333333em;padding-top:0.666667em}}@media screen and (min-width: 1000px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-xx-small\\@large{font-size:calc(1 * var(--text-font-size, calc(12rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1000px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-xx-small\\@large{font-size:calc(1 * var(--text-font-size, calc(12rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1000px){.x7f9d2e .a9b3c7--size-x-small\\@large{font-size:var(--text-font-size, calc(14rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.357143);margin-bottom:0.428571em;padding-top:0.714286em}}@media screen and (min-width: 1000px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-x-small\\@large{font-size:calc(1 * var(--text-font-size, calc(14rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1000px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-small\\@large{font-size:calc(1 * var(--text-font-size, calc(14rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1000px){.x7f9d2e .a9b3c7--size-small\\@large{font-size:var(--text-font-size, calc(17rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.411765);margin-bottom:0.470588em;padding-top:0.705882em}}@media screen and (min-width: 1000px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-small\\@large{font-size:calc(1 * var(--text-font-size, calc(17rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1000px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-small\\@large{font-size:calc(1 * var(--text-font-size, calc(17rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1000px){.x7f9d2e .a9b3c7--size-medium\\@large{font-size:var(--text-font-size, calc(18rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.5);margin-bottom:0.4em;padding-top:0.6em}}@media screen and (min-width: 1000px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-medium\\@large{font-size:calc(1 * var(--text-font-size, calc(18rem / var(--base-font-size, 16) + 2 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1000px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-medium\\@large{font-size:calc(1 * var(--text-font-size, calc(20rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1000px){.x7f9d2e .a9b3c7--size-large\\@large{font-size:var(--text-font-size, calc(22rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.333333);margin-bottom:0.5em;padding-top:1.083333em}}@media screen and (min-width: 1000px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-large\\@large{font-size:calc(1 * var(--text-font-size, calc(22rem / var(--base-font-size, 16) + 2 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1000px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-large\\@large{font-size:calc(1 * var(--text-font-size, calc(24rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1000px){.x7f9d2e .a9b3c7--size-x-large\\@large{font-size:var(--text-font-size, calc(26rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.137931);margin-bottom:0.413793em;padding-top:1.103448em}}@media screen and (min-width: 1000px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-x-large\\@large{font-size:calc(1 * var(--text-font-size, calc(26rem / var(--base-font-size, 16) + 3 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1000px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-large\\@large{font-size:calc(1 * var(--text-font-size, calc(29rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1200px){.x7f9d2e .a9b3c7--size-xx-small\\@x-large{font-size:var(--text-font-size, calc(12rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.25);margin-bottom:0.333333em;padding-top:0.666667em}}@media screen and (min-width: 1200px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-xx-small\\@x-large{font-size:calc(1 * var(--text-font-size, calc(12rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1200px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-xx-small\\@x-large{font-size:calc(1 * var(--text-font-size, calc(12rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-small\\@x-large{font-size:var(--text-font-size, calc(14rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.357143);margin-bottom:0.428571em;padding-top:0.714286em}}@media screen and (min-width: 1200px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-x-small\\@x-large{font-size:calc(1 * var(--text-font-size, calc(14rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1200px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-small\\@x-large{font-size:calc(1 * var(--text-font-size, calc(14rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1200px){.x7f9d2e .a9b3c7--size-small\\@x-large{font-size:var(--text-font-size, calc(17rem / var(--base-font-size, 16)));line-height:var --text-line-height, 1.411765;margin-bottom:0.470588em;padding-top:0.705882em}}@media screen and (min-width: 1200px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-small\\@x-large{font-size:calc(1 * var(--text-font-size, calc(17rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1200px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-small\\@x-large{font-size:calc(1 * var(--text-font-size, calc(17rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1200px){.x7f9d2e .a9b3c7--size-medium\\@x-large{font-size:var(--text-font-size, calc(18rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.5);margin-bottom:0.4em;padding-top:0.6em}}@media screen and (min-width: 1200px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-medium\\@x-large{font-size:calc(1 * var(--text-font-size, calc(18rem / var(--base-font-size, 16) + 2 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1200px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-medium\\@x-large{font-size:calc(1 * var(--text-font-size, calc(20rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1200px){.x7f9d2e .a9b3c7--size-large\\@x-large{font-size:var(--text-font-size, calc(22rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.333333);margin-bottom:0.5em;padding-top:1.083333em}}@media screen and (min-width: 1200px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-large\\@x-large{font-size:calc(1 * var(--text-font-size, calc(22rem / var(--base-font-size, 16) + 2 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1200px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-large\\@x-large{font-size:calc(1 * var(--text-font-size, calc(24rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-large\\@x-large{font-size:var(--text-font-size, calc(26rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.137931);margin-bottom:0.413793em;padding-top:1.103448em}}@media screen and (min-width: 1200px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-x-large\\@x-large{font-size:calc(1 * var(--text-font-size, calc(26rem / var(--base-font-size, 16) + 3 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1200px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-large\\@x-large{font-size:calc(1 * var(--text-font-size, calc(29rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1350px){.x7f9d2e .a9b3c7--size-xx-small\\@xx-large{font-size:var(--text-font-size, calc(12rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.25);margin-bottom:0.333333em;padding-top:0.666667em}}@media screen and (min-width: 1350px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-xx-small\\@xx-large{font-size:calc(1 * var(--text-font-size, calc(12rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1350px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-xx-small\\@xx-large{font-size:calc(1 * var(--text-font-size, calc(12rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1350px){.x7f9d2e .a9b3c7--size-x-small\\@xx-large{font-size:var(--text-font-size, calc(14rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.357143);margin-bottom:0.428571em;padding-top:0.714286em}}@media screen and (min-width: 1350px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-x-small\\@xx-large{font-size:calc(1 * var(--text-font-size, calc(14rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1350px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-small\\@xx-large{font-size:calc(1 * var(--text-font-size, calc(14rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1350px){.x7f9d2e .a9b3c7--size-small\\@xx-large{font-size:var(--text-font-size, calc(17rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.411765);margin-bottom:0.470588em;padding-top:0.705882em}}@media screen and (min-width: 1350px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-small\\@xx-large{font-size:calc(1 * var(--text-font-size, calc(17rem / var(--base-font-size, 16) + 0 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1350px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-small\\@xx-large{font-size:calc(1 * var(--text-font-size, calc(17rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1350px){.x7f9d2e .a9b3c7--size-medium\\@xx-large{font-size:var(--text-font-size, calc(18rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.5);margin-bottom:0.4em;padding-top:0.6em}}@media screen and (min-width: 1350px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-medium\\@xx-large{font-size:calc(1 * var(--text-font-size, calc(18rem / var(--base-font-size, 16) + 2 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1350px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-medium\\@xx-large{font-size:calc(1 * var(--text-font-size, calc(20rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1350px){.x7f9d2e .a9b3c7--size-large\\@xx-large{font-size:var(--text-font-size, calc(22rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.333333);margin-bottom:0.5em;padding-top:1.083333em}}@media screen and (min-width: 1350px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-large\\@xx-large{font-size:calc(1 * var(--text-font-size, calc(22rem / var(--base-font-size, 16) + 2 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1350px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-large\\@xx-large{font-size:calc(1 * var(--text-font-size, calc(24rem / var(--base-font-size, 16))))}}@media screen and (min-width: 1350px){.x7f9d2e .a9b3c7--size-x-large\\@xx-large{font-size:var(--text-font-size, calc(26rem / var(--base-font-size, 16)));line-height:var(--text-line-height, 1.137931);margin-bottom:0.413793em;padding-top:1.103448em}}@media screen and (min-width: 1350px) and (min-width: 380px){.x7f9d2e .a9b3c7--size-x-large\\@xx-large{font-size:calc(1 * var(--text-font-size, calc(26rem / var(--base-font-size, 16) + 3 * (100vw - 380px) / 820)))}}@media screen and (min-width: 1350px) and (min-width: 1200px){.x7f9d2e .a9b3c7--size-x-large\\@xx-large{font-size:calc(1 * var(--text-font-size, calc(29rem / var(--base-font-size, 16))))}}.x7f9d2e .a9b3c7--spacing-none{margin-bottom:0;padding-top:0}.x7f9d2e .a9b3c7--spacing-long-form-bottom{padding-top:0}.x7f9d2e .a9b3c7--spacing-long-form-top{margin-bottom:0}.x7f9d2e .h2j5k8{font-variation-settings:"opsz" 12, "wght" 500;font-weight:var(--text-font-weight, 500)}.x7f9d2e .m4n7p2{font-variation-settings:"opsz" 12, "wght" 700;font-weight:var(--text-font-weight, 700)}.x7f9d2e .q8r5t3.w6x9y4{color:var(--text-color, #FFFFFF)}.x7f9d2e .u1v4w7{color:var(--text-color, rgba(0, 15, 30, 0.6))}.x7f9d2e .u1v4w7.w6x9y4{color:var(--text-color, rgba(255, 255, 255, 0.6))}';
+
+describe('scopeCSS', function () {
   function s(cssText: string, scopeId: string, commentOriginalSelector = false) {
     const shim = scopeCss(cssText, scopeId, commentOriginalSelector);
 
@@ -105,6 +108,12 @@ describe('ShadowCss', function () {
     expect(s(css, 'a')).toEqual(css);
   });
 
+  it('should perform relative fast', () => {
+    const now = Date.now();
+    scopeCss(exampleComponentCss, 'a', true);
+    expect(Date.now() - now).toBeLessThan(200);
+  });
+
   it('should handle complicated selectors', () => {
     expect(s('one::before {}', 'a')).toEqual('one.a::before {}');
     expect(s('one two {}', 'a')).toEqual('one.a two.a {}');