「这是我参与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.css
postcss-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": true
CSS 属性提供了无效的十六进制值作为颜色,则规则会在终端中给出错误。
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 预处理器中非常流行。
你可以将其用作独立工具或与其他现有预处理器结合使用。
何时使用它以及如何(独立或结合使用)取决于你的项目需求。