前言

css预处理器在目前的开发中是很受欢迎的，但是它们也有一些缺点。在今天的介绍中，我们将探讨postcss的优势以及它是如何工作的，还有其一些丰富而且实用的插件。

css预处理器的价值和局限性

大多数CSS开发人员都非常熟悉css预处理器，像sass、less、stylus等，以及伴随着这些预处理器出现的一些概念，比如file partials, nesting, variables 和 mixins等。随着css的发展，预处理器的一些功能正在渐渐的被原生css所实现，但是还有大量非常实用的功能对于开发者开发大型项目以及维护保持代码的一致性方面是及其有用的。

你可能很难想象没有 CSS 预处理器的生活，但它也有缺点：

预处理器不可扩展或受限。大多数预处理器都是一个黑匣子，它为您提供一组特定的受支持功能。可以编写自定义功能，但超出该工具范围的功能仍然是不可能的——例如将 SVG 内联为背景图像。
同样，您不能阻止开发人员使用您宁愿避免使用的选项，例如@extend深度嵌套。Linting 可以提供帮助，但它不会阻止预处理器编译有效文件。
预处理器提供自己的语法。预处理器代码可能类似于 CSS，但没有浏览器可以原生解析使用预处理器编写的文件。他们的语法都不同，如果您的工具更改或不可用，您的代码将需要更新以使其可用。

好处超过了这些风险，但还有另一种选择……

什么是 PostCSS？

PostCSS不是一个预处理器（尽管它可以表现得像一个）。这是一个 Node.js 工具，它采用有效的 CSS 并对其进行增强。即使是那些使用 Sass、Less 或 Stylus 的人，也经常在初始 CSS 编译之后运行 PostCSS 步骤。您可能遇到过 PostCSS Autoprefixer 插件，它会自动将-webkit、-moz和-msvendor 前缀添加到需要它们的 CSS 属性中。

就其本身而言，PostCSS 什么都不做。它是一个解析器，它对 CSS 代码进行标记以创建抽象语法树。插件可以处理此树并相应地更新属性。一旦所有插件都完成了工作，PostCSS 会将所有内容重新格式化为字符串并输出到 CSS 文件。

大约有 350 个插件可用，大多数都执行单一任务，例如内联@import声明、简化calc()函数、处理图像资产、语法检查、缩小等。PostCSS插件目录中提供了更加用户友好的插件搜索。

PostCSS 的好处包括：

您从标准 CSS 开始。PostCSS 之于 CSS 就像Babel之于 JavaScript。它可以采用适用于最近浏览器的标准样式表并输出适用于任何地方的 CSS——例如，将较新的inset属性转换回top、right、bottom和left属性。随着时间的推移，随着更多浏览器支持inset。
诚然，一些插件允许您解析不是标准 CSS 的类似预处理器的语法，但您不必使用它们。
使用您需要的插件和功能。PostCSS 是可配置的，你可以采用你需要的插件。例如，您可以支持file partials和嵌套，但不允许 Sass 中可用的变量、循环、混合、映射和其他功能。
为每个项目提供自定义配置。单个项目配置可以增强或减少其他地方使用的插件集。这些选项比任何预处理器都要多样化。
编写您自己的 PostCSS 插件。广泛的插件可用于扩展语法、解析未来属性、添加回退、优化代码、处理颜色、图像、字体，甚至用其他语言（如西班牙语和俄语）编写 CSS 。
万一你找不到你需要的东西，你可以用 JavaScript编写你自己的PostCSS 插件。
您可能已经在使用 PostCSS。如果您已经在运行诸如 AutoPrefixer 之类的 PostCSS 插件，您可能能够删除您的预处理器依赖项。PostCSS 不一定比使用预处理器更快或更轻量级，但它可以在一个步骤中处理所有 CSS 处理。

安装 PostCSS

PostCSS 需要Node.js，但本教程演示了如何从任何文件夹安装和运行 PostCSS——即使是那些不是 Node.js 项目的文件夹。您还可以使用 webpack 、Parcel、Gulp.js 和其他工具中的 PostCSS ，但我们将坚持使用命令行。

通过运行以下命令在您的系统上全局安装 PostCSS：

1	npm install -g postcss-cli

通过输入以下内容确保其正常工作：

1	postcss --help

安装你的第一个 PostCSS 插件

你至少需要一个插件来做任何实际的事情。PostCSS导入插件是一个不错的选择，它内联所有@import声明并将您的 CSS 合并到一个文件中。像这样全局安装它：

1	npm install -g postcss-import

要测试此插件，请打开或创建一个新的项目文件夹，例如cssproject，然后src为您的源文件创建一个子文件夹。创建一个main.css文件以加载所有部分：

1
2
3

/* src/main.css */
@import '_reset';
@import '_elements';

然后_reset.css在同一文件夹中创建一个文件：

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

跟着这个_elements.css文件：

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

通过传递输入 CSS 文件、插件列表--use和--output文件名，从项目的根文件夹运行 PostCSS：

1	postcss ./src/main.css --use postcss-import --output ./styles.css

如果您没有任何错误，以下代码将输出到styles.css项目根目录中的新文件：

/* src/main.css */
/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}
/* src/elements.css */
body {
  font-family: sans-serif;
}
label {
  user-select: none;
}
/* sourceMappingURL=data:application/json;base64,...

注意PostCSS可以在任何地方输出CSS文件，但输出文件夹必须存在；它不会为您创建文件夹结构。

启用和禁用源映射

默认情况下会输出内联源映射。在 HTML 页面中使用编译后的 CSS 文件时，在浏览器的开发人员工具中检查它会显示原始src文件和行。例如，查看<body>样式将突出显示src/_elements.css第 2 行而不是styles.css第 8 行。

您可以通过在命令中添加--map（或-m）开关来创建外部源映射。postcss除了 CSS 文件更干净并且浏览器不需要加载源映射之外，几乎没有什么好处，除非开发者工具是打开的。

您可以使用删除源映射--no-map。在为生产部署输出 CSS 文件时始终使用此选项。

安装和使用 AutoPrefixer 插件

Autoprefixer插件通常是开发人员第一次接触 PostCSS 。它根据浏览器使用情况和caniuse.com定义的规则添加供应商前缀。供应商前缀在现代浏览器中使用较少，这些浏览器将实验性功能隐藏在标志后面。但是，仍有一些属性，例如user-select 需要-webkit-、-moz-和-ms-前缀。

使用以下命令全局安装插件：

1	npm install -g autoprefixer

然后将其作为命令中的另一个--use选项引用postcss：

1	postcss ./src/main.css --use postcss-import --use autoprefixer --output ./styles.css

检查第 11 行的声明styles.css以查看供应商前缀属性：

label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

AutoPrefixer 使用browserslist模块来确定要添加哪些浏览器前缀。默认值为：

> 0.5%：市场份额至少为 0.5% 的浏览器
last 2 versions：这些浏览器的最后两个版本
Firefox ESR: 包括 Firefox 扩展支持版本
not dead: 任何未停产的浏览器

您可以通过创建.browserslistrc文件来更改这些默认值。例如：

> 2%

或者，您可以在 Node.js 项目中添加一个”browserslist”数组。package.json例如：

1
2
3

"browserslist": [
   "> 2%"
]

使用 cssnano 缩小 CSS

cssnano 通过去除空格、注释和其他不必要的字符来缩小 CSS。结果会有所不同，但您可以预期文件减少 30%，您可以将其部署到生产服务器以获得更好的网页性能。

全局安装 cssnano：

1	npm install -g cssnano

然后将其添加到您的postcss命令中。我们还将包括--no-map禁用源地图：

1	postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css

这会将 CSS 文件减少到 97 个字符：

1	*{margin:0;padding:0}body{font-family:sans-serif}label{-webkit-user-select:none;user-select:none}

源文件更改时自动构建

--watch当任何源文件发生更改时，PostCSS选项会自动构建您的 CSS 文件。您可能还想添加在--verbose构建发生时报告的开关：

1	postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css --watch --verbose

您的终端将显示Waiting for file changes. 对任何文件进行更改并styles.css重新构建。PostCSS 也会报告任何问题，例如语法错误。

要完成，请按Ctrl + C或Cmd + C在终端中。

创建 PostCSS 配置文件

随着您添加更多插件和选项，该postcss命令将变得冗长而繁琐。您可以创建一个 JavaScript 配置文件，该文件定义了所有选项，并且可以从逻辑上确定它是在开发环境中运行还是在生产环境中运行。

postcss.config.cjs在项目文件夹的根目录中创建一个名为的配置文件。请注意以下几点：

您可以将文件放在另一个文件夹中，但您需要--config <dir>在运行时指定postcss
您可以postcss.config.js用作文件名，但 PostCSS 可能在已”type”: “module”设置的Node.js 项目中失败package.json
将以下代码添加到postcss.config.cjs：

// PostCSS configruation
module.exports = (cfg) => {

  const devMode = (cfg.env === 'development');

  return {

    map: devMode ? 'inline' : null,
    plugins: [
      require('postcss-import')(),
      require('autoprefixer')(),
      devMode ? null : require('cssnano')()
    ]

  };

};

PostCSS 传递一个cfg包含命令行选项的对象。例如：

{
  cwd: '/home/yourname/cssproject',
  env: undefined,
  options: {
    map: { inline: true },
    parser: undefined,
    syntax: undefined,
    stringifier: undefined
  },
  file: {
    dirname: '/home/yourname/cssproject/src',
    basename: 'main.css',
    extname: '.css'
  }
}