Generate static css + html files using TypeStyle
You can easily use TypeStyle to build static html files with encapsulated CSS. You can use this pattern to generate email and pdf template files. Since TypeStyle supports cssRaw all your css can be easily inlined into a single file making it easy to work with template rendering engines.
[00:00] Let's go ahead and create a CSS class name using TypeStyle's style function. We will go ahead and set up a color and a font size. Next, we're going to create a React app component that uses the CSS class name to style the div, and we put in some demo text, like, "Hello, World" into the div.
[00:27] We can easily render this app component to an HTML string using ReactDOMServer. We will bring in the ReactDOMServer module. We get the HTML as a string using ReactDOMServer.renderToStatic markup function, passing in the app component. Let's log out this HTML string as a demonstration.
[00:56] Similar to how you can get all the HTML for a React component, you can get all the CSS managed by TypeStyle using the get styles function, which you can bring in from the main TypeStyle module. It simply returns as a string all the CSS that has been managed by TypeStyle at a particular point in time. Let's log out the CSS next to our HTML.
[01:25] Now that you have a pattern for getting all the CSS and HTML for your application, you can use these to create a static HTML file that is fully self-contained quite easily. Let's create a reusable render page function that takes some component HTML and CSS strings, and returns static HTML strings.
[01:48] Our static HTML file will contain a root HTML tag, a head tag containing a style tag, which will contain all our CSS. Now, we can close out our document head. Next, we add a body tag containing a div which will contain all our HTML. Then we close out the root div and the root body tag.
[02:13] Now, with this reusable render page function in place, we can call it with our generated HTML and CSS to get the rendered page as a string. Now, if you want, we can write this rendered page string to a file on disk. For example, an index.html right next to this app.tsx.
[02:39] Now, if you run this application, an index.html file will appear on disk as expected. If we go ahead and open this file in our browser, you can see that we get a properly styled div based on our CSS.
[02:54] If you inspect the source code for this HTML file, you will see that it is fully self-contained in terms of CSS present in the document head, and HTML present in the document body.