【CSS工程化】PostCss：一键搞定CSS编译与优化

什么是 PostCSS

学习到现在，可以看出，CSS工程化面临着诸多问题，而解决这些问题的方案多种多样。

如果把CSS单独拎出来看，光是样式本身，就有很多事情要处理。

既然有这么多事情要处理，何不把这些事情集中到一起统一处理呢？

PostCss就是基于这样的理念出现的。

PostCss类似于一个编译器，可以将样式源码编译成最终的CSS代码 看上去是不是和LESS、SASS一样呢？

但PostCss和LESS、SASS的思路不同，它其实只做一些代码分析之类的事情，将分析的结果交给插件，具体的代码转换操作是插件去完成的。

官方的一张图更能说明postcss的处理流程：

这一点有点像webpack，webpack本身仅做依赖分析、抽象语法树分析，其他的操作是靠插件和加载器完成的。

1. 安装 PostCSS

PostCSS 是基于 Node.js 编写的，因此可以使用 npm 安装。

npm install -D postcss

PostCSS 库提供了对应的 JS API 用于转换代码。如果你希望使用 PostCSS 的一些高级功能或开发 PostCSS 插件，可以参考其 API 文档：api.postcss.org/

然而，大部分时候我们都是使用者，并不希望使用代码的方式来使用 PostCSS。因此，可以再安装一个 postcss-cli，通过命令行来完成编译。

npm install -D postcss-cli

postcss-cli 提供一个命令，它调用 PostCSS 中的 API 来完成编译。命令的使用方式为：

postcss 源码文件 -o 输出文件

2. 配置文件

和 Webpack 类似，PostCSS 也有自己的配置文件，该配置文件会影响 PostCSS 的某些编译行为。配置文件的默认名称是 postcss.config.js。

例如：

module.exports = {
  map: false, // 关闭 source-map
};

3. 插件

光使用 PostCSS 是没有多少意义的，要让它真正发挥作用，需要插件。PostCSS 的插件市场非常丰富，可以通过 www.postcss.parts/ 查找和使用插件。

3.1 postcss-preset-env

postcss-preset-env 是一个非常常用的插件，它整合了许多常用的插件到一起，并完成了基本的配置。安装该插件后，在 PostCSS 配置中加入下面的配置：

module.exports = {
  plugins: {
    "postcss-preset-env": {} // {} 中可以填写插件的配置
  }
};

3.1.1 自动的厂商前缀

某些新的 CSS 样式需要在旧版本浏览器中使用厂商前缀方可实现。postcss-preset-env 内部包含了 autoprefixer，可以自动添加厂商前缀。

如果需要调整兼容的浏览器范围，可以通过以下方式配置：

方式1：在 postcss-preset-env 的配置中加入 browsers

module.exports = {
  plugins: {
    "postcss-preset-env": {
      browsers: [
        "last 2 versions",
        "> 1%"
      ]
    }
  }
};

方式2【推荐】：添加 .browserslistrc 文件

创建文件 .browserslistrc，填写配置内容：

last 2 versions
> 1%

方式3【推荐】：在 package.json 的配置中加入 browserslist

{
  "browserslist": [
    "last 2 versions",
    "> 1%"
  ]
}

browserslist 是一个多行的（数组形式的）标准字符串。它的书写规范多而繁琐，详情见：github.com/browserslis…

一般情况下，大部分网站都使用下面的格式进行书写：

last 2 versions
> 1% in CN
not ie <= 8

• last 2 versions: 浏览器的兼容最近期的两个版本
• > 1% in CN: 匹配中国大于 1% 的人使用的浏览器，in CN 可省略
• not ie <= 8: 排除掉版本号小于等于 8 的 IE 浏览器

你可以通过网站 browserl.ist/ 对配置结果覆盖的浏览器进行查询，查询时，多行之间使用英文逗号分割。

3.1.2 未来的 CSS 语法

CSS 的某些前沿语法正在制定过程中，没有形成真正的标准。postcss-preset-env 可以编译这些未来语法，使其在当前浏览器中可用。

你可以通过 postcss-preset-env 的 stage 配置，告知 postcss-preset-env 需要对哪个阶段的 CSS 语法进行兼容处理，它的默认值为 2。

"postcss-preset-env": {
  stage: 0
}

一共有 5 个阶段可配置：

• Stage 0: Aspirational - 只是一个早期草案，极其不稳定
• Stage 1: Experimental - 仍然极其不稳定，但是提议已被 W3C 公认
• Stage 2: Allowable - 虽然还是不稳定，但已经可以使用了
• Stage 3: Embraced - 比较稳定，可能将来会发生一些小的变化，它即将成为最终的标准
• Stage 4: Standardized - 所有主流浏览器都应该支持的 W3C 标准

3.1.3 变量

未来的 CSS 语法是天然支持变量的。在 :root{} 中定义常用变量，使用 -- 前缀命名变量。

:root {
  --lightColor: #ddd;
  --darkColor: #333;
}

a {
  color: var(--lightColor);
  background: var(--darkColor);
}

3.1.4 自定义选择器

@custom-selector :--heading h1, h2, h3, h4, h5, h6;
@custom-selector :--enter :focus, :hover;

a:--enter {
  color: #f40;
}

:--heading {
  font-weight: bold;
}

:--heading.active {
  font-weight: bold;
}

编译后：

a:focus, a:hover {
  color: #f40;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

h1.active, h2.active, h3.active, h4.active, h5.active, h6.active {
  font-weight: bold;
}

3.1.5 嵌套

与 LESS 相同，只不过嵌套的选择器前必须使用符号 &。

.a {
  color: red;
  & .b {
    color: green;
  }

  & > .b {
    color: blue;
  }

  &:hover {
    color: #000;
  }
}

编译后：

.a {
  color: red;
}

.a .b {
  color: green;
}

.a > .b {
  color: blue;
}

.a:hover {
  color: #000;
}

3.2 postcss-apply

该插件可以支持在 CSS 中书写属性集。类似于 LESS 中的混入，可以利用 CSS 的新语法定义一个 CSS 代码片段，然后在需要的时候应用它。

:root {
  --center: {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  };
}

.item {
  @apply --center;
}

编译后：

.item {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

3.3 postcss-color-function

该插件支持在源码中使用一些颜色函数。

body {
  /* 使用颜色 #aabbcc，不做任何处理，等同于直接书写 #aabbcc */
  color: color(#aabbcc);
  /* 将颜色 #aabbcc 透明度设置为 90% */
  color: color(#aabbcc a(90%));
  /* 将颜色 #aabbcc 的红色部分设置为 90% */
  color: color(#aabbcc red(90%));
  /* 将颜色 #aabbcc 调亮 50%（更加趋近于白色），类似于 less 中的 lighten 函数 */
  color: color(#aabbcc tint(50%));
  /* 将颜色 #aabbcc 调暗 50%（更加趋近于黑色），类似于 less 中的 darken 函数 */
  color: color(#aabbcc shade(50%));
}

编译后：

body {
  /* 使用颜色 #aabbcc，不做任何处理，等同于直接书写 #aabbcc */
  color: rgb(170, 187, 204);
  /* 将颜色 #aabbcc 透明度设置为 90% */
  color: rgba(170, 187, 204, 0.9);
  /* 将颜色 #aabbcc 的红色部分设置为 90% */
  color: rgb(230, 187, 204);
  /* 将颜色 #aabbcc 调亮 50%（更加趋近于白色），类似于 less 中的 lighten 函数 */
  color: rgb(213, 221, 230);
  /* 将颜色 #aabbcc 调暗 50%（更加趋近于黑色），类似于 less 中的 darken 函数 */
  color: rgb(85, 94, 102);
}

3.4 postcss-import

该插件可以让你在 PostCSS 文件中导入其他样式代码，通过该插件可以将它们合并。由于后续的课程中，会将 PostCSS 加入到 Webpack 中，而 Webpack 本身具有依赖分析的功能，所以该插件的实际意义不大。

3.5 stylelint

stylelint 是一个强大的 CSS 代码风格检查工具。它可以帮助你在开发过程中发现和纠正不规范的 CSS 代码。

官网地址：stylelint.io/

由于不同的公司可能使用不同的 CSS 书写规范，stylelint 本身并没有提供具体的规则验证。你需要安装或自行编写规则验证方案。通常，我们会安装 stylelint-config-standard 库来提供标准的 CSS 规则判定。

安装好后，需要告诉 stylelint 使用该库进行规则验证。告知的方式有多种，比较常见的是使用文件 .stylelintrc。

{
  "extends": "stylelint-config-standard"
}

此时，如果你的代码出现不规范的地方，编译时将会报出错误。

body {
  background: #f4;
}

如果某些规则并非你所期望的，可以在配置中进行设置。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": null
  }
}

设置为 null 可以禁用该规则，或者设置为 4，表示一个缩进有 4 个空格。具体的设置需要参见 stylelint 文档：stylelint.io/

如果希望在编写代码时就自动在编辑器里报错，可以安装 VSCode 的插件 stylelint，它会读取你工程中的配置文件，按照配置进行实时报错。

4. 总结

通过本课程，你已经了解了 PostCSS 的基本概念、安装和使用方法，以及一些常用的插件。PostCSS 提供了强大的功能，可以帮助你更高效地编写和维护 CSS 代码。