microsoft / microsoft/fluentui
[Bug]: ESM templates contain whitespace not present in minified build
@radium-v is already working on this.
Since Jun 10, 2026.
- Dominant language
- TypeScript
- Stars
- 20.3k
- Forks
- 2.9k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 46
Description
Related Issue
Follow-up to #36282 — splitting into focused issues for clearer tracking.
Component
All components using HTML templates (Label, Listbox, TextInput observed)
Package version
3.0.0-rc.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
ESM templates ship with literal newlines and indentation for readability. When consumers use CSS white-space values other than normal on parent elements, these text nodes become visible and break rendering.
The minified build strips this whitespace, but ESM does not — creating inconsistent behavior between builds.
Note: It is not clear which components are afflicted with this problem, or if it is something beyond line breaks in the template whitespace.
Current workaround
Consumers can strip whitespace via rollup template sanitization, but this:
- Bakes
@fluentui/web-componentsinto consumer bundles - Increases bundle size
- Requires every consuming team to implement the same fix
Proposed Solutions
:hostreset forwhite-space— Addwhite-space: normalto:hostin component stylesheets- Wrapper root element with
white-spacereset — Wrap template content in an element withwhite-space: normal - Eliminate whitespace from templates — Ship single-line templates in ESM (requires per-template care since some whitespace may be structural)
Expected Behavior
ESM and minified builds should behave identically regarding whitespace handling.
Reproduction
https://stackblitz.com/edit/vitejs-vite-vcgc2r59?file=src%2Fmain.js
Steps to reproduce
- Open the StackBlitz reproduction
- Observe whitespace artifacts in components when parent has non-normal
white-spaceCSS
Are you reporting an Accessibility issue?
None
Suggested severity
Normal
Products/sites affected
No response
Are you willing to submit a PR to fix?
yes
Validations
- Check that there is not 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.