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.

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.

Samsung web engine specifications: gap

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

We Are Already Using

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

The Implementation We Chose

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;