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. 实现CSS样式垂直水平完全居中

    1.水平居中 a.内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } b.块级 ...

  2. hive学习笔记-高级查询

    聚合函数 count计数 count(*):不全都是NULL.就加1:count(1):当仅仅要有一列是NULL就不会加1:count(col):当col列不为空就会加1 sum求和 sum(可转成数 ...

  3. ASP.NET MVC 4 (十一) Bundles和显示模式--asp.net mvc中 @Scripts.Render("~/bundles/jquery")是什么意思? 在布局文件中使用Scripts.Render()输出脚本包，Styles.Render()输出风格包：

    ASP.NET MVC 4 (十一) Bundles和显示模式 ASP.NET MVC 4 引入的js打包压缩功能.打包压缩jquery目录下的文件,在布局文件中使用Scripts.Render()输 ...

  4. BZOJ2402: 陶陶的难题II（树链剖分，0/1分数规划，斜率优化Dp）

    Description Input 第一行包含一个正整数N,表示树中结点的个数.第二行包含N个正实数,第i个数表示xi (1<=xi<=10^5).第三行包含N个正实数,第i个数表示yi ...

  5. powerdesigner逆向自动生成mysql说明文档、PDM

    做EDI的项目的时候,用到相关工具powerdesigner,正好我们的一个项目对数据设计阶段时相关文档没有很好的保存下来,查找了一下powderdesigner相关文档,采用逆向工程,从mysql数 ...

  6. Linux中删除文件，磁盘空间未释放问题追踪

    在客户使用我们产品后,发现一个问题:在删除了文件后.磁盘空间却没有释放.是有进程在打开这个文件,还是其它情况?我们一起来看看一下两个场景 一. 场景一:进程打开此文件 当一个文件正在被一个进程使用时. ...

  7. Cocos2d-x学习笔记（三）CCNode分析

    原创文章.转载请注明出处:http://blog.csdn.net/sfh366958228/article/details/38706483 通过前两份学习笔记,我们不难发现CCScene.CCLa ...

  8. SQL查询练习二(From LeetCode)

    请选用MySQL进行测试. 1.将男性和女性的工资互换(E) 思路:使用case when进行条件判断,在使用update进行修改 update salary set sex = case sex w ...

  9. ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第一篇：准备工作

    摘要      本文将简要介绍这个文章系列的目的.形式及大体内容.并且完成开始学习这个系列前所必要的准备工作. 前言      ASP.NET MVC作为微软官方的MVC解决方案,推出有一段时间了.可 ...

  10. [Ramda] Simple log function for debugging Compose function / Using R.tap for logging

    const log = function(x){ console.log(x); return x; } const get = R.curry(function(prop, obj){ return ...