postcss.config.js 2.12 KB
'use strict';

/**
 * postcss plugins for both dev and pro
 */
// TODO 定义雪碧图规则按照url规则生成雪碧图
// const fs = require('fs');
// const path = require('path');
const autoprefixer = require('autoprefixer');

// const postSprites = require('postcss-sprites');
const postPxtorem = require('postcss-pxtorem');
const postUse = require('postcss-use');

// const spritescore = require('postcss-sprites/lib/core');
// const distDir = path.join(__dirname, './public/sprites');
// const cssDir = path.join(__dirname, './public/scss');
// const et = 'pro';

// let sprites = {
//     spritesmith: {
//         padding: 8
//     },
//     stylesheetPath: distDir,
//     spritePath: distDir,
//     filterBy(file) {
//         // 小于2k 合并雪碧图
//         if (fs.statSync(file.path).size < 5000) {
//             return Promise.resolve();
//         }
//         return Promise.reject();
//     },
//     groupBy(file) {
//         let group = path.relative(cssDir, file.styleFilePath).replace('.scss', '').replace('.vue', '');
//         const split = group.split('/').filter(g => g !== '.' && g !== '..');

//         return Promise.resolve(split.join('.'));
//     },
//     hooks: {
//         onUpdateRule: function(rule, comment, image) {
//             if (et === 'pro') {
//                 image.spriteUrl = '~sprites/' + image.spriteUrl + ('?t=' + new Date().getTime());
//             } else {
//                 image.spriteUrl = '~sprites/' + image.spriteUrl;
//             }
//             spritescore.updateRule(rule, comment, image);
//         }
//     }
// };

let plugins = [
    // postSprites(sprites),
    postPxtorem({
        rootValue: 40,
        unitPrecision: 5, // 保留5位小数字
        minPixelValue: 2, // 小于 2 时,不转换
        selectorBlackList: [], // 选择器黑名单,可以使用正则
        propWhiteList: [] // 属性名称为空,表示替换所有属性的值
    }),
    autoprefixer({
        remove: false
    }),
    postUse({
        modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
    })
];

module.exports = {
    plugins
};