Take advantage of CSS Typed OM for performance and bundle size gains

[DaniGuardiola]

What problem does this address?

In Gutenberg, there are multiple instances of third-party CSS parsing and manipulation tools being included in the user bundle:

• gradient-parser: packages/components/src/custom-gradient-picker/serializer.ts
• postcss and some plugins: packages/block-editor/src/utils/transform-styles/index.js

The examples above add up to 31.4 kB gzipped (see bundlejs.com) in the bundle, plus these libraries are orders of magnitude slower than native browser APIs.

Additionally, there might be custom logic to manipulate CSS, like the one being proposed here as part of #63915

What is your proposed solution?

While pairing with @mirka on reviewing her PR (#63915), we thought about the CSS Typed OM API which is described in MDN like this:

"The CSS Typed Object Model API simplifies CSS property manipulation by exposing CSS values as typed JavaScript objects rather than strings."

The instances mentioned above could be refactored to use the CSS Typed OM API so that we can shave off a significant amount of third-party code from the bundle and get significant performance gains.

While there's no Firefox support yet (it's a work in progress), there's a relatively small (3.22 kB gzipped) polyfill that could be removed later on.

[mirka]

I was looking into the css-typed-om polyfill, and unfortunately it states that it's a work in progress, not to be used in production. There's no movement on it since six years ago so we can assume it is dead, but based on the feature implementation status analysis of a developer that forked it, CSSStyleValue.parse() (which will be crucial to our needs) is at "bare minimum functionality". Even for relatively narrow-scope applications, we'd have to put in the rigorous testing effort ourselves to ensure that it supports what we need.

I wonder if it would be better to wait until it ships in Firefox 🙁