编写第一个自已的postCSS插件——一步步填完官方文档中的坑——在vue项目中使用

官网教程

https://dockyard.com/blog/2018/02/01/writing-your-first-postcss-plugin

开始实操

1. 克隆官方模板库

git clone [email protected]:postcss/postcss-plugin-boilerplate.git

按照官方文档，你会遇到上图错误。解决办法，fork官方库之后，再执行git clone，或者直接下载压缩包。

2. 接下来，从该仓库运行向导脚本：

node ./postcss-plugin-boilerplate/start

意思是执行目录下的start.js文件，故，如果你已经进入到目录，执行node start即可。
注意：执行node start后会报以下错误

根据错误提示，是package.json文件中语法报错，在package.json的行，有一个KEYWORDS，IDE已经给出了错误提示，从官方库的issues找到了答案（看下方截图）。废话不多说，将KEYWORDS干掉，再次执行node start，按着提示输入信息，新成了一个新的库，我的库名叫postcss-my-first。

3. 打开新项目，在index.js中贴入官方的demo——查找overflow:scroll，并写入-webkit-overflow-scrolling:touch

let postcss = require('postcss');
module.exports = postcss.plugin('postcss-test-plugin', function () {
  return function (root) {
    root.walkRules(function (rule) {
      rule.walkDecls(/^overflow-?/, function (decl) {
        if (decl.value === 'scroll') {
          let hasTouch = rule.some(function (i) {
            return i.prop === '-webkit-overflow-scrolling';
          });
          if (!hasTouch) {
            rule.append({
              prop: '-webkit-overflow-scrolling',
              value: 'touch'
            });
          }
        }
      });
    });
  };
});

4. 效果测试
   打开index.text.js,将注释部分的代码释放出来进入验证
   input是原始css代码
   ouput是我们插件处理后的结果
   在package.json中加上图示语句，不使用eslint进行校验
   
   index.test.js中的完整代码如下

let postcss = require('postcss')

let plugin = require('./')

async function run(input, output, opts) {
  let result = await postcss([plugin(opts)]).process(input, {from: undefined})
  console.log(result.css)
  expect(result.css).toEqual(output)
  expect(result.warnings()).toHaveLength(0)
}

it('does something', async () => {
  await run('a{ width:20px;overflow:scroll }', 
  'a{ width:20px;overflow:scroll;-webkit-overflow-scrolling:touch }', {})
})

在控制台运行npm run my-test

测试通过,插件为自动为我们添加了样式-webkit-overflow-scrolling:touch

5. 插件使用

   1. 到现在我们只是写好了插件，并验证了插件功能。离项目实际运用还差最后一步。以下以vue-cli创建的项目为例来说明
   2. 要正常使用，首先需将插件包发布到npm，在需要使用的项目中使用npm install 包名，或者直接将项目拷贝到node_modules目录下。
   3. 通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。
   4. 以下示例以该方式使用，在vue-cli项目中postcss.config.js（如无该文件便创建）中引入插件。
   5. postcss.config.js中的代码如下

module.exports = {
    plugins: {
        autoprefixer: {}, 
        '@postcss-my-first': {}
    }
};

autoprefixer：{}为fostcss.config.js中的默认配置，表示启用autoprefixer插件，@postcss-my-first为我这次编写的postCSS插件名，值为空对象表示配置为空。

6. 验证
   万事具备，进行验证，项目中存在以下class

    .login-btn {
        text-align: center;
        overflow: scroll;
    }

运行项目后，在网页中查看该class，成功！