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. ORA-01653 无法在表空间扩展的解决办法 -- 增加表空间大小或给表空间增加数据文件

    转自原文 ORA-01653 无法在表空间扩展的解决办法 -- 增加表空间大小或给表空间增加数据文件 当前系统的数据量越来越大的,昨天还运行正常的数据库,突然无法使用了.经过定位发现是"OR ...

  2. 【原创】k8s源代码分析-----EndpointController

    转自本人空间 http://user.qzone.qq.com/29185807/blog/1459325937 一.controller manager创建endpointController 代码 ...

  3. 小白学开发（iOS）OC_ block数据类型（2015-08-08）

    // //  main.m //  block数据类型 // //  Created by admin on 15/8/12. //  Copyright (c) 2015年 admin. All r ...

  4. Android开发经验之在图片上随意点击移动文字

    只要在图片范围之内,文字可随意点击移动. package xiaosi.GetTextImage; import android.content.Context; import android.con ...

  5. 单位阶跃函数（Heaviside/unit step function）—— 化简分段函数

    注意,单位阶跃函数一种不连续函数. 1. 常见定义 最经典的定义来自于 Ramp function(斜坡函数,max{x,0})的微分形式: H(x)=ddxmax{x,0} 2. 化简分段函数 如对 ...

  6. 在Fedora 14 alpha 下测试Kvm情况(视频)

    今天刚忙完,便抽空做了fc14下的虚拟机的测试,总体感觉在2.6.35的kernel下启动和配置虚拟机的速度比原来要快乐许多,下面就带着各位体验一下吧.(硬件测试环境:IBM R52,2g内存,物理机 ...

  7. x64系统下，InpOutx64有数字签名而WinIO3.0无数字签名

    参考文档 http://www.highrez.co.uk/Downloads/InpOut32/ //可以下载InpOutx64的驱动程序及DLL,还有驱动主板硬件IO的例程 https://www ...

  8. python3对序列求绝对值

    http://www.cnblogs.com/itdyb/p/5731804.html     一开始我是这样写的,据说这样写python2是可以的: myList = [-1,2,-3,4,-5,6 ...

  9. 【Codeforces Round #432 (Div. 2) B】Arpa and an exam about geometry

    [链接]h在这里写链接 [题意] 给你3个点A,B,C 问你能不能将纸绕着坐标轴上的一点旋转.使得A与B重合,B与C重合 [题解] 这3个点必须共圆. 则A,B,C不能为一条直线.否则无解. 共圆之后 ...

  10. HorizontalListView中使用notifyDataSetChanged()和notifyDataSetInvalidated()

    今天在项目中用到了水平ListView控件HorizontalListView,也是我在网上找的个开源HorizontalListView直接在项目中使用.我是把HorizontalListView放 ...