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.

import {style, getStyles} from "typestyle";

import * as React from "react";

const className = style({

  color: 'red',

  fontSize: '30px'

});

const App = () =>

    <div className={className}>

      Hello World!

    </div>;

import * as ReactDOMServer from 'react-dom/server';

const html = ReactDOMServer.renderToStaticMarkup(<App />);

const css = getStyles();

const renderPage = ({html, css}) => `

  <html>

    <header>

        <style>${css}</style>

    </header>

    <body>

        <div>${html}</div>

    </body>

  </html>

`;

const renderedPage = renderPage({html, css});

import * as fs from 'fs';

fs.writeFileSync(__dirname + '/index.html', renderedPage);

[TypeStyle] Generate static css + html files using TypeStyle的更多相关文章

  1. [TypeStyle] Load raw CSS in TypeStyle

    TypeStyle tries to be an all in one CSS in JS management solution so you can always fall back to raw ...

  2. [TypeStyle] Style CSS pseudo elements with TypeStyle

    Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special ...

  3. GET /static/css/bootstrap.min.css.map HTTP/1.1" 404

    解决办法:删除bootstrap.min.css文件内容最后一行/*…………*/内容即可

  4. Export-XLSX PowerShell generate real Excel XLSX files without Excel and COM

    http://gallery.technet.microsoft.com/scriptcenter/Export-XLSX-PowerShell-f2f0c035

  5. Settings Django Static Files

    静态文件是通过django.contrib.staticfiles来管理的. 配置Django静态文件,Djang官网静态文件配置介绍.简言之,通过以下三个步骤来配置和加载静态文件: 设置静态文件别名 ...

  6. Django 静态文件配置(static files)

    Django version: 1.9 Python versrion: 3.5.2 这几天Django配置静态文件(本例是要加载index.css), 总是不对,最后终于试对了,这里记录下,方便以后 ...

  7. 【CSS】CSS3从入门到深入（复习查漏向

    CSS3从入门到深入(复习查漏向 pre_section CSS:层叠样式表,决定网页表现 网页为多层结构,CSS为每一层设置样式,最后显示最上一层 CSS语句 = 选择器 + 声明块 形式 内联样式 ...

  8. Express细节探究(1)——app.use(express.static)

    express相信是很多人用nodejs搭建服务器的首选框架,相关教程有很多,也教会了大家来如何使用.如果你想更深的了解他的细节,不妨和我一起来研究一下. 先来看一个每个人都用到的方法app.use( ...

  9. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

随机推荐

  1. inode与ln命令

    inode可以看: http://www.cnblogs.com/itech/archive/2012/05/15/2502284.html 每个inode节点的大小,一般是128字节或256字节.i ...

  2. lighttpd启动不了，libssl.so.4&amp;libcrypto.so.4 缺失

    lighttd的出错日志在 log/out_lighttpd 里,当lighttd启动不了时候,这里文件中会说明原因. 今天的报错是 error while loading shared librar ...

  3. opera mini 改服

    opera mini 改服 下载 opera 和 opera mini ftp://ftp.opera.com/pub/opera/android/mini/ ftp://ftp.opera.com/ ...

  4. R语言-上海二手房数据分析

    案例:通过分析上海的二手房的数据,分析出性价比(地段,价格,未来的升值空间)来判断哪个区位的二手房性价比最高 1.载入包 library(ggplot2) library(Hmisc) library ...

  5. java 位操作 bitwise(按位) operation bit

    java 位操作 bitwise(按位) operation bit //一篇对于 原码 反码 补码 的介绍 http://www.cnblogs.com/zhangziqiu/archive/201 ...

  6. go-web编程之处理xml

    摘抄自astaxie的开源书籍 build-web-application-with-golang 接下来的例子以下面XML描述的信息进行操作. <?xml version="1.0& ...

  7. javascript 幻灯片代码(含自动播放)

    HTML <div class="slideshow-container"> <div class="mySlides fade"> & ...

  8. Solr的关键特性

    1.基于标准的开放接口:Solr搜索服务器支持通过XML.JSON和HTTP查询和获取结果. 2.易管理:Solr可以通过HTML页面管理,Solr配置通过XML完成. 3.可伸缩性:能够有效地复制到 ...

  9. SD卡与tf卡引脚转换

    https://www.cnblogs.com/shangdawei/p/3255414.html

  10. Makefile的问题

    注意包含路径的变量,可能会带有空格而使得运行失败 直接定义:DEBUG  = false后面引用需要使用 $(DEBUG) 或者set  DEBUG  $(DEBUG)之后就可以直接引用了