「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」。
什么是 PostCSS？
PostCSS 是一种 JavaScript 工具，可将你的 CSS 代码转换为抽象语法树 (AST)，然后提供 API（应用程序编程接口）用于使用 JavaScript 插件对其进行分析和修改。
PostCSS 提供了一个庞大的插件生态系统来执行不同的功能，如 linting、缩小、插入供应商前缀和许多其他事情。
它既不是后处理器也不是预处理器，它只是一个将特殊的PostCSS插件语法转换为 Vanilla CSS 的转译器。你可以将其视为 CSS 的Babel工具。
你可以将 PostCSS 与现有的预处理器（如 Sass、Less 和 Stylus）结合使用。或者你可以将其用作所有这些的替代品，因为它具有单独使用所需的所有功能。
你可能已经在不知不觉中使用过 PostCSS。它用于流行的 Autoprefixer 插件，该插件用于自动将供应商前缀添加到需要它们的 CSS 属性中。
PostCSS 也被其他技术使用，如 Vite 和 Next.js，以及 CSS 框架TailwindCSS，它是一个 PostCSS 插件。
PostCSS 的特点和优势
- PostCSS 是完全可定制的，因此你只能使用应用程序所需的插件和功能。
- 与其他预处理器相比，它还产生更快的构建时间。
与 PostCSS 相比，不同 CSS 预处理器的构建时间不同
- 如果需要，你可以编写自己的自定义插件。你可以将它与常规 CSS 以及其他预处理器（如 Sass）一起使用。
PostCSS 是关于插件的（就其本身而言，它只是一个 API）。它有一个由 356 个插件组成的生态系统（在撰写本文时）。每个插件都是为特定任务创建的。
你可以使用PostCSS GitHub 官方页面上的插件目录或使用PostCSS 插件的可搜索目录浏览插件。
在开始编写代码之前，我强烈建议莫按照以下步骤操作：
- 将以下postcss-tutorial 存储库下载或 fork 到你的计算机并尝试跟随。（确保阅读 README.md 文件。）
- 如果你使用 Visual Studio 代码编辑器，请安装PostCSS 语言支持 插件，以便您的编辑器可以识别任何新语法并停止给您错误（如果您使用其他代码编辑器，请跳过此步骤）。********
流行的 PostCSS 插件
PostCSS 导入
使用的基本和最重要的插件之一是postcss-import。它允许我们将 CSS 文件导入其他文件。
要检查如何使用此插件，请访问src/style.csspostcss-tutorial 存储库。
@import './components/comp1.css';
@import './components/comp2.css';
复制代码可以看到，它与我们在 Sass 中使用 @import 方法的方式非常相似。
**注意： **与原生 CSS 中的导入规则postcss-import不同您应该避免原生 CSS 中的导入规则，因为它可以防止样式表被同时下载，从而影响加载速度和性能。
浏览器必须等待每个导入的文件被加载，而不是一次加载所有的 CSS 文件。
自动前缀
这是最流行的 PostCSS 插件之一。您可以使用Can I Use网站中的值来解析和添加供应商前缀（如-webkit、-moz和）并将其添加-ms到 CSS 规则中。
我们使用 Can I Use 网站查看哪些浏览器的版本支持 CSS 功能。这有助于我们确定是否需要添加前缀。
Autoprefixer 使用Browserslist，因此你可以通过查询指定要在项目中定位的浏览器。
我们可以使用“browserslist”键在 package.json 文件中配置我们的 Browserslist：
"browserslist": [
"defaults"
]
复制代码上面的defaults查询是以下内容的简短版本：
> 0.5%全球使用率至少为 0.5% 的浏览器。last 2 versions每个浏览器的最后 2 个版本，Firefox ESR最新的Firefox 扩展支持版本.,not dead在过去 24 个月内获得官方支持或更新的浏览器。
或者我们可以使用.browserslistrc根目录中的文件，并在其中输入我们的配置。
defaults
复制代码为了测试这个插件，我们在文件中添加了一些需要前缀的 CSS 规则src/components/comp2.css：
label {
user-select: none;
}
::selection {
color: white;
background: blue;
}
::placeholder {
color: gray;
}
复制代码根据我们之前的“浏览器列表”设置，最终输出将是：
label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-moz-selection {
color: white;
background: blue;
}
::selection {
color: white;
background: blue;
}
::-moz-placeholder {
color: gray;
}
:-ms-input-placeholder {
color: gray;
}
::placeholder {
color: gray;
}
复制代码PostCSS 预设环境
这个插件使我们能够在我们的代码中使用现代 CSS（如嵌套和自定义媒体查询），方法是将其转换为浏览器可以理解的 Vanilla CSS。
它有一个stage选项，可以根据在实现为 Web 标准的过程中的稳定性来确定要填充哪些 CSS 功能。
stage可以是 0（实验性）到 4（稳定），也可以是 false 。第 2 阶段是默认设置。
对于嵌套，我们需要使用阶段 1。
module.exports = {
plugins: [
require('postcss-preset-env')({ stage: 1 })
],
}
复制代码此外，preset-env 插件默认包含Autoprefixer插件，并且该browsers选项将自动传递给它。
在src/components/comp1.css我们使用的嵌套特性与我们在 Sass 预处理器中使用的非常相似：
article {
background: purple;
& .title {
font-size: 6rem;
}
& li {
list-style-type: none;
}
}
复制代码由于现在的 CSS 不支持嵌套，所以我们需要对上面的代码进行转换，以便 Web 浏览器能够理解它。
以下代码是最终结果：
article {
background: purple
}
article .title {
font-size: 6rem;
}
article li {
list-style-type: none;
}
复制代码PostCSS 嵌套
如果我们只想使用嵌套功能，那么这个插件是完美的选择，因为它产生与前一个插件相同的结果。
PostCSS 混合
Mixin 允许您定义可以在整个代码中重复使用的样式。
在我们的代码中，我们在src/components/comp1.css文件中使用了一些 mixin。 我们首先使用关键字@defin-mixin后跟 mixin 名称来定义 mixin。@mixin然后我们通过在关键字后面写名字来使用它。
@define-mixin reset-list {
margin: 0;
padding: 0;
list-style: none;
}
nav ul {
@mixin reset-list;
}
复制代码现在的 CSS 不支持 Mixin，因此需要将它们编译为 Vanilla CSS。
最终代码将是：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
复制代码样式线
这是一个 CSS linter，它可以帮助我们避免代码中的错误，以免它们破坏我们的用户界面 (UI)。
它可以通过多种方式进行配置。其中之一通过使用如下stylelint属性：package.json
"stylelint": {
"rules": {
"color-no-invalid-hex": true
}
}
复制代码在里面stylelint我们有多个选项可以配置。在这里，我们将仅介绍“规则”选项，该选项可让您定义 linter 应查找的规则，并在不遵循这些规则时给出错误。
如果为给定的"color-no-invalid-hex": trueCSS 属性提供了无效的十六进制值作为颜色，则规则会在终端中给出错误。
Styleint linter 在第 11 行作为颜色提供的无效十六进制值给出错误。
注意： 默认情况下不启用任何规则，也没有默认值。您必须明确配置每个规则以将其打开。
Cssnano
这是一个缩小器，用于尽可能减少最终的 CSS 文件大小，以便您的代码为生产环境做好准备。
某些部分将被更改以尽可能减小大小，例如删除不必要的空格、新行、重命名值和变量、合并在一起的选择器等等。
所以这是我们在缩小过程之前的最终 CSS 代码：
* {
padding: 0;
margin: 0;
}
article {
background: purple
}
article .title {
font-size: 6rem;
}
article li {
list-style-type: none;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-family: sans-serif, Calibri;
font-size: 16px;
}
label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-moz-selection {
color: white;
background: blue;
}
::selection {
color: white;
background: blue;
}
::-moz-placeholder {
color: gray;
}
:-ms-input-placeholder {
color: gray;
}
::placeholder {
color: gray;
}
复制代码在缩小过程之后，我们准备好用于生产环境的最终 CSS 代码将是这样的：
*{margin:0;padding:0}article{background:purple}article .title{font-size:6rem}article li{list-style-type:none}nav ul{list-style:none;margin:0;padding:0}body{font-family:sans-serif,Calibri;font-size:16px}label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::-moz-selection{background:blue;color:#fff}::selection{background:blue;color:#fff}::-moz-placeholder{color:gray}:-ms-input-placeholder{color:gray}::placeholder{color:gray}
复制代码PostCSS 标准化
这个插件允许你使用流行的库normalize.css或sanitize.css的某些部分。 这些 CSS 库提供一致的、跨浏览器的 HTML 元素默认样式，还纠正了错误和常见的浏览器不一致。
这个插件依赖于你提供的值来显示 HTML 元素的正确样式。这是一个例子。"browserslist"
如何设置 PostCSS
要开始使用 PostCSS，我们首先需要使用以下命令全局安装它及其命令行界面(CLI)：
npm i -g postcss-cli
复制代码-g全球下载。
然后使用以下命令在本地安装 PostCSS：
npm i -D postcss
复制代码-D``--save-dev将已安装的包保存为开发依赖项的缩写。
要开始使用 PostCSS，我们需要至少下载一个插件。
如果您正在使用postcss-tutorial 存储库，您可以简单地运行npm install以下载所有包和依赖项。
使用 PostCSS CLI 设置 PostCSS
需要在终端中运行的命令的一般语法是：
postcss [input.css] [OPTIONS] [-o|--output output.css] [--watch|-w]
postcss <input.css> [OPTIONS] --dir <output-directory> [--watch|-w]
复制代码我们可以直接在终端中运行以下命令：
postcss src/style.css --use postcss-import --dir public --watch
复制代码该--use选项列出了我们正在使用的插件。
该--watch选项监视文件的任何更改并重新编译它们。
通过 package.json 文件中的 NPM 脚本设置 PostCSS
在“脚本”的 package.json 文件中，我们需要输入以下内容：
"postcss:watch": "postcss src/style.css --use postcss-import
--dir public --watch"
复制代码上面的命令将创建一个名为“public”的新目录，其中包含我们最终的 Vanilla CSS 文件，该文件与源文件 (style.css) 同名。
如果我们希望输出文件的名称与源文件名不同，我们需要替换--dir public为-o public/<file-name>.
比如： -o public/main.css.
我们可以使用不同的选项配置我们的命令在 PostCSS CLI 中运行以获得我们想要的结果。
现在要运行上面的命令，我们输入npm run <command name>终端。（我们<command name>是postcss:watch，你可以选择任何你想要的名字）。
随着我们的项目变得越来越大，我们更有可能添加更多插件。对于每个使用的插件，我们需要在上面命令中的关键字后面写下它的名称--use，这使得它非常长并且不是一个好习惯。
另一种解决方案是创建一个 postcss.config.js 文件。
通过设置 PostCSS 配置文件来设置 PostCSS
在项目的根目录中，创建一个文件并将其命名为postcss.config.js。
里面的代码如下所示：
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-mixins'),
require("stylelint"),
require('postcss-preset-env')({ stage: 1 }),
require('cssnano'),
],
}
复制代码在 plugins 数组中，我们添加了我们的插件。
注意： 在我们的列表顶部添加 postcss-import 插件非常重要，因为它是文档所必需的。
在我们的 package.json 文件中运行 PostCSS 的命令需要更改为：
"postcss:watch": "postcss src/style.css --dir public --watch"
复制代码如您所见，唯一需要更改的是删除该--use选项，因为我们提到的插件列表现在是一个单独的文件。
使用任务运行器（或模块捆绑器）设置 PostCSS
PostCSS 可以设置为与Gulp、Grunt等各种任务运行器以及Rollup和Webpack等模块捆绑器一起使用。 在本节中，我们将看到如何为 PostCSS 设置 Grunt。
首先，我们需要在本地将 grunt 安装到“dev”依赖项中：
npm i -D grunt
复制代码然后全局安装 grunt-cli：
npm install -g grunt-cli
复制代码现在我们需要在项目的根目录中创建一个文件并将其命名为Gruntfile.js。
然后我们需要安装一个特定的插件@lodder/grunt-postcss让我们通过以下命令使用 Grunt 运行 PostCSS：
npm i -D @lodder/grunt-postcss
复制代码在initCnfig函数内部，我们设置了 PostCSS 配置。
module.exports = function(grunt) {
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-import')(),
require('postcss-mixins'),
require("stylelint"),
require('postcss-preset-env')({ stage: 1 }),
require('cssnano')(),
]
},
dist: {
src: 'src/style.css',
dest: 'public/style.css'
}
}
})
grunt.loadNpmTasks('@lodder/grunt-postcss');
}
复制代码在这里，我们将坚持运行 PostCSS 的基本最低要求，即：
- 在
processors数组中调用我们的插件。 - 在对象中设置源文件和目标文件
dist。
如需更多配置，您可以随时查看@lodder/grunt-postcss的官方文档。
要完成我们的配置，我们需要使用该grunt.loadNpmTasks方法加载我们的插件。
最后为了运行我们的 Grunt 任务，我们输入：
grunt postcss
复制代码结论
PostCSS 自 2015 年以来一直存在，它在 CSS 预处理器中非常流行。
你可以将其用作独立工具或与其他现有预处理器结合使用。
何时使用它以及如何（独立或结合使用）取决于你的项目需求。