Add type safety to CSS using TypeStyle

[00:00] Here we have a [inaudible] super pack application set up for TypeScript. Our entry file is source app DSX. Our output goes to the public as bundle.js. We tell webpack to support to support DS and DSX files, and we will be using DS Loader for these DS and DSX files.

[00:19] In our package.json, we have a script target for start that runs webpack dev server, serving up our public folder. Within our public folder, we have an index.html file. This file contains a simple div with an ID root.Then we load the webpack-generated bundle file.

[00:40] Now, let's jump to our application entry point. Note that right now, this application is completely framework free. Using just plain JavaScript, we can access the root div in our index.html file, and write some HTML to it.

[00:54] For now, we can add a simple div with the content, "Hello world," inside of it. We can run our application using our package.json's NPM start target. Once webpack dev server has started, we can open up localhost:8080 to see the running application.

[01:11] Now, let's add some simple CSS to style this div using TypeStyle. We can install TypeStyle from NPM by simply running npm install typestyle, and we'll save it to our dependencies. Now that TypeStyle is installed, we can bring it in using an ES6 import, and from the TypeStyle module, we'll simply bring in the style function.

[01:31] This function simply takes a style object containing CSS property-value pairs. For example, color is the property, and dark orange is the value. It generates a CSS class based on the style object, and returns the name of the class as a string.

[01:47] Because it is just a simple CSS class, you can apply it to the div quite easily by using the HTML class attribute, and assigning it to the generated CSS class name. You can see that the div is now styled as dark orange.

[02:01] Notice that the style function is completely UI framework agnostic. It is a simple CSS style object to CSS class name transform. If we go ahead and inspect the div in the DOM, it has the generated CSS class name as expected.

[02:16] This class name is derived from the style object, so you don't have to worry about coming up with globally unique names. Each style object with the same properties would get the same class name. Simultaneously, there is a style tag in the document head that is inserted by TypeStyle, and contains the relevant CSS.

[02:34] Because it generates an actual style sheet, this means that it has the full power of CSS at its disposal. Now, if we jump back to the style function, notice that, since TypeStyle is written in TypeScript, you get autocomplete for CSS properties for free, as well as for CSS values when it makes sense.

[02:52] It will also protect against typos in CSS values if the CSS property only accepts a restricted set. TypeStyle will always prevent typos in CSS property names. For example, if you misspell color, TypeScript will complain thanks to TypeStyle's type definitions.

[03:10] To demonstrate TypeStyle's framework agnostic nature, let's integrate TypeStyle into a React application. I'll simply go ahead and install React, React DOM, and its types. Once the installation is complete, we jump back to our application. We import React and React DOM as modules.

[03:31] Now, instead of using pure JS to write to the DOM, we will go ahead and comment it out. Now, we will use React DOM to render to the same root div within our document body. We will render a div same as before, using JSX.

[03:45] Within that div, we will have the content, "Hello world React." We can apply a class to this div using React's className property, and we will simply point to TypeStyle's generated CSS class. You can see that, since it's just CSS classes, it works fine.

[04:02] We can go ahead and change the color to something else to demonstrate that it is actually being used by React. You can use the CSS class with any other framework as well.