如何使用插件来实现CSS任务的自动化

迪鲁宾
158 阅读12分钟

PostCSS是一个Node.js工具，使用JavaScript插件对你的样式进行转换。

它在NPM上每周产生的下载量比其他CSS预处理程序如Sass、Less和Stylus的总和还要多。

trend

PostCSS与其他CSS预处理器的下载趋势比较

在这篇文章中，我们将讨论。

  • 什么是PostCSS？
  • PostCSS的特点和优势
  • 一些流行的PostCSS插件
  • 如何设置PostCSS的配置

什么是PostCSS？

PostCSS是一个JavaScript工具，它可以将你的CSS代码转化为抽象语法树（AST），然后提供一个API（应用编程接口），用于使用JavaScript插件来分析和修改它。

PostCSS提供了一个庞大的插件生态系统，以执行不同的功能，如linting、minifying、插入供应商前缀和其他许多事情。

尽管它的名字很好，但它既不是一个后处理程序，也不是一个预处理程序，它只是一个 转译器 它将一个特殊的PostCSS插件语法变成了一个Vanilla CSS。你可以把它看成是 Babel 的工具。

你可以将PostCSS与现有的预处理器如Sass、Less和Stylus结合使用。或者你可以把它作为所有这些处理器的替代品，因为它具有所有需要的功能，可以单独使用。

你可能已经在不知不觉中使用了PostCSS。它被用于流行的Autoprefixer插件中，该插件用于自动为需要前缀的CSS属性添加供应商前缀。

PostCSS还被Vite和Next.js等其他技术使用，以及作为PostCSS插件的CSS框架TailwindCSS。

PostCSS的特点和优点

  • PostCSS是完全可定制的，因此你可以只使用你的应用程序所需的插件和功能。
  • 与其他预处理器相比，它的构建时间也很快。

1_WVCihSMXXK0xkCw2a3g8iQ

与PostCSS相比，不同的CSS预处理器的构建时间不同

  • 如果你愿意，你可以编写你自己的自定义插件。而且，你可以将它与普通的CSS一起使用，也可以与Sass等其他预处理程序一起使用。

PostCSS是关于插件的（就其本身而言，它只是一个API）。它有一个由356个插件组成的生态系统（截至本文写作时）。每个插件都是为一个特定的任务而创建的。

你可以使用PostCSS官方GitHub页面上的插件目录来浏览这些插件，或者使用这个PostCSS插件的可搜索目录。

在开始学习代码之前，我强烈建议你遵循以下步骤：

  1. 下载或分叉以下的 Postcss-tutorial 仓库到你的机器上，并尝试跟着做。(确保阅读 README.md 文件。)
  2. 安装 PostCSS语言支持 插件 如果你使用的是Visual Studio Code编辑器，那么你的编辑器可以识别任何新的语法，并停止给你错误（如果你使用的是其他代码编辑器，跳过这一步）。

流行的PostCSS插件

PostCSS导入

Postcss-import是最基本、最重要的插件之一。它可以让我们将CSS文件导入其他文件。

要检查如何使用这个插件，请到postcss-tutorial资源库的src/style.css ：

@import './components/comp1.css';
@import './components/comp2.css';

你可以看到，它与我们在Sass中使用@import方法的方式非常相似。

注意： postcss-import 与本地CSS中的导入规则不同。你应该避免使用本地CSS中的导入规则，因为它可以防止样式表被同时下载，从而影响加载速度和性能。

浏览器必须等待每一个导入的文件被加载，而不是一次就能加载所有的CSS文件。

自动修饰器（Autoprefixer

这是最流行的PostCSS插件之一。你用它来解析和添加供应商的前缀，如-webkit,-moz, 和-ms ，使用Can I Use网站上的值来添加到CSS规则中。

我们使用Can I Use网站来查看哪些浏览器的版本支持某个CSS功能。这有助于我们确定是否需要添加前缀。

Autoprefixer使用Browserslist，所以你可以通过查询指定你想在项目中针对的浏览器。

我们可以在package.json文件中使用 "browserslist "键来配置我们的Browserslist。

 "browserslist": [ 
     "defaults"  
 ]

上面的defaults 查询是一个简短的版本:

  • > 0.5% 全球使用率至少为0.5%的浏览器。
  • last 2 versions 每个浏览器的最近两个版本。
  • Firefox ESR 最新的Firefox扩展支持版本。
  • not dead 过去24个月内获得官方支持或更新的浏览器。

或者我们可以在根目录下使用一个.browserslistrc 文件，在里面输入我们的配置:

defaults

为了测试这个插件，我们在src/components/comp2.css 文件中添加了一些需要一些前缀的CSS规则:

label {
  user-select: none;
}

::selection {
  color: white;
  background: blue;
}

::placeholder {
  color: gray;
}

根据我们之前的 "browserslist "设置，最终的输出结果将是:

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（如嵌套和自定义媒体查询），将其转换为浏览器能够理解的香草CSS。

它有一个stage 选项，可以根据CSS功能在成为网络标准的过程中的稳定性来决定哪些CSS功能要进行聚填。

stage 可以是0（实验）到4（稳定），或false。阶段2是默认的。

对于嵌套，我们需要使用阶段1:

module.exports = {
    plugins: [
        require('postcss-preset-env')({ stage: 1 })
    ],
}

另外，预设-env插件默认包括Autoprefixer插件和 [browsers](https://github.com/csstools/postcss-preset-env#browsers)选项将被自动传递给它。

在src/components/comp1.css ，我们使用的嵌套功能与我们在Sass预处理器中使用的相当相似:

article {
    background: purple;

    & .title {
        font-size: 6rem;
    }

    & li {
        list-style-type: none;
    }
}

由于今天的CSS不支持嵌套，我们需要转换上面的代码，使网页浏览器能够理解它。

下面的代码就是最终的结果:

article {
    background: purple
}

article .title {
        font-size: 6rem;
    }

article li {
        list-style-type: none;
    }

PostCSS 嵌套

如果我们只想 使用嵌套功能，那么这个插件是完美的选择，因为它产生的结果与前面的插件相同。

PostCSS混合器

混合器允许你定义可以在你的代码中重复使用的样式。

在我们的代码中，我们在src/components/comp1.css 文件中使用了一些混合素。

我们首先使用关键字@defin-mixin ，然后是混合器的名称来定义混合器。然后，我们通过在@mixin 关键字后面写上名称来使用它:

@define-mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul {
  @mixin reset-list;
}

混合器在今天的CSS中不被支持，所以它们需要被编译成Vanilla CSS。

最后的代码将是:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

Stylelint

这是一个帮助我们在破坏用户界面（UI）之前避免代码中的错误的CSS接口器。

它可以通过多种方式进行配置。其中一种通过使用package.json 中的stylelint 属性，如下所示:

"stylelint": {
    "rules": {
      "color-no-invalid-hex": true
    }
  }

在stylelint 里面我们有多个选项可以配置。这里我们只讨论 "规则 "选项，它可以让你定义interlet应该寻找的规则，并在不遵循这些规则时给出错误。

"color-no-invalid-hex": true ，如果为一个给定的CSS属性提供了一个无效的十六进制值作为颜色，规则会在终端给出一个错误:

invalid-1

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元素的默认样式，同时它们也纠正了错误和常见的浏览器不一致的地方。

这个插件依赖于你为 "**browserslist"**来显示HTML元素的正确样式。下面是一个例子。

如何设置PostCSS

要开始使用PostCSS，我们首先需要用这个命令在全球范围内安装它和它的命令行界面（CLI）:

npm i -g postcss-cli
  • -g 在全局范围内下载它

然后用以下命令在本地安装PostCSS:

npm i -D postcss
  • -D 是 的简称，将已安装的软件包保存为dev dependencies。--save-dev

要开始使用PostCSS，我们需要至少下载一个插件。

如果你正在使用postcss-tutorialrepo进行学习，你可以简单地运行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文件的 "scripts "中，我们需要输入以下内容:

"postcss:watch": "postcss src/style.css --use postcss-import 
--dir public --watch"

上述命令将创建一个名为 "public "的新目录，其中包含我们最终的Vanilla CSS文件，其名称与源文件（style.css）相同。

如果我们希望输出文件的名称与源文件的名称不同，我们需要用-o public/<file-name> 替换--dir public 。

比如说：-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预处理器中非常受欢迎。

你可以把它作为一个独立的工具，也可以和其他现有的预处理器一起使用。

你什么时候使用它，如何使用（独立使用还是结合使用），取决于你的项目需求。

现在是你去发现它提供的各种插件并开始玩弄它的时候了。编码愉快 :)

avatar
文章
阅读
粉丝