@fluentui/react-provider 9.22.18 → 9.22.19

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-provider
 
-This log was last generated on Wed, 24 Jun 2026 11:03:42 GMT and should not be manually modified.
+This log was last generated on Tue, 04 Aug 2026 10:09:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.22.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.19)
+
+Tue, 04 Aug 2026 10:09:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.22.18..@fluentui/react-provider_v9.22.19)
+
+### Patches
+
+- fix: escape SSR theme style selectors ([PR #36464](https://github.com/microsoft/fluentui/pull/36464) by paulmardling@microsoft.com)
+
 ## [9.22.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.18)
 
-Wed, 24 Jun 2026 11:03:42 GMT 
+Wed, 24 Jun 2026 11:09:53 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.22.17..@fluentui/react-provider_v9.22.18)
 
 ### Patches

package/lib/components/FluentProvider/createCSSRuleFromTheme.js

@@ -17,11 +17,12 @@ const CSS_ESCAPE_MAP = {
  *
  * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.
  */ export function createCSSRuleFromTheme(selector, theme) {
+    const escapedSelector = escapeForStyleTag(selector);
     if (theme) {
         const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{
             return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;
         }, '');
-        return `${selector} { ${escapeForStyleTag(cssVarsAsString)} }`;
+        return `${escapedSelector} { ${escapeForStyleTag(cssVarsAsString)} }`;
     }
-    return `${selector} {}`;
+    return `${escapedSelector} {}`;
 }

package/lib/components/FluentProvider/createCSSRuleFromTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst CSS_ESCAPE_MAP = {\n  '<': '\\\\3C ',\n  '>': '\\\\3E ',\n};\n/**\n * Escapes characters that could break out of a <style> tag during SSR.\n *\n * IMPORTANT: Do not strip quotes. Theme values legitimately include quoted font families and other CSS.\n * We only need to ensure the generated text cannot terminate the style tag and inject HTML.\n */\nfunction escapeForStyleTag(value: string): string {\n  // Escape as CSS code points so the resulting CSS still represents the same characters.\n  // Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.\n  return value.replace(/[<>]/g, match => CSS_ESCAPE_MAP[match as keyof typeof CSS_ESCAPE_MAP]);\n}\n\n/**\n * Creates a CSS rule from a theme object.\n *\n * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.\n */\nexport function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string {\n  if (theme) {\n    const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n      return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;\n    }, '');\n\n    return `${selector} { ${escapeForStyleTag(cssVarsAsString)} }`;\n  }\n\n  return `${selector} {}`;\n}\n"],"names":["CSS_ESCAPE_MAP","escapeForStyleTag","value","replace","match","createCSSRuleFromTheme","selector","theme","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar"],"mappings":"AAEA,MAAMA,iBAAiB;IACrB,KAAK;IACL,KAAK;AACP;AACA;;;;;CAKC,GACD,SAASC,kBAAkBC,KAAa;IACtC,uFAAuF;IACvF,kGAAkG;IAClG,OAAOA,MAAMC,OAAO,CAAC,SAASC,CAAAA,QAASJ,cAAc,CAACI,MAAqC;AAC7F;AAEA;;;;CAIC,GACD,OAAO,SAASC,uBAAuBC,QAAgB,EAAEC,KAA+B;IACtF,IAAIA,OAAO;QACT,MAAMC,kBAAkB,AAACC,OAAOC,IAAI,CAACH,OAAkCI,MAAM,CAAC,CAACC,YAAYC;YACzF,OAAO,GAAGD,WAAW,EAAE,EAAEC,OAAO,EAAE,EAAEN,KAAK,CAACM,OAAO,CAAC,EAAE,CAAC;QACvD,GAAG;QAEH,OAAO,GAAGP,SAAS,GAAG,EAAEL,kBAAkBO,iBAAiB,EAAE,CAAC;IAChE;IAEA,OAAO,GAAGF,SAAS,GAAG,CAAC;AACzB"}
+{"version":3,"sources":["../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst CSS_ESCAPE_MAP = {\n  '<': '\\\\3C ',\n  '>': '\\\\3E ',\n};\n/**\n * Escapes characters that could break out of a <style> tag during SSR.\n *\n * IMPORTANT: Do not strip quotes. Theme values legitimately include quoted font families and other CSS.\n * We only need to ensure the generated text cannot terminate the style tag and inject HTML.\n */\nfunction escapeForStyleTag(value: string): string {\n  // Escape as CSS code points so the resulting CSS still represents the same characters.\n  // Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.\n  return value.replace(/[<>]/g, match => CSS_ESCAPE_MAP[match as keyof typeof CSS_ESCAPE_MAP]);\n}\n\n/**\n * Creates a CSS rule from a theme object.\n *\n * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.\n */\nexport function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string {\n  const escapedSelector = escapeForStyleTag(selector);\n\n  if (theme) {\n    const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n      return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;\n    }, '');\n\n    return `${escapedSelector} { ${escapeForStyleTag(cssVarsAsString)} }`;\n  }\n\n  return `${escapedSelector} {}`;\n}\n"],"names":["CSS_ESCAPE_MAP","escapeForStyleTag","value","replace","match","createCSSRuleFromTheme","selector","theme","escapedSelector","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar"],"mappings":"AAEA,MAAMA,iBAAiB;IACrB,KAAK;IACL,KAAK;AACP;AACA;;;;;CAKC,GACD,SAASC,kBAAkBC,KAAa;IACtC,uFAAuF;IACvF,kGAAkG;IAClG,OAAOA,MAAMC,OAAO,CAAC,SAASC,CAAAA,QAASJ,cAAc,CAACI,MAAqC;AAC7F;AAEA;;;;CAIC,GACD,OAAO,SAASC,uBAAuBC,QAAgB,EAAEC,KAA+B;IACtF,MAAMC,kBAAkBP,kBAAkBK;IAE1C,IAAIC,OAAO;QACT,MAAME,kBAAkB,AAACC,OAAOC,IAAI,CAACJ,OAAkCK,MAAM,CAAC,CAACC,YAAYC;YACzF,OAAO,GAAGD,WAAW,EAAE,EAAEC,OAAO,EAAE,EAAEP,KAAK,CAACO,OAAO,CAAC,EAAE,CAAC;QACvD,GAAG;QAEH,OAAO,GAAGN,gBAAgB,GAAG,EAAEP,kBAAkBQ,iBAAiB,EAAE,CAAC;IACvE;IAEA,OAAO,GAAGD,gBAAgB,GAAG,CAAC;AAChC"}

package/lib-commonjs/components/FluentProvider/createCSSRuleFromTheme.js

@@ -23,11 +23,12 @@ const CSS_ESCAPE_MAP = {
     return value.replace(/[<>]/g, (match)=>CSS_ESCAPE_MAP[match]);
 }
 function createCSSRuleFromTheme(selector, theme) {
+    const escapedSelector = escapeForStyleTag(selector);
     if (theme) {
         const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{
             return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;
         }, '');
-        return `${selector} { ${escapeForStyleTag(cssVarsAsString)} }`;
+        return `${escapedSelector} { ${escapeForStyleTag(cssVarsAsString)} }`;
     }
-    return `${selector} {}`;
+    return `${escapedSelector} {}`;
 }

package/lib-commonjs/components/FluentProvider/createCSSRuleFromTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst CSS_ESCAPE_MAP = {\n  '<': '\\\\3C ',\n  '>': '\\\\3E ',\n};\n/**\n * Escapes characters that could break out of a <style> tag during SSR.\n *\n * IMPORTANT: Do not strip quotes. Theme values legitimately include quoted font families and other CSS.\n * We only need to ensure the generated text cannot terminate the style tag and inject HTML.\n */\nfunction escapeForStyleTag(value: string): string {\n  // Escape as CSS code points so the resulting CSS still represents the same characters.\n  // Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.\n  return value.replace(/[<>]/g, match => CSS_ESCAPE_MAP[match as keyof typeof CSS_ESCAPE_MAP]);\n}\n\n/**\n * Creates a CSS rule from a theme object.\n *\n * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.\n */\nexport function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string {\n  if (theme) {\n    const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n      return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;\n    }, '');\n\n    return `${selector} { ${escapeForStyleTag(cssVarsAsString)} }`;\n  }\n\n  return `${selector} {}`;\n}\n"],"names":["CSS_ESCAPE_MAP","escapeForStyleTag","value","replace","match","createCSSRuleFromTheme","selector","theme","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar"],"mappings":";;;;+BAuBgBK;;;;;;AArBhB,MAAML,iBAAiB;IACrB,KAAK;IACL,KAAK;AACP;AACA;;;;;CAKC,GACD,SAASC,kBAAkBC,KAAa;IACtC,uFAAuF;IACvF,kGAAkG;IAClG,OAAOA,MAAMC,OAAO,CAAC,SAASC,CAAAA,QAASJ,cAAc,CAACI,MAAqC;AAC7F;AAOO,gCAAgCE,QAAgB,EAAEC,KAA+B;IACtF,IAAIA,OAAO;QACT,MAAMC,kBAAmBC,OAAOC,IAAI,CAACH,OAAkCI,MAAM,CAAC,CAACC,YAAYC;YACzF,OAAO,GAAGD,WAAW,EAAE,EAAEC,OAAO,EAAE,EAAEN,KAAK,CAACM,OAAO,CAAC,EAAE,CAAC;QACvD,GAAG;QAEH,OAAO,GAAGP,SAAS,GAAG,EAAEL,kBAAkBO,iBAAiB,EAAE,CAAC;IAChE;IAEA,OAAO,GAAGF,SAAS,GAAG,CAAC;AACzB"}
+{"version":3,"sources":["../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst CSS_ESCAPE_MAP = {\n  '<': '\\\\3C ',\n  '>': '\\\\3E ',\n};\n/**\n * Escapes characters that could break out of a <style> tag during SSR.\n *\n * IMPORTANT: Do not strip quotes. Theme values legitimately include quoted font families and other CSS.\n * We only need to ensure the generated text cannot terminate the style tag and inject HTML.\n */\nfunction escapeForStyleTag(value: string): string {\n  // Escape as CSS code points so the resulting CSS still represents the same characters.\n  // Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.\n  return value.replace(/[<>]/g, match => CSS_ESCAPE_MAP[match as keyof typeof CSS_ESCAPE_MAP]);\n}\n\n/**\n * Creates a CSS rule from a theme object.\n *\n * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.\n */\nexport function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string {\n  const escapedSelector = escapeForStyleTag(selector);\n\n  if (theme) {\n    const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n      return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;\n    }, '');\n\n    return `${escapedSelector} { ${escapeForStyleTag(cssVarsAsString)} }`;\n  }\n\n  return `${escapedSelector} {}`;\n}\n"],"names":["CSS_ESCAPE_MAP","escapeForStyleTag","value","replace","match","createCSSRuleFromTheme","selector","theme","escapedSelector","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar"],"mappings":";;;;+BAuBgBK;;;;;;AArBhB,MAAML,iBAAiB;IACrB,KAAK;IACL,KAAK;AACP;AACA;;;;;CAKC,GACD,SAASC,kBAAkBC,KAAa;IACtC,uFAAuF;IACvF,kGAAkG;IAClG,OAAOA,MAAMC,OAAO,CAAC,SAASC,CAAAA,QAASJ,cAAc,CAACI,MAAqC;AAC7F;AAOO,gCAAgCE,QAAgB,EAAEC,KAA+B;IACtF,MAAMC,kBAAkBP,kBAAkBK;IAE1C,IAAIC,OAAO;QACT,MAAME,kBAAmBC,OAAOC,IAAI,CAACJ,OAAkCK,MAAM,CAAC,CAACC,YAAYC;YACzF,OAAO,GAAGD,WAAW,EAAE,EAAEC,OAAO,EAAE,EAAEP,KAAK,CAACO,OAAO,CAAC,EAAE,CAAC;QACvD,GAAG;QAEH,OAAO,GAAGN,gBAAgB,GAAG,EAAEP,kBAAkBQ,iBAAiB,EAAE,CAAC;IACvE;IAEA,OAAO,GAAGD,gBAAgB,GAAG,CAAC;AAChC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-provider",
-  "version": "9.22.18",
+  "version": "9.22.19",
   "description": "Fluent UI React provider component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,11 +13,11 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-jsx-runtime": "^9.4.4",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-tabster": "^9.26.16",
     "@fluentui/react-theme": "^9.2.1",
     "@fluentui/react-utilities": "^9.26.5",
-    "@fluentui/react-jsx-runtime": "^9.4.4",
     "@griffel/core": "^1.16.0",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"