hefangshi / fis-prepackager-csswrapper

a csswrapper for fis to wrap css to javascript

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

fis-prepackager-csswrapper

用于将样式包装为脚本的FIS插件

功能

  • 将样式包装为脚本,主要用于Mod异步加载样式
  • 也可以用于同步加载样式,但是没有实际意义,容易造成页面闪动问题

用法

$ npm install -g fis-prepackager-csswrapper
$ vi path/to/project/fis-conf.js
//file : path/to/project/fis-conf.js
fis.config.set('modules.prepackager', 'csswrapper');

fis.config.get('roadmap.path').unshift({
	//仅匹配xxx.async.css文件
    reg: /(.*)\.async\.css/i,
    //模块化文件,可以使用Mod进行异步加载
    isMod: true,
    //开启csswrapper包装器
    extras : {
        wrapcss : true
    }
});

效果

包装前

/* modules/main.css */
body {
    color : #999;
}

包装后

isMod: true

define('modules/main.css', function(require, exports, module){
    function importStyle(css, id) {
        var ele = document.createElement('style');
        ele.id = id;
        document.getElementsByTagName('head')[0].appendChild(ele);
        if (ele.styleSheet) {
            ele.styleSheet.cssText = css;
        } else {
            ele.appendChild(document.createTextNode(css));
        }
    };
    importStyle("body {\r\n  color : #999;\r\n}", "modules/main.css"); 
});
//自执行
require("modules/main.css")

isMod: false

!function() {
    try {
        function importStyle(css, id) {
            var ele = document.createElement('style');
            ele.id = id;
            document.getElementsByTagName('head')[0].appendChild(ele);
            if (ele.styleSheet) {
                ele.styleSheet.cssText = css;
            } else {
                ele.appendChild(document.createTextNode(css));
            }
        };
        importStyle("body {\r\n  color : #999;\r\n}", "modules/main.css");
    } catch(e) {}
}();

About

a csswrapper for fis to wrap css to javascript

License:MIT License


Languages

Language:JavaScript 100.0%