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. Vue 实现分页+输入框关键字筛选

    分页的实现(Vue+Element)+输入框关键字筛选 1.这里用的是Element 自带的分页组件 <template> <div class="sales-table& ...

  2. 洛谷 P3371 【模板】单源最短路径

    P3371 [模板]单源最短路径 题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 输入输出格式 输入格式: 第一行包含三个整数N.M.S,分别表示点的个数.有向边的个数.出 ...

  3. CDN服务上线，DNSPOD布局云端生态圈

    爱因斯坦曾说过,我从不去想未来,由于它来得已经够快的了.是的,随着互联网的高速发展,我们的生活节奏越来越快,可是人们的耐心却像鞋底一样越磨越薄. 遥控器按一下,鼠标点一下,仅仅要认为没意思或者等待时间 ...

  4. 6lession-基本数据类型

    因为自己是根据网上教程学习的,所以以下内容参考自 http://www.w3cschool.cc/python/python-variable-types.html python支持物种数据类型,分别 ...

  5. 图片裁剪的js有哪些（整理）

    图片裁剪的js有哪些(整理) 一.总结 一句话总结:如果用了amaze框架就去amaze框架的插件库里面找图片裁剪插件,如果没用,jcrop和cropper都不错. 1.amazeui的插件库中有很多 ...

  6. Ajax用法

    1.什么是 Ajax? Ajax,英文名 Asynchronous JavaScript and XML,也就是异步的 JavaScript 和 XML.它不是一门新的语言,而是一种使用现有标准的新方 ...

  7. easyui树查找

    前端查询 /* 树查询*/ function searchMaterial(){ var parentNode=$('#selectMaterialTree').tree('getRoots'); / ...

  8. angular 子组件与父组件通讯

    1. 子组件app-sidebar.compnent.html (click)="goProject()"设置点击事件 <mat-list-item [routerLink] ...

  9. 优秀Java程序员必备10招

    1. 拥有扎实的基础和深刻理解 OO 原则 对于 Java 程序员,深刻理解 ObjectOriented Programming(面向对象编程)这一概念是必须的.没有 OOPS 的坚实基础,就领会不 ...

  10. ArcEngine标注和注记

    转自原文 ArcEngine标注和注记 标注和注记是ArcEngine中提供的两种使用文字信息标注地图要素的方式.其中标注是作为图层的属性存在的,可以动态创建,注记作为地理要素被存储.需要注意的是Sh ...