const psdSize = 750; //设计稿宽度
const RemRatio = 10; //REM 换算比值
const postcss = require('postcss');

const spritesConfig = {
  spritePath: './api/img', //雪碧图合并后存放地址
  retina: true, //支持retina，可以实现合并不同比例图片
  ratio: 2,
  spritesmith: {
    padding: 20
  },
  filterBy: function(image) {
    //过滤一些不需要合并的图片，返回值是一个promise，默认有一个exist的filter
    if (image.url.indexOf('/assets/sprites/') === -1) {
      return Promise.reject();
    }
    return Promise.resolve();
  },
  hooks: {
    onUpdateRule: function(rule, token, image) {
      let backgroundSizeX = image.spriteWidth / (psdSize / RemRatio / 1),
        backgroundSizeY = image.spriteHeight / (psdSize / RemRatio / 1),
        backgroundPositionX = image.coords.x / (psdSize / RemRatio / 1),
        backgroundPositionY = image.coords.y / (psdSize / RemRatio / 1);
      backgroundSizeX = isNaN(backgroundSizeX) ? 0 : backgroundSizeX.toFixed(6);
      backgroundSizeY = isNaN(backgroundSizeY) ? 0 : backgroundSizeY.toFixed(6);
      backgroundPositionX = isNaN(backgroundPositionX)
        ? 0
        : -backgroundPositionX.toFixed(6);
      backgroundPositionY = isNaN(backgroundPositionY)
        ? 0
        : -backgroundPositionY.toFixed(6);
      let backgroundImage = postcss.decl({
        prop: 'background-image',
        value: 'url(' + image.spriteUrl + ')'
      });

      let backgroundSize = postcss.decl({
        prop: 'background-size',
        value: backgroundSizeX + 'rem ' + backgroundSizeY + 'rem'
      });

      let backgroundPosition = postcss.decl({
        prop: 'background-position',
        value: backgroundPositionX + 'rem ' + backgroundPositionY + 'rem'
      });

      rule.insertAfter(token, backgroundImage);
      rule.insertAfter(backgroundImage, backgroundPosition);
      rule.insertAfter(backgroundPosition, backgroundSize);
    }
  },
  //将图片分组，可以实现按照文件夹生成雪碧图
  groupBy: [
    function(image) {
      if (image.url.indexOf('/assets/sprites/chick/') === -1) {
        return Promise.reject();
      }
      return Promise.resolve('chick');
    },
    function(image) {
      if (image.url.indexOf('/assets/sprites/invite/') === -1) {
        return Promise.reject();
      }
      return Promise.resolve('invite');
    },
    function(image) {
      if (image.url.indexOf('/assets/sprites/task/') === -1) {
        return Promise.reject();
      }
      return Promise.resolve('task');
    },
    function(image) {
      if (image.url.indexOf('/assets/sprites/welcome/') === -1) {
        return Promise.reject();
      }
      return Promise.resolve('welcome');
    },
    function(image) {
      if (image.url.indexOf('/assets/sprites/modal/messagebox') === -1) {
        return Promise.reject();
      }
      return Promise.resolve('messagebox');
    },
    function(image) {
      if (image.url.indexOf('/assets/sprites/modal/buyRice') === -1) {
        return Promise.reject();
      }
      return Promise.resolve('buyRice');
    },
    function(image) {
      if (image.url.indexOf('/assets/sprites/modal/coin') === -1) {
        return Promise.reject();
      }
      return Promise.resolve('coin');
    },
    function(image) {
      if (image.url.indexOf('/assets/sprites/modal/eggHistory') === -1) {
        return Promise.reject();
      }
      return Promise.resolve('eggHistory');
    },
    function(image) {
      if (image.url.indexOf('/assets/sprites/modal/giveRice') === -1) {
        return Promise.reject();
      }
      return Promise.resolve('giveRice');
    },
    function(image) {
      if (image.url.indexOf('/assets/sprites/modal/money') === -1) {
        return Promise.reject();
      }
      return Promise.resolve('money');
    }
  ]
};
module.exports = {
  plugins: {
    'postcss-for': {},
    'postcss-preset-env': {
      /* 使用阶段3功能+ css嵌套规则 */
      stage: 4,
      features: {
        'nesting-rules': true
      }
    },

    'postcss-pxtorem': {
      rootValue: 75, //根大小750
      propList: ['*'], // 属性的选择器，* 表示通用 没有*表示不开启
      selectorBlackList: ['weui-', 'cover'] // 忽略的选择器.ig - 表示.ig - 开头的都不会转换
    },
    'postcss-sprites': spritesConfig
  }
};