Component
Label
Package version
3.0.0-r.c.15
@microsoft/fast-element version
2.10.4
Environment
System:
OS: macOS 15.7.7
CPU: (8) x64 Apple M2
Memory: 20.61 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Chrome: 149.0.7827.53
Edge: 148.0.3967.96
Safari: 26.0.1
npmPackages:
@fluentui/react-components: 9.73.8 => 9.73.8
@fluentui/web-components: 3.0.0-rc.15 => 3.0.0-rc.15
@microsoft/fast-element: ^2.10.4 => 2.10.4Current Behavior
Fluent web components ships the ESM templates with white space (line breaks, ect) in the html template. White space makes the templates human readable and easier to debug. Esm is great for tree shake-ability.
In environments where css white-space property is set to anything other than normal the template white space makes some components appear unpredictable, broken or brittle (we've seen it with 'label', 'listbox', and 'text-input').
White space can be stripped out on the consumer side using rollup and some template sanitization expressions. Downside with this is it bakes @fluentui/web-components into our own library that we ship (@fabric-msft/fabric-web) increasing the bundle size and couples all the fluent web-component code into our dist. We can go further down the line and bake the sanitization expressions into the webpack of the consuming application, but this is also not ideal because the sanitization needs to occur for every team that has a webpack build.
Expected Behavior
Fluent should ship with white space free single lined html templates.
Reproduction
https://stackblitz.com/edit/vitejs-vite-vcgc2r59?file=src%2Fmain.js
Steps to reproduce
open stackblitz, the issue is clearly labelled. see main js for html
Are you reporting an Accessibility issue?
None
Suggested severity
Urgent - No workaround and Products/sites are affected
Products/sites affected
No response
Are you willing to submit a PR to fix?
yes
Validations
Component
Label
Package version
3.0.0-r.c.15
@microsoft/fast-element version
2.10.4
Environment
System: OS: macOS 15.7.7 CPU: (8) x64 Apple M2 Memory: 20.61 MB / 16.00 GB Shell: 5.9 - /bin/zsh Browsers: Chrome: 149.0.7827.53 Edge: 148.0.3967.96 Safari: 26.0.1 npmPackages: @fluentui/react-components: 9.73.8 => 9.73.8 @fluentui/web-components: 3.0.0-rc.15 => 3.0.0-rc.15 @microsoft/fast-element: ^2.10.4 => 2.10.4Current Behavior
Fluent web components ships the ESM templates with white space (line breaks, ect) in the html template. White space makes the templates human readable and easier to debug. Esm is great for tree shake-ability.
In environments where css
white-spaceproperty is set to anything other thannormalthe template white space makes some components appear unpredictable, broken or brittle (we've seen it with 'label', 'listbox', and 'text-input').White space can be stripped out on the consumer side using rollup and some template sanitization expressions. Downside with this is it bakes @fluentui/web-components into our own library that we ship (@fabric-msft/fabric-web) increasing the bundle size and couples all the fluent web-component code into our dist. We can go further down the line and bake the sanitization expressions into the webpack of the consuming application, but this is also not ideal because the sanitization needs to occur for every team that has a webpack build.
Expected Behavior
Fluent should ship with white space free single lined html templates.
Reproduction
https://stackblitz.com/edit/vitejs-vite-vcgc2r59?file=src%2Fmain.js
Steps to reproduce
open stackblitz, the issue is clearly labelled. see main js for html
Are you reporting an Accessibility issue?
None
Suggested severity
Urgent - No workaround and Products/sites are affected
Products/sites affected
No response
Are you willing to submit a PR to fix?
yes
Validations