postcss.config.js
3.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
'use strict';
/**
* postcss plugins for both dev and pro
*/
const path = require('path');
const precss = require('precss');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
const postSprites = require('postcss-sprites');
const postImport = require('postcss-import');
const postAssets = require('postcss-assets');
const postCalc = require('postcss-calc');
const postPxtorem = require('postcss-pxtorem');
const postUse = require('postcss-use');
const spritescore = require('postcss-sprites/lib/core');
const config = require('../../package.json');
const distDir = path.join(__dirname, `../dist/${config.name}/${config.version}`);
const dist = {
img: distDir + '/img',
font: distDir + '/font'
};
exports.postcssPlugin = (et) => {
let sprites = {
spritesmith: {
padding: 8
},
filterBy(file) {
// base64 的图片没有 url 过滤掉
if (file.url) {
return Promise.resolve();
}
return Promise.reject();
},
groupBy(file) {
let group = file.url.split('/')[1];
let entry = path.basename(file.styleFilePath);
file.retina = true;
file.radio = 2;
if (group) {
group = entry + '.' + group;
}
return group ? Promise.resolve(group) : Promise.reject('yoho');
},
hooks: {
onUpdateRule: function(rule, comment, image) {
image.spriteUrl += ('?t=' + new Date().getTime());
spritescore.updateRule(rule, comment, image);
}
}
},
assets,
plugins;
// assets & sprites config in both dev and pro
if (et === 'pro') {
assets = {
loadPaths: [dist.img, dist.font],
relativeTo: distDir,
cachebuster: true
};
Object.assign(sprites, {
basePath: dist.img,
stylesheetPath: distDir,
spritePath: dist.img
});
} else if (et === 'dev') {
assets = {
loadPaths: [path.join(__dirname, '../img/'), path.join(__dirname, '../font/')],
relativeTo: path.join(__dirname, './bundle')
};
Object.assign(sprites, {
basePath: path.join(__dirname, '../img/'),
stylesheetPath: path.join(__dirname, './bundle'),
spritePath: path.join(__dirname, './bundle')
});
}
plugins = [
postImport({
path: [path.join(__dirname, '../scss')],
resolve(id) {
let name = path.basename(id);
if (!/^_/.test(name)) {
id = path.dirname(id) + '/_' + name;
}
return id;
}
}),
precss(),
postSprites(sprites),
postAssets(assets),
postCalc(),
postPxtorem({
rootValue: 40,
unitPrecision: 5, // 保留5位小数字
minPixelValue: 2, // 小于 2 时，不转换
selectorBlackList: [], // 选择器黑名单，可以使用正则
propWhiteList: [] // 属性名称为空，表示替换所有属性的值
}),
autoprefixer({
browsers: ['> 1%']
}),
postUse({
modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
})
];
if (et === 'pro') {
plugins.push(cssnano({
safe: true
}));
}
return plugins;
};