Skip to content
This repository has been archived by the owner on May 7, 2022. It is now read-only.

Commit

Permalink
feat: Add automatic handling of multiple style label merges
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuexb
xuexb committed Jan 25, 2018
1 parent e2cf719 commit ad6dcf5
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 21 deletions.
7 changes: 7 additions & 0 deletions README.md
View file
Expand Up @@ -67,6 +67,13 @@ mip:

> 注意：使用该方式加载样式后，将忽略 **#1 默认全部加载** 和 **#2 主动调用 mipcss 函数加载指定文件** ，因为页面已经存在 `<style mip-custom>` 标签。
#### 4. 自动合并页面中的 `<style>` 标签 - v0.6.0 新增

对于页面中存在的多个 `<style>` 标签将自动合并并插入到 `<head>` 标签中的 `<style mip-custom>` 标签中，分2种情况：

1. 页面中已经存在 `<style mip-custom>` 标签（可以是调用 `{{ mipcss(file1 [, file2]) }}` 生成，也可以是自己手动写入），将把页面中提取的其他 `<style>` 依次**追加**到原 `<style mip-custom>` 标签内。
2. 页面中不存在 `<style mip-custom>` 标签，自动根据 `1. 默认全部加载` 或者 `2. 配置加载文件的名单` 加载，并把页面中提取的其他 `<style>` 依次**追加**到最后。

### 处理 a 标签

> [MIP a 标签文档](https://www.mipengine.org/examples/mip-extensions/mip-link.html)
Expand Down
75 changes: 56 additions & 19 deletions lib/style.js
View file
Expand Up @@ -11,6 +11,53 @@ var glob = require('glob');
var CleanCSS = require('clean-css');
var isMip = require('./isMip');

/**
* 处理样式标签合并
*
* @param {Object} data 配置参数
* @param {string|undefined} data.source 头部追加的样式代码
* @param {boolean} data.cssmin 是否压缩样式
* @return {string}
*/
var mergeStyles = function (data) {
var styles = '';
var html = data.html;

html = html.replace(/<style([^>]*)>([\s\S]*?)<\/style>/g, function (matched, attr, content) {
// 如果是 <style mip-officialrelease> 则不处理
if (String(attr).indexOf('mip-officialrelease') > -1) {
return matched;
}
styles += content;
return '';
});

// 追加源数据
if (data.source) {
styles = data.source + styles;
}

// 压缩代码
if (data.cssmin) {
styles = new CleanCSS().minify(styles).styles;
}

if (!styles) {
return html;
}

styles = '<style mip-custom>' + styles + '</style>';

if (/<noscript>([\s\S]+?)<\/noscript>([\s\S]*?)<\/head>/.test(html)) {
html = html.replace('<noscript>', styles + '<noscript>');
}
else {
html = html.replace('</head>', styles + '</head>');
}

return html;
};

module.exports = function (hexo, config) {
hexo.extend.filter.register('after_render:html', function (html) {
if (!isMip(html)) {
Expand All @@ -19,7 +66,10 @@ module.exports = function (hexo, config) {

// 如果 <head> 标签内存在 <style> 则忽略
if (/<head>(?:[\s\S]*?)<style\s+mip-custom[^>]*>(?:[\s\S]*?)<\/style>(?:[\s\S]*?)<\/head>/.test(html)) {
return html;
return mergeStyles({
html: html,
cssmin: config.cssmin
});
}

var cwd = path.resolve(hexo.theme_dir, './source/css');
Expand All @@ -45,24 +95,11 @@ module.exports = function (hexo, config) {
return fs.readFileSync(filepath).toString();
}).join('');

if (!content) {
return html;
}

if (config.cssmin) {
content = new CleanCSS().minify(content).styles;
}

content = '<style mip-custom>' + content + '</style>';

if (/<noscript>([\s\S]+?)<\/noscript>([\s\S]*?)<\/head>/.test(html)) {
html = html.replace('<noscript>', content + '<noscript>');
}
else {
html = html.replace('</head>', content + '</head>');
}

return html;
return mergeStyles({
html: html,
source: content,
cssmin: config.cssmin
});
}, 8);

// 主动加载
Expand Down
82 changes: 80 additions & 2 deletions test/style.js
View file
Expand Up @@ -265,10 +265,9 @@ describe('style.js', function () {
expect(callback(head)).to.equal([
'<html mip>',
'<head>',
'<style mip-custom>body {height: 0;}</style>',
'<style mip-custom>body {height: 0;}body {}</style>',
'</head>',
'<body>',
'<style mip-custom>body {}</style>',
'</body>'
].join(''));
});
Expand Down Expand Up @@ -473,6 +472,85 @@ describe('style.js', function () {
});
});

describe('multiple `<style>` tag', function () {
it('<head> not has <style mip-custom>', function () {
register({
theme_dir: mockBase
});

var head = [
'<html mip>',
'<head>',
'</head>',
'<body>',
'<style>.demo {}</style>',
'<style>.demo2 {}</style>',
'</body>'
].join('');

expect(callback(head)).to.equal([
'<html mip>',
'<head>',
'<style mip-custom>.demo {}.demo2 {}</style>',
'</head>',
'<body>',
'</body>'
].join(''));
});

it('<head> has <style mip-custom>', function () {
register({
theme_dir: mockBase
});

var head = [
'<html mip>',
'<head>',
'<style mip-custom>body {}</style>',
'</head>',
'<body>',
'<style>.demo {}</style>',
'<style>.demo2 {}</style>',
'</body>'
].join('');

expect(callback(head)).to.equal([
'<html mip>',
'<head>',
'<style mip-custom>body {}.demo {}.demo2 {}</style>',
'</head>',
'<body>',
'</body>'
].join(''));
});

it('<head> has <style mip-officialrelease>', function () {
register({
theme_dir: mockBase
});

var head = [
'<html mip>',
'<head>',
'<style mip-officialrelease>body {}</style>',
'</head>',
'<body>',
'<style>.demo {}</style>',
'<style>.demo2 {}</style>',
'</body>'
].join('');

expect(callback(head)).to.equal([
'<html mip>',
'<head>',
'<style mip-officialrelease>body {}</style>',
'<style mip-custom>.demo {}.demo2 {}</style>',
'</head>',
'<body>',
'</body>'
].join(''));
});
});
});

});
Expand Down

0 comments on commit ad6dcf5

Please sign in to comment.