Restricting Unsupported CSS on Smart TV Devices with TypeScript

As part of our Smart TV development, we constantly face the reality of the non-standard browser environment. The platforms we work with often come with a custom browser build, which means that we sometimes have access to additional platform-specific APIs, but also lack support for some of the latest standards available in mainstream browsers.

This means we need to be mindful in our development process to avoid using unsupported functionality.

The fastest development cycle is done in the browser
We periodically test on devices

We strive to have solutions that catch errors as soon as possible, ideally during the development cycle while writing code, before we test on the device.

Let’s take an example, Tizen 5.0 (2019) doesn’t support the Flexbox Gap property.

Error Reporting For Unsupported CSS ‘gap’ Property With Type Script Integration In IDE, Build System And CI

We Are Already Using

pnpm
TypeScript
React

We decided to patch out the gap property from the React TypeScript types. This means that if it’s in use, it will:

Be highlighted as unsupported in our IDEs
Throw a warning in the local development build
Throw a CI error if submitted in a pull request

The Implementation We Chose

Edit and remove the unsupported gap property from the type system by editing the csstype library and removing the declaration for the gap property.
Instead of forking the library, which would require maintaining a separate version of both react and csstype, we opted to use the pnpm patch tool.
With pnpm patch, we have a [email protected] file included in the project. This file contains changes that are automatically applied by pnpm after the packages are installed.
Our patch file is simple. It just removes the gap property and marks it as unsupported:

diff --git a/index.d.ts b/index.d.ts
+   /*
+   * @deprecated This style prop is unsupported on Tizen 5.0 (2019)
+   */
-  gap?: Property.Gap<TLength> | undefined;
+  gap?: never;