Restricting Unsupported CSS on Smart TV Devices with TypeScript

Navigating Smart TV’s unique browser environments poses challenges with non-standard builds and varying support. Discover how we address unsupported CSS properties like the ‘gap’ in Tizen 5.0 through TypeScript.

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 csstype@3.1.1.patch 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;