postcss-anyway v0.0.3

PostCSS Anyway

插件说明

用来熟悉一下postcss的插件是怎么开发的，然后做了这么一个所谓的插件，其实就是一些常用代码的一个小打包，比如我们在写一个圆的时候有些代码是必须要带上的width, height, border-radius: 50%, background，那能不能整合一下比如像这样circle: width backgrund,我只给一个宽和颜色，在比如写单行的文本超出长度溢出，overflow,text-overflow,white-space这几个是必写的，那我能不能想这样ellip: 100px，只给一个宽度就行了呢，其实不用这个插件用sass之类的预处理也可以实现类似的功能。所有功能只在vue上试过，功能一共就只有几个，看下面代码说明。

在vue上怎么用

安装

npm install --save-dev postcss-anyway

使用vue.config.js

const postcssAnyway = require("postcss-anyway")

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcssAnyway
        ]
      }
    }
  },
}

使用postcss.config.js

module.exports = {
  plugins: {
    "postcss-anyway": {},
  }
}

所有的参数都输有序的

1.自定义滚动条

五个参数分别为纵向滚动条的宽度，横向滚动条的宽度，滚动条句柄的颜色，滚动条的颜色，句柄是否需要圆角，参数是有序的，所以传的时候要按序传。本身的容器要给宽高和溢出滚动，哪边要给哪边。代码本身只是对滚动条的样式做了简单的处理。

/* Input example */
.foo {
  width: 100px;
  height: 100px;
  overflow: auto;
  overflow-x: hidden;
  /* 这个是代码 */
  scrollbar: 6px 0 #999 #eee withBorder;
}

/* Output example */
.foo::-webkit-scrollbar {
    background: #eee;
    height: 0;
    width: 6px;
}
.foo::-webkit-scrollbar-corner {
    box-shadow: inset 0 0 5px rgb(180 160 120 / 50%);
    background-color: rgba(180, 160, 120, 0.1);
}
.foo::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #999;
}
.foo::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(180 160 120 / 50%);
    background-color: rgba(180, 160, 120, 0.1);
}

2.画圆

两个参，圆的直径 背景色

/* Input example */
.foo {
  circle: 50px green;
}

/* Output example */
.foo {
  background-color: green;
  border-radius: 50%;
  height: 50px;
  width: 50px;
}

3.矩形（圆角矩形）

参数：宽，高，圆角半径（直接就写成0），背景色

/* Input example */
.foo {
  rect: 100px 50px 10px red;
}

/* Output example */
.foo {
  background-color: red;
  border-radius: 10px;
  height: 50px;
  width: 100px;
}

4.单行文本溢出隐藏

参数：限制超出的长度

/* Input example */
.foo {
  ellip: 50px;
}

/* Output example */
.foo {
  width: 50px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

5.多行文本溢出隐藏

参数：限制超出的长度 几行隐藏

/* Input example */
.foo {
  mellip: 50px 2;
}

/* Output example */
.foo {
    width: 50px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;  
}

6.渐变色的文字

参数：渐变色

/* Input example */
.foo {
  text-colorful: linear-gradient(to right, red, green);
}

/* Output example */
.foo {
  background: linear-gradient(to right, red, green);
  -webkit-background-clip: text;
  color: transparent;
}

暂时就做了这么多，其他有想加的也可以自己尝试着去写写

怎么做插件，怎么上传网上有很多的教程，我就不做赘述了，我讲一下本地开发时怎么进行调试吧。以vue举例

在src同级下建一个postcss的文件夹，在里面建一个index.js写你的插件，在vue.config.js里引入并使用，像这样

const pluginName = require("./postcss/index.js")
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          pluginName
        ]
      }
    }
  }
}

注意

1. 只能在vue.config.js里使用，在postcss.config.js里写了好像没生效（反正我的没生效）
2. 在仓库里down下来的代码是这样的

module.exports = (opts = { }) => {
  return {
    postcssPlugin: 'postcss-pluginName',
    Root (root, postcss) {
      // Transform CSS AST here
    },
    Declaration (decl, postcss) {
      // The faster way to find Declaration node
    },
    Declaration: {
      color: (decl, postcss) {
        // The fastest way find Declaration node if you know property name
      }
    }
  }
}
module.exports.postcss = true

这样好像也不会生效（反正我试了没生效），要改成这样

const postcss = require('postcss')

module.exports = postcss.plugin('postcss-test-plugin', function() {
  return function(root) {
    root.walkRules(rule => {
      rule.walkDecls(decl => {
        ...
      })
    })
  }
})