├── .gitignore ├── README.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | fis3-preprocessor-js-require-css 2 | =============== 3 | 支持 js 中直接 require css. (es6 的 import 也支持，但是先通过 es6 => es5 的转换。) 4 | 5 | 6 | 只能在 fis3 中使用。 7 | 8 | ``` 9 | npm install -g fis3-preprocessor-js-require-css 10 | ``` 11 | 12 | 使用方式配置如下： 13 | 14 | ```js 15 | fis.match('*.{js,es,es6,jsx,ts,tsx}', { 16 | preprocessor: fis.plugin('js-require-css') 17 | }) 18 | ``` 19 | 20 | 如果想 require 文件比如图片，请使用[fis3-preprocessor-js-require-file](https://github.com/fex-team/fis3-preprocessor-js-require-file) 21 | 22 | 两个可以同时使用，配置如下。 23 | 24 | ```js 25 | fis.match('*.{js,es,es6,jsx,ts,tsx}', { 26 | preprocessor: [ 27 | fis.plugin('js-require-file'), 28 | fis.plugin('js-require-css') 29 | ] 30 | }) 31 | ``` 32 | 33 | ## 参数说明 34 | 35 | `mode`: 加载模式，默认为 `dependency` 36 | * `dep | dependency` 【推荐】 简单的标记依赖，并将js语句中对应的 `require` 语句去除。fis 的资源加载程序能够分析到这块，并最终以 `` 的方式加载 css. 37 | * `embed | inline` 将目标 css 文件转换成 js 语句, 并直接内嵌在当前 js 中，替换原有 `require` 语句。 38 | * `jsRequire` 将目标 css 文件转换成 js 语句，但是并不内嵌，而是产出一份同名的 js 文件，当前 `require` 语句替换成指向新产生的文件。 39 | 40 | ## 使用示例 41 | 42 | ### inline 43 | 44 | 按以下方式配置 fis-conf.js 以及在 js 文件中引用，css 文件会以匿名函数的形式嵌入到生成的 js 文件中，运行时自动以 `style` 标签添加到页面头部 45 | 46 | fis-conf.js 47 | 48 | ```js 49 | // match 到的 js 文件具有 require css 的能力 50 | fis.match('*.{js,es,es6,jsx,ts,tsx}', { 51 |  // embed or inline 52 |  preprocessor: fis.plugin('js-require-css', {mode: 'inline'}) 53 | }); 54 | ``` 55 | 56 | js 57 | 58 | ```js 59 | // reuqire 只是一个识别标记，就算 js 文件中没有 require 函数也可以这样写 60 | require('xxx.css'); 61 | ``` 62 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var lang = fis.compile.lang; 2 | var rRequire = /"(?:[^\\"\r\n\f]|\\[\s\S])*"|'(?:[^\\'\n\r\f]|\\[\s\S])*'|(\/\/[^\r\n\f]+|\/\*[\s\S]+?(?:\*\/|$))|\brequire\s*\(\s*('|")(.+?)\2\s*\)/g; 3 | var css2js = require('fis3-preprocessor-css2js'); 4 | 5 | module.exports = function(content, file, options) { 6 | var mode = options.mode; 7 | 8 | return content.replace(rRequire, function(m, comment, quote, value) { 9 | if (!value)return m; 10 | 11 | var info = fis.project.lookup(value, file); 12 | 13 | if (!info.file || !info.file.isCssLike) { 14 | if (!info.file && /\.css$/.test(value)) { 15 | m = "''/*@require " +value+ "*/"; 16 | } 17 | 18 | return m; 19 | } 20 | 21 | switch (mode) { 22 | case 'dep': 23 | case 'dependency': 24 | m = "'" + lang.info.wrap(lang.require.wrap(value)) + "'/*@require " + lang.uri.wrap(value) + "*/"; 25 | break; 26 | 27 | 28 | case 'embed': 29 | case 'inline': 30 | var f = info.file; 31 | fis.compile(f); 32 | var content = css2js.processCss(f.getContent(), { 33 | template: 'vanilla_runner' 34 | }); 35 | m = content; 36 | 37 | break; 38 | 39 | case 'jsRequire': 40 | var f = info.file; 41 | fis.compile(f); 42 | var newFile = fis.file.wrap(f.dirname + '/' + f.filename + f.rExt + '.js'); 43 | var content = css2js.processCss(f.getContent(), { 44 | template: 'vanilla_runner' 45 | }); 46 | newFile.setContent(content); 47 | newFile.isMod = true; 48 | newFile.moduleId = newFile.id; 49 | fis.compile(newFile); 50 | // 其他文件的require中引用的是moduleId，方便从ret.ids中查找到文件，参考deps-pack打包。 51 | file.extras = file.extras || {}; 52 | file.extras.derived = file.extras.derived || []; 53 | file.extras.derived.push(newFile); 54 | 55 | m = 'require(' + quote + (newFile.moduleId || newFile.id) + quote + ')' 56 | 57 | break; 58 | 59 | default: 60 | break; 61 | } 62 | 63 | return m; 64 | }) 65 | }; 66 | 67 | 68 | module.exports.defaultOptions = { 69 | 70 | // 可选择的值 71 | // dep|dependency 【推荐】 简单的标记依赖，fis 资源加载器能把这些依赖分析到，然后直接在 中用 link 插入： 72 | // embed | inline 像 webpack 那样直接把 css 转成 js 插入到 js 里面。 73 | // jsRequire 将目标文件转成 js 但是并不内嵌，而是可以通过 js 的 require 方式加载。 74 | mode: 'dep' 75 | 76 | } 77 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fis3-preprocessor-js-require-css", 3 | "version": "0.1.3", 4 | "description": "resouce loader", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "mocha test/index.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/fex-team/fis3-preprocessor-js-require-css.git" 12 | }, 13 | "keywords": [ 14 | "fis", 15 | "fis3", 16 | "loader" 17 | ], 18 | "author": "fis", 19 | "license": "BSD", 20 | "bugs": { 21 | "url": "https://github.com/fex-team/fis3-preprocessor-js-require-css/issues" 22 | }, 23 | "homepage": "https://github.com/fex-team/fis3-preprocessor-js-require-css", 24 | "dependencies": { 25 | "fis3-preprocessor-css2js": "^0.1.2" 26 | } 27 | } 28 | --------------------------------------------------------------------------------