microsoft / microsoft/fluentui

[Bug]: Remove whitespace from component templates / ESM dist component templates contain whitespace

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

@chrisdholt is already working on this.

Since Jun 3, 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

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

  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.