神奇的 postcss

深碍√TFBOYSˉ_ 2023-01-17 10:46 98阅读 0赞

> postcss 是什么  
>

按 官网 https://postcss.org/ 上的介绍，它是一个 **用 JavaScript 转换 CSS 的工具（A tool for transforming CSS with JavaScript）** 。

与之类似的有 **Sass** 、**Less** 跟 **Stylus** 等 **CSS 预处理器** ，可以让我们通过更简便的方法去写 **CSS** 。

虽然利用 **postcss** 我们也可以写出变量 、函数、混合宏、扩展、条件语句、循环等 **CSS** 不支持（或者支持度）不高的语法，但是 **postcss** 本质还是一个 **与业务无关的CSS工具** ，而实现以上诸多功能的还是依赖于社区上的各种插件 。

它的作用就如同 **JS** 里的 **babel** 一般。

## postcss 可以做什么 ##

### 增强代码的可读性 ###

利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。

示例如下：

// 输入
    :fullscreen {
    }
    
    // 输出
    :-webkit-full-screen {
    }
    :-ms-fullscreen {
    }
    :fullscreen {
    }

### 将未来的 CSS 特性带到今天！ ###

PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。

示例如下：

// 输入
    body {
      color: lch(53 105 40);
    }
    
    // 输出
    body {
      color: rgb(250, 0, 4);
    }

### 终结全局 CSS ###

CSS 模块 能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。

示例如下：

// 输入
    .name {
      color: gray;
    }
    
    // 输出
    .Logo__name__SVK0g {
      color: gray;
    }

### 避免 CSS 代码中的错误 ###

通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。

示例如下：

// 输入
    a {
      color: #d3;
    }
    
    // 控制台输出
    app.css
    2:10 Invalid hex color

## postcss 怎么用 ##

我们可以以 **webpack** 为例看看如何进行配置。

首先就是安装基础插件：

npm install postcss-loader postcss --save-dev
    or
    yarn add postcss-loader postcss -D

然后在你的 `webpack.config.js` 里添加：

module.exports = {
     module: {
        rules: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader', 'postcss-loader'],
          },
        ],
     }
    }

然后在根目录下创建文件 `postcss.config.js` ，内容如下：

module.exports = {
      plugins: [],
    }

现在就让我们为在 **postcss可以做什么** 里提到的4个特性来添加相应的插件。

4个特性对应的插件如下：

### autoprefixer（增强代码的可读性） ###

安装方式：

npm install autoprefixer --save-dev
    or
    yarn add autoprefixer -D

配置如下：

// postcss.config.js
    const autoprefixer = require('autoprefixer')
    module.exports = {
      plugins: [
        autoprefixer
      ],
    }

autoprefixer 是与 browserslist 进行关联， **browserslist** 就是一个告知打包工具项目将会运行的浏览器以及node平台，以此来创建相应的兼容性代码的工具。

所以我们可以在 `package.json` 里添加 `browserslist` 属性，或者在根目录添加 `.browserslistrc` 文件，示例如下（具体规则可根据项目情况来进行配置）：

last 2 version
    > 1%
    IE 11

**browserslist** 的数据都是来自 https://caniuse.com/ 的。

我们可以通过 https://browserslist.dev 来查看语句匹配情况。截图如下：

![1f85eb768b839bca5dd1dbd96ab74d00.png][]

所以我们有：

// input
    .example {
        display: grid;
        transition: all .5s;
        user-select: none;
        background: linear-gradient(to bottom, white, black);
    }
    
    // output
    /*
    * Prefixed by https://autoprefixer.github.io
    * PostCSS: v7.0.29,
    * Autoprefixer: v9.7.6
    * Browsers: last 2 version
    */
    .example {
        display: -ms-grid;
        display: grid;
        -webkit-transition: all .5s;
        transition: all .5s;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
        background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
        background: linear-gradient(to bottom, white, black);
    }

我们可以通过 https://autoprefixer.github.io/ 在线看编译效果

### postcss-preset-env（将未来的 CSS 特性带到今天！） ###

安装方式：

npm install postcss-preset-env --save-dev 
    or
    yarn add postcss-preset-env -D

配置如下：

// postcss.config.js
    const postcssPresetEnv = require('postcss-preset-env')
    module.exports = {
      plugins: [
        postcssPresetEnv(/* pluginOptions */)
      ],
    }

**postcss-preset-env** 可以让我们用一些浏览器支持率不高或者尚未支持的 **CSS属性** 。

示例如下：

// input
    :root {
      --fontSize: 1rem;
      --mainColor: #12345678;
      --secondaryColor: lab(32.5 38.5 -47.6 / 90%);
    }
    @custom-media --viewport-medium (width <= 50rem);
    
    @media (--viewport-medium) {
      body {
        color: var(--mainColor);
        font-family: system-ui;
        font-size: var(--fontSize);
        line-height: calc(var(--fontSize) * 1.5);
        overflow-wrap: break-word;
        padding-inline: calc(var(--fontSize) / 2 + 1px);
      }
    }
    
    // output Stage 0 > 3%
    :root {
      --fontSize: 1rem;
      --mainColor: rgba(18,52,86,0.47059);
      --secondaryColor: rgba(102, 51, 153, 0.9);
    }
    
    @media (max-width: 50rem) {
      body {
        color: var(--mainColor);
        font-family: system-ui;
        font-size: var(--fontSize);
        line-height: calc(var(--fontSize) * 1.5);
        overflow-wrap: break-word;
        padding-left: calc(var(--fontSize) / 2 + 1px);
        padding-right: calc(var(--fontSize) / 2 + 1px);
      }
    }

我们可以通过 https://csstools.github.io/postcss-preset-env/ 在线看编译效果。

它可选的选项有7个，分别是：stage、features、browsers、insertBefore、insertAfter、autoprefixer、preserve、importFrom。

具体选项说明与示例可参考 https://github.com/csstools/postcss-preset-env 。

这里要着重分享两个选项：

#### stage ####

在谈 **stage** 这个选项之前，首先我们得先知道一个概念—— **cssdb** 。

**cssdb** 是 `postcss-preset-env` 的实现基准，主要就是 **CSS** 的新功能功能及这些功能从提出到成为标准时所在的进程。

**cssdb** 跟 **ecma** 一样，对新属性分了不同的进程，具体的进程如下：

Stage 0：脑袋风暴阶段。高度不稳定，可能会发生变化。

Stage 1：实验阶段。也非常不稳定，可能会发生变化，但是该提案已得到W3C成员的认可。

Stage 2：承认阶段。高度不稳定并且可能会发生变化，但是正在积极研究中。

Stage3：拥抱阶段。稳定且变化不大，此功能可能会成为标准。

Stage4：标准阶段。最终的解决方案，所有主流浏览器都支持。

所以 **stage** 这个配置的可选项就是 **1、2、3、4** 了。

#### features ####

**features** 选项按 **ID** 启用或禁用特定的 **polyfill** 。启用就是 `true` 。

具体可参考 https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js\#L36

### css-modules（终结全局 CSS） ###

安装方式：

npm install postcss-modules --save-dev 
    or
    yarn add postcss-modules -D

配置如下：

// postcss.config.js
    const postcssModules = require('postcss-modules')
    module.exports = {
      plugins: [
        postcssModules(/* pluginOptions */)
      ],
    }

**css-modules** 支持我们以模块化的形式来编写代码。示例如下：

// input
    .grid {
        display: grid;
        grid: repeat(2, 240px) / auto-flow 320px;
        & > div {
            background-color: #8ca0ff;
            width: 200px;
            height: 200px;
            transition: 1s;
        }
    }
    
    // output
    .demo__grid___2lKm5 {
      display: -ms-grid;
      display: grid;
      grid: repeat(2,32vw) / auto-flow 42.667vw
    }
    .demo__grid___2lKm5 > div{
      background-color: #8ca0ff;
      width: 26.667vw;
      height: 26.667vw;
      -webkit-transition: 1s;
      transition: 1s
    }

其实在这里，如果不使用 `postcss-modules` ，也可以直接利用 `css-loader` 开启 css 模块化，具体配置如下：

// webpack.config.js
    module.exports = {
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                modules: true,
                                importLoaders: true,
                                localIdentName: '[name]__[local]___[hash:base64:5]'
                            }
                        },
                    ],
                },
            ],
        },
    }

### stylelint（避免 CSS 代码中的错误） ###

如果在 **JS** 中我们可以使用 eslint 进行代码检查一样，在 **CSS** 中我们也可以通过 stylelint 来进行代码检查。

安装方法：

npm install stylelint stylelint-config-standard --save-dev 
    or
    yarn add stylelint stylelint-config-standard -D

配置如下：

// webpack.config.js
    const StyleLintPlugin = require('stylelint-webpack-plugin')
    
    module.exports = {
      plugins: [
        new StyleLintPlugin(/* pluginOptions */)
      ]
    }

然后在根目录上创建 `.stylelintrc` 或者 `stylelint.config.js` 文件（具体文件可在 StyleLintPlugin 中配置），其内容如下：

{
        "extends": "stylelint-config-standard",
        "rules": {/* pluginOptions */}
    }

所以当我们代码不规范时，就可以在命令行里看到类似的报错：

![ab37000207509d6eae7346f600b28907.png][]

我们也可以在 编辑器 里找到对应的 **stylelint** 插件，从而进行CSS代码自动格式化。

## ying-template ##

ying-template (https://github.com/KRISACHAN/ying-template) 是鱼头在 GitHub 上开源的一个基于 webpack5 + typeScript4 + postcss8 的一个多页面脚手架，在最开始的版本中也引入了 sass、less ，不过后来因为 postcss 太香，就直接去除了 sass、less ，只留下 postcss 。

ying-template 目前已经在鱼头老东家的一个专利项目中投入了生产，而鱼头另一个开源库 ying-datastructures-algorithms (https://github.com/KRISACHAN/ying-datastructures-algorithms) （一个算法与数据结构 typescript 描述库）也在使用中，另外社区中也有一些小伙伴在项目中使用或借鉴了，各位有兴趣也可以 clone 下来看一下，可以感受下在 postcss 下的 css 是多么有魅力。

另外值得一提的是，除了上面介绍的几个基础插件之外，postcss 社区上也有许多有意思的插件，各位可以通过 https://www.postcss.parts/ 来选择自己所需要的插件进行使用。

## 参考资料 ##

1.  https://github.com/KRISACHAN/ying-template
2.  https://www.postcss.com.cn/
3.  https://mp.weixin.qq.com/s/Zqw8f5jX6MmeURRzc44C6Q
4.  https://github.com/postcss/autoprefixer
5.  https://autoprefixer.github.io/
6.  https://browserslist.dev/
7.  https://github.com/csstools/postcss-preset-env
8.  https://www.postcss.parts/

[![d4130a7d97b47e15ff04d5135216ad7c.png][]][d4130a7d97b47e15ff04d5135216ad7c.png 1]

## 关于奇舞精选 ##

《奇舞精选》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

奇舞团是360集团最大的大前端团队，代表集团参与W3C和Ecma会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队Leader等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

![afcb05aefae643bf9922f3bf1ed07477.png][]

[1f85eb768b839bca5dd1dbd96ab74d00.png]: /images/20221021/71c3c5c624b64b75964898e8a0a4bbb9.png
[ab37000207509d6eae7346f600b28907.png]: /images/20221021/7a7339f09bca43d7a8979b502c7bdeaa.png
[d4130a7d97b47e15ff04d5135216ad7c.png]: /images/20221021/b6673b7f65794c9fb830798db995b920.png
[d4130a7d97b47e15ff04d5135216ad7c.png 1]: http://mp.weixin.qq.com/s?__biz=MzA5NzkwNDk3MQ%3D%3D&chksm=8891f65ebfe67f48fd731f105053a589e02ddf1fbfa949f5e51ac3004cb531670f1dcfffc585&idx=1&mid=2650596986&scene=21&sn=3e2b70e4a516f313d3dc0a60922eb8e8#wechat_redirect
[afcb05aefae643bf9922f3bf1ed07477.png]: /images/20221021/2308446903c24964b60424408d912570.png