PostCSS 的介绍和使用

介绍

在写 CSS 时，我们可能会用到 Less、Sass 等预处理，但是这些预处理无法解决下面的问题：

1. 兼容低版本浏览器，对未来的 css 属性进行降级；
2. 前缀补全，例如添加 --webkit；

这些问题，可以使用 PostCSS 进行处理。类似于 babel，PostCSS 用来保证 CSS 的执行万无一失。

babel 的工作流程：

1. 将最新的 ts 语法转化成 js 语法
2. 做一次语法降级

然后再在浏览器中进行执行。

PostCSS 是一个用于处理 CSS 的工具，它采用插件体系，允许开发者通过使用插件来转换、优化和处理 CSS 代码。与传统的预处理器（如 Sass 和 Less）不同，PostCSS 并不是一种新的 CSS 语言，而是通过插件系统扩展了现有的 CSS 语法。

PostCSS 的主要优势之一是灵活性。开发者可以根据项目的需要，选择并配置不同的插件。这使得 PostCSS 成为一个强大的工具，适用于各种不同的项目和需求。

常见的 PostCSS 插件功能有：

1. 自动添加浏览器前缀： 使得样式在不同浏览器中具有一致的表现。
2. CSS 变量处理： 允许使用 CSS 变量，并在构建过程中将其转换为实际的值。
3. 压缩和优化： 移除不必要的空格、注释等，以减小文件大小并提高加载性能。
4. 使用未来的 CSS 语法： 允许开发者在项目中使用尚未被所有浏览器支持的 CSS 语法，通过插件将其转换为当前浏览器能够理解的语法。

postcss-cli 是一个用于运行 PostCSS 的命令行工具。postcss-cli 提供了一种通过命令行界面来使用 PostCSS 的简便方法。使用 postcss-cli，你可以在命令行中运行 PostCSS，并通过指定配置文件或直接传递选项来配置不同的插件和功能。这使得开发者可以轻松地集成 PostCSS 到他们的构建过程中，从而在构建过程中自动化 CSS 处理。

PostCSS 的工作流程通常涉及以下步骤：

1. 安装 PostCSS 及相关插件： 通过 npm 或 yarn 安装 PostCSS 以及需要的插件。
2. 配置 PostCSS：创建一个配置文件（通常是 postcss.config.js）来指定使用的插件和其配置。
3. 运行 PostCSS：使用命令行工具（如 postcss-cli）或集成到构建工具中，运行 PostCSS 来处理 CSS 文件。
4. 输出处理后的 CSS： 处理后的 CSS 文件可以用于生产环境中。

总的来说，PostCSS 提供了一种现代化、模块化的方式来处理和增强 CSS，为开发者提供了更大的灵活性和控制权。

使用

安装 postcss-cli 和 postcss：

yarn add postcss-cli postcss -D

在 index.css 文件中添加下面的内容，使用 CSS 未来语法中的变量：

:root {
  --globalColor: lightblue;
}

div {
  background-color: var(--globalColor);
}

使用 postcss 对 index.css 进行编译，命令参数：-o表示（output）输出。

npx postcss index.css -o result.css

输出的 result.css 文件内容：

:root {
  --globalColor: lightblue;
}

div {
  background-color: var(--globalColor);
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJyZXN1bHQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOnJvb3Qge1xyXG4gICAgLS1nbG9iYWxDb2xvcjogbGlnaHRibHVlO1xyXG59XHJcblxyXG5kaXYge1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tZ2xvYmFsQ29sb3IpO1xyXG59Il19 */

此时发现并没有对语法降级。

配置并使用插件

postcss-preset-env为预设环境，他可以帮我们把必要的插件都安装上了，其中包含了：

• postcss-low-level：语法降级
• postcss-compiler: 编译插件
• Autoprefixer: 自动补全

安装 postcss 的插件：postcss-preset-env

yarn add postcss-preset-env -D

PostCSS 的默认配置文件名为：postcss.config.js。创建配置文件 postcss.config.js，并使用 postcss-preset-env插件：

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {\
  plugins: [postcssPresetEnv()]
}

再次运行 npx postcss index.css -o result.css对 index.css 文件进行处理，此时 result.css 中的文件内容为：

:root {
  --globalColor: lightblue;
}

div {
  background-color: lightblue;
  background-color: var(--globalColor);
}

可以发现，已经对语法进行降级了。

另外：PostCSS 中包含 Less 和 Sass 的插件，可以之间使用对应的插件完成 Less 和 Sass 的功能。不过这里两个插件已经不维护了。PostCSS 现在的流程为：先让 Less 和 Sass 处理，然后把处理结果交给 PostCSS 进行处理。所以业内就产生了一个说法：PostCSS 是后处理器，Less 和 Sass 是前处理器。