PostCSS 常用插件 #

PostCSS 拥有丰富的插件生态，本文介绍最常用和实用的插件。

兼容性处理插件 #

Autoprefixer #

自动添加浏览器前缀，是最流行的 PostCSS 插件。

安装 #

bash

npm install autoprefixer --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: [
        '> 1%',
        'last 2 versions',
        'not dead'
      ]
    })
  ]
}

使用示例 #

css

/* 输入 */
.container {
  display: flex;
  user-select: none;
  backdrop-filter: blur(10px);
}

/* 输出 */
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

常用选项 #

选项	说明	默认值
overrideBrowserslist	浏览器列表	从 browserslist 配置读取
grid	是否添加 grid 前缀	false
flexbox	是否添加 flexbox 前缀	true
remove	是否移除过时的前缀	true

postcss-preset-env #

使用未来的 CSS 特性，自动转换为兼容代码。

安装 #

bash

npm install postcss-preset-env --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-preset-env')({
      stage: 2,
      features: {
        'nesting-rules': true,
        'custom-media-queries': true
      }
    })
  ]
}

Stage 说明 #

Stage	说明	示例特性
0	非官方草案	自定义选择器
1	编辑草案	嵌套规则
2	工作草案	自定义媒体查询
3	候选推荐	all 属性
4	推荐标准	CSS 变量

使用示例 #

css

/* 输入 */
:root {
  --primary: #007bff;
}

.button {
  color: var(--primary);
  
  &:hover {
    color: color(var(--primary) blackness(+20%));
  }
}

@custom-media --mobile (max-width: 480px);

@media (--mobile) {
  .container {
    width: 100%;
  }
}

/* 输出 */
:root {
  --primary: #007bff;
}

.button {
  color: var(--primary);
}

.button:hover {
  color: rgb(0, 94.8, 191);
}

@media (max-width: 480px) {
  .container {
    width: 100%;
  }
}

语法扩展插件 #

postcss-nested #

支持 CSS 嵌套语法。

安装 #

bash

npm install postcss-nested --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-nested')
  ]
}

使用示例 #

css

/* 输入 */
.nav {
  ul {
    list-style: none;
  }
  
  li {
    display: inline-block;
    
    a {
      text-decoration: none;
      
      &:hover {
        color: blue;
      }
    }
  }
}

/* 输出 */
.nav ul {
  list-style: none;
}

.nav li {
  display: inline-block;
}

.nav li a {
  text-decoration: none;
}

.nav li a:hover {
  color: blue;
}

postcss-simple-vars #

支持 Sass 风格的变量。

安装 #

bash

npm install postcss-simple-vars --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-simple-vars')({
      variables: {
        primary: '#007bff',
        secondary: '#6c757d',
        basePadding: '20px'
      },
      unknown: (node, name, result) => {
        node.warn(result, `Unknown variable $${name}`)
      }
    })
  ]
}

使用示例 #

css

/* 输入 */
$primary: #007bff;
$basePadding: 20px;

.button {
  color: $primary;
  padding: $basePadding;
}

/* 输出 */
.button {
  color: #007bff;
  padding: 20px;
}

postcss-mixins #

支持 Mixin 功能。

安装 #

bash

npm install postcss-mixins --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-mixins')({
      mixins: {
        clearfix: {
          '&::after': {
            content: '""',
            display: 'table',
            clear: 'both'
          }
        },
        borderRadius: (radius = '4px') => ({
          'border-radius': radius
        })
      }
    })
  ]
}

使用示例 #

css

/* 输入 */
@define-mixin button $color, $padding: 10px {
  background: $color;
  padding: $padding;
  border: none;
  cursor: pointer;
}

.primary {
  @mixin button blue;
}

.secondary {
  @mixin button gray, 15px;
}

.container {
  @mixin clearfix;
}

/* 输出 */
.primary {
  background: blue;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.secondary {
  background: gray;
  padding: 15px;
  border: none;
  cursor: pointer;
}

.container::after {
  content: "";
  display: table;
  clear: both;
}

postcss-import #

处理 CSS 导入。

安装 #

bash

npm install postcss-import --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import')({
      path: ['src/styles'],
      plugins: [],
      filter: path => !path.includes('node_modules')
    })
  ]
}

使用示例 #

css

/* variables.css */
:root {
  --primary: #007bff;
}

/* mixins.css */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* style.css */
@import 'variables.css';
@import 'mixins.css';

.button {
  color: var(--primary);
}

/* 输出 */
:root {
  --primary: #007bff;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.button {
  color: var(--primary);
}

优化压缩插件 #

cssnano #

CSS 压缩和优化工具。

安装 #

bash

npm install cssnano --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('cssnano')({
      preset: ['default', {
        discardComments: { removeAll: true },
        normalizeWhitespace: true,
        colormin: true,
        reduceIdents: false,
        zindex: false
      }]
    })
  ]
}

预设选项 #

javascript

// default 预设包含的优化
{
  calc: true,              // 计算 calc()
  colormin: true,          // 压缩颜色
  convertValues: true,     // 优化值
  discardComments: true,   // 删除注释
  discardDuplicates: true, // 删除重复规则
  discardEmpty: true,      // 删除空规则
  discardOverridden: true, // 删除覆盖规则
  mergeLonghand: true,     // 合并长属性
  mergeRules: true,        // 合并规则
  minifyFontValues: true,  // 压缩字体值
  minifyGradients: true,   // 压缩渐变
  minifyParams: true,      // 压缩 @ 规则参数
  normalizeCharset: true,  // 标准化 charset
  normalizeUrl: true,      // 标准化 URL
  reduceIdents: true,      // 压缩标识符
  reduceInitial: true,     // 压缩 initial
  reduceTransforms: true,  // 压缩 transform
  svgo: true,              // 优化 SVG
  uniqueSelectors: true    // 去重选择器
}

使用示例 #

css

/* 输入 */
.container {
  margin: 10px 10px 10px 10px;
  padding: 0px;
}

.button {
  color: #ff0000;
  background: #ffffff;
}

/* 输出 */
.container{margin:10px;padding:0}.button{color:red;background:#fff}

postcss-discard-comments #

删除 CSS 注释。

安装 #

bash

npm install postcss-discard-comments --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-discard-comments')({
      removeAll: true
    })
  ]
}

使用示例 #

css

/* 输入 */
/* This is a comment */
.button {
  color: red; /* inline comment */
}

/* 输出 */
.button {
  color: red;
}

功能增强插件 #

postcss-pxtorem #

将 px 单位转换为 rem。

安装 #

bash

npm install postcss-pxtorem --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 16,           // 根元素字体大小
      unitPrecision: 5,        // 小数位数
      propList: ['*', '!border*'],  // 转换的属性
      selectorBlackList: [],   // 忽略的选择器
      replace: true,           // 替换而不是添加
      mediaQuery: false,       // 是否转换媒体查询
      minPixelValue: 2         // 最小转换值
    })
  ]
}

使用示例 #

css

/* 输入 */
.container {
  font-size: 32px;
  padding: 16px;
  border: 1px solid #ccc;
}

/* 输出 */
.container {
  font-size: 2rem;
  padding: 1rem;
  border: 1px solid #ccc;
}

postcss-px-to-viewport #

将 px 转换为 vw 单位，用于移动端适配。

安装 #

bash

npm install postcss-px-to-viewport --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-px-to-viewport')({
      viewportWidth: 375,      // 设计稿宽度
      viewportHeight: 667,     // 设计稿高度
      unitPrecision: 5,        // 小数位数
      viewportUnit: 'vw',      // 转换单位
      selectorBlackList: [],   // 忽略的选择器
      minPixelValue: 1,        // 最小转换值
      mediaQuery: false,       // 是否转换媒体查询
      exclude: [/node_modules/] // 排除文件
    })
  ]
}

使用示例 #

css

/* 输入（设计稿 375px） */
.container {
  width: 375px;
  height: 200px;
  font-size: 16px;
}

/* 输出 */
.container {
  width: 100vw;
  height: 53.33333vw;
  font-size: 4.26667vw;
}

postcss-sprites #

自动生成 CSS 雪碧图。

安装 #

bash

npm install postcss-sprites --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-sprites')({
      spritePath: './dist/sprites',
      retina: true,
      hooks: {
        onUpdateRule: (rule, token, image) => {
          // 自定义输出规则
        }
      }
    })
  ]
}

使用示例 #

css

/* 输入 */
.icon-home {
  background-image: url('./icons/home.png');
}

.icon-user {
  background-image: url('./icons/user.png');
}

/* 输出 */
.icon-home {
  background-image: url('./dist/sprites/sprite.png');
  background-position: 0 0;
  width: 32px;
  height: 32px;
}

.icon-user {
  background-image: url('./dist/sprites/sprite.png');
  background-position: -32px 0;
  width: 32px;
  height: 32px;
}

rtlcss #

生成 RTL（从右到左）样式。

安装 #

bash

npm install rtlcss --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('rtlcss')
  ]
}

使用示例 #

css

/* 输入 */
.container {
  margin-left: 10px;
  padding-right: 20px;
  text-align: left;
  float: left;
}

/* 输出 */
.container {
  margin-right: 10px;
  padding-left: 20px;
  text-align: right;
  float: right;
}

代码检查插件 #

stylelint #

CSS 代码检查工具。

安装 #

bash

npm install stylelint postcss-stylelint --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('stylelint')({
      configFile: '.stylelintrc.json',
      fix: true
    })
  ]
}

json

// .stylelintrc.json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "color-hex-length": "short",
    "declaration-block-no-duplicate-properties": true,
    "no-descending-specificity": true,
    "property-no-unknown": true
  }
}

doiuse #

检查 CSS 浏览器兼容性。

安装 #

bash

npm install doiuse --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('doiuse')({
      browsers: ['> 1%', 'last 2 versions'],
      ignore: ['rem'],
      onFeatureUsage: (usageInfo) => {
        console.log(usageInfo.message)
      }
    })
  ]
}

其他实用插件 #

postcss-reporter #

美化 PostCSS 输出信息。

安装 #

bash

npm install postcss-reporter --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-reporter')({
      clearAllMessages: true,
      throwError: false
    })
  ]
}

postcss-browser-comments #

根据浏览器支持删除 CSS 注释。

安装 #

bash

npm install postcss-browser-comments --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-browser-comments')({
      browsers: ['> 1%', 'last 2 versions']
    })
  ]
}

使用示例 #

css

/* 输入 */
.button {
  display: flex;
}

/*! IE 11 only */
.button {
  display: -ms-flexbox;
}

/* 输出（不支持 IE 11） */
.button {
  display: flex;
}

postcss-normalize #

添加 CSS normalize 样式。

安装 #

bash

npm install postcss-normalize --save-dev

配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-normalize')
  ]
}

使用示例 #

css

/* 输入 */
@import "normalize.css";

.button {
  color: blue;
}

/* 输出（包含完整的 normalize.css 内容） */
/* normalize.css 内容... */

.button {
  color: blue;
}

插件组合示例 #

基础配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

开发环境配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-nested'),
    require('postcss-simple-vars'),
    require('autoprefixer'),
    require('postcss-reporter')
  ]
}

生产环境配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-nested'),
    require('postcss-simple-vars'),
    require('postcss-preset-env')({ stage: 2 }),
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' })
  ]
}

移动端适配配置 #

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-nested'),
    require('postcss-px-to-viewport')({
      viewportWidth: 375,
      unitPrecision: 5
    }),
    require('autoprefixer'),
    require('cssnano')
  ]
}

下一步 #

现在你已经了解了常用的 PostCSS 插件，接下来学习 Autoprefixer 详解深入了解最流行的插件！