[Feature]: Add browser compatibility linter

[spmonahan]

Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

I want a lint rule that enforces Fluent v9's browser support matrix during development and build time.

I'd like something like caniuse.com the eslint plugin. A quick search reveals that such an eslint plugin already exists: eslint-plugin-compat.

Assuming this plugin works well I'd like to see:

1. All issues from this plugin are errors that block building/releasing
2. When an issue is found we do one of the following
   1. Implement a basic polyfill or disable the behavior for unsupported browsers
   2. Find a different solution
   3. Document the feature gap (e.g., for features that fall under "partial support")

A case to consider is if and how this linter should handle transpiled code. For example, when to transpile our code to a specific ES version, do we see any potential for missed compatibility issues?

Additional context

This issue came up recently with Animation.persist(), a feature that falls in our partial browser support matrix. It's non-trivial to polyfill this feature to spec and it cannot be transpiled. Ultimately we landed on a "good enough" polyfill which has addressed the issue for our partner.

Ideally we would have been aware of this issue when creating the feature so we could be proactive about changing or documenting it, rather than reactive and handling a bug fix.

Have you discussed this feature with our team

@Hotell

Validations

• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

Medium