# postcss-anyway

**Repository Path**: jch18/postcss-anyway

## Basic Information

- **Project Name**: postcss-anyway
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-25
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PostCSS Anyway

[PostCSS]: https://github.com/postcss/postcss

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

#### 在vue上怎么用

安装
```sh
npm install --save-dev postcss-anyway
```

**使用vue.config.js**

```js
const postcssAnyway = require("postcss-anyway")

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcssAnyway
        ]
      }
    }
  },
}
```
**使用postcss.config.js**
```js
module.exports = {
  plugins: {
    "postcss-anyway": {},
  }
}
```

#### 所有的参数都输有序的

**1.自定义滚动条**

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

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

```css
/* 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.画圆**

两个参，圆的直径 背景色  

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

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

**3.矩形（圆角矩形）**

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

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

```css
/* Output example */
.foo {
  background-color: red;
  border-radius: 10px;
  height: 50px;
  width: 100px;
}
```
**4.单行文本溢出隐藏**

参数：限制超出的长度

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

```css
/* Output example */
.foo {
  width: 50px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
```
**5.多行文本溢出隐藏**

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

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

```css
/* 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.渐变色的文字**

参数：渐变色

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

```css
/* Output example */
.foo {
  background: linear-gradient(to right, red, green);
  -webkit-background-clip: text;
  color: transparent;
}
```
暂时就做了这么多，其他有想加的也可以自己尝试着去写写

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

在src同级下建一个postcss的文件夹，在里面建一个index.js写你的插件，在vue.config.js里引入并使用，像这样
```js
const pluginName = require("./postcss/index.js")
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          pluginName
        ]
      }
    }
  }
}
```
### 注意
1. 只能在vue.config.js里使用，在postcss.config.js里写了好像没生效（反正我的没生效）
2. 在仓库里down下来的代码是这样的
```js
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
```
这样好像也不会生效（反正我试了没生效），要改成这样
```js
const postcss = require('postcss')

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

<!-- ### ps
最近在阿拉斯加安克雷奇举行的中美高层战略，中方的发言太燃了，这里引用其中的一句，没有别的意思，就是纯纯的致敬

**美国没有资格居高临下同中国说话，中国人不吃这一套。** -->

[official docs]: https://github.com/postcss/postcss#usage