feature(core): transform is expanded to 3 different vendor prefixes

[ling1726]

When using the css transform property, Griffel will expand this to include vendor prefixing for:

• webkit
• moz
• ms (i.e 11 I guess?)

This results in a style rule that will have 4 times its length (including the actual transform) and negatively impacts bundlesize

[ling1726]

With the current browser compatibility, is it necessary to expand vendor prefixes in this case?

[layershifter]

We need to do more that translate in this direction. For context, thysultan/stylis#283

What should be done?

• Review the list of polifilled properties (https://github.com/thysultan/stylis/blob/master/test/Prefixer.js)
• Check what should be prefixed according to https://github.com/microsoft/fluentui/blob/master/rfcs/shared/build-system/06-browser-support-for-v9.md
• Drop prefixer plugin/replace prefixer with a custom one
• (optionally) investigate how we can add stylis plugins in runtime/build time

[layershifter]

Our base browser support matrix matches that the matrix in Fluent UI v9, https://react.fluentui.dev/?path=/docs/concepts-developer-browser-support-matrix--page

---

The list of polifilled scenarios and what can be removed:

• 🟢 can be removed
• 🟡 can be removed
• 🔴 prefixing should stay

Scenario	State	Comment	Source
display: flex, display: inline-flex, flex: *	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/flex
flex-grow: *	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
flex-shrink: *	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
flex-basis: *	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
align-self: *	🟢	All prefixed scenarios are supported	https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
align-content: *	🟢	All prefixed scenarios are supported	https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
align-items: *	🟢	All prefixed scenarios are supported	https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
justify-content: *	🟢	All prefixed scenarios are supported	https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
justify-items: *	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
order	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/order
flex-direction: *	🟢	...	https://caniuse.com/?search=flex-direction
transform: *	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/transform
cursor: grab	🟢	...	https://caniuse.com/?search=cursor%3A%20grab
cursor: image-set()	🔴	Needs to be prefixed	https://caniuse.com/?search=image-set
backface-visibility: *	🔴	Needs to be prefixed due Safari	https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility
transition: *	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/transition
writing-mode: *	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
columns*: *	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/columns
text-size-adjust: *	🟢	Support is limited, prefixing is not needed	https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
text-decoration: *	🟢	Shorthand is not supported in Safari, but prefixer does not do expansion	https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
mask:*	🔴	Prefixing is needed	https://caniuse.com/?search=mask
filter:*	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/filter
position: sticky	🟢	...	https://caniuse.com/?search=position%3A%20sticky
color-adjust: *	🟡	Propery is "print-color-adjust", can be removed	https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust
box-decoration-break:*	🔴	Should be prefixed	https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
clip-path:*	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
height:fill-available	🟡	Deprecated, can be removed	https://caniuse.com/?search=fill-available
width:fit-content	🟢	...	https://caniuse.com/?search=width%3Afit-content
width:min-block-size	🟢	..	https://caniuse.com/?search=min-block-size
width:stretch	🔴	...	https://caniuse.com/?search=width%3Astretch
max-height:fit-content	🟢	...	https://caniuse.com/?search=max-height
background:image-set	🔴	Prefixing required for Chrome	https://caniuse.com/?search=background%3Aimage-set
background-clip:text	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
margin-inline	🔴	Should be polifilled	https://caniuse.com/?search=margin-inline
user-select: *	🔴	Should be polifilled because of Safari	https://caniuse.com/?search=user-select
appearance:*	🔴	Should be poliffiled	https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
animation*	🟢	...	https://developer.mozilla.org/en-US/docs/Web/CSS/animation
display: grid, display: inline-grid, grid*	🟢	...	https://caniuse.com/?search=display%3Agrid
scroll-snap-type	🟢	All browsers in matrix support it	https://caniuse.com/?search=scroll-snap-type
scroll-margin	🟢	Safari 14.1 has support for these properties	https://caniuse.com/?search=scroll-margin-top
tab-size	🔴	Required, native support in Firefox landed in 91	https://caniuse.com/?search=tab-size

---

I don't see in tests of Stylis, but there is also prefixing for @keyframes, it should be also dropped.

[ling1726]

• inline-grid https://caniuse.com/?search=inline-grid
• justify-self https://caniuse.com/?search=justify-self