microsoft / microsoft/fluentui

[Bug]: ESM templates contain whitespace not present in minified build

Open
#36,298 0 comments 0 reactions 1 assignee View on GitHub

@radium-v is already working on this.

Since Jun 10, 2026.

Fluent UI WC (v3) Type: Bug :bug: web-components
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-components into consumer bundles
  • Increases bundle size
  • Requires every consuming team to implement the same fix
Proposed Solutions
  1. :host reset for white-space — Add white-space: normal to :host in component stylesheets
  2. Wrapper root element with white-space reset — Wrap template content in an element with white-space: normal
  3. 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
  1. Open the StackBlitz reproduction
  2. Observe whitespace artifacts in components when parent has non-normal white-space CSS
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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.