microsoft / microsoft/fluentui
[Bug]: Remove whitespace from component templates / ESM dist component templates contain whitespace
@chrisdholt is already working on this.
Since Jun 3, 2026.
- Dominant language
- TypeScript
- Stars
- 20.3k
- Forks
- 2.9k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 46
Description
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.4
Current 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
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.