CSS – PostCSS

前言

我第一次接触 PostCSS 是在学 Tailwind CSS 的时候. 它类似 JavaScript 的 Babel.

我没有用过 Babel, 因为 TypeScript 用的早. PostCSS 也是这样, Sass 用的早.

PostCSS 具备一部分 (甚至大部分 Sass 的能力), 而且还多了其它能力. 所以会看到一些人纷纷从 Sass 转到了 PostCSS.

但据我个人的经验. 我更推荐 2 个一起用. 尤其是在 Production 的时候. 可以参考我从前写的 Webpack 学习笔记.

写代码一样用 Sass, 然后 transpile 成 CSS 后再用 PostCSS 加工 (e.g. 向后兼容).

这篇只是一个简单的 Get Started 体验一下单独使用 PostCSS.

参考

YouTube – Learn how to power-up your CSS with PostCSS

YouTube – Learn PostCSS In 15 Minutes

官方网站

Simple Start

创建项目

PostCSS 不像 Sass 那样可以安装 VS Code 插件, 它需要使用 Node.js + PostCSS CLI 然后跑 command 来启动.

先创建 folder 初始化 Node.js 项目

mkdir postcss-get-started
cd postcss-get-started
yarn init -2

我习惯用 yarn package manager, 换成 npm init 也是可以的.

安装 PostCSS CLI

yarn add postcss postcss-cli --dev

安装 postcss 和 postcss-cli. 我们先学 cli 版本, 下面我还会教 gulp 的版本.

Setup Files

package.json 启动 script

{
  "scripts": {
    "start": "postcss style.css -o dist/style.css --watch"
  }
}

style.css

body {
  background-color: pink;
}

command

yarn start

效果

至此 PostCSS 就算运行起来了. 但是它还没有任何作用. 这是因为 PostCSS 是基于插件的. 任何对 CSS 的处理都需要用插件来完成.

常用插件

postcss-preset-env

这个插件是最重要的, 也是我唯一使用的. 它的作用就是向后兼容. 比如

@media (width >= 1024px) {}

// will transpile to
@media (min-width : 1024px) {}

Sass 做不到这种 transpile 的效果. 这时就可以靠 PostCSS 来完成了.

安装

yarn add postcss-preset-env --dev

setup postcss.config.js, 引入 plugin

const postcssPresetEnv = require("postcss-preset-env");

module.exports = {
  plugins: [
    postcssPresetEnv({ stage: 1 }),
  ],
};

setup browserlist (在 package.json)

{
  "browserslist": [
    "since 2021 and not ios < 15"
  ]
}

效果

解释:

1. postcssPresetEnv({ stage: 1 }) 里的 stage 代表 CSS 支持的状态. 0 是 experimental, 4 是 stable. 它的 default 是 2, 我通常放 1.

2. 必须要提供 browserslist, 这样它才知道需不需要 Polyfill. 关于 browserlist 可以参考:

官方网站

Online Testing Tools

browserslist 是什么？看这篇就够了

browserslist详解

它就是一个 config, 声明项目支持什么 browser version. 它可以用一些很牛的表达式

比如 since 2021 and not < ios 15, 表示要支持 2021 年以后版本的 browser 同时 IOS safari 必须超过 v15. 这个表达式的数据是依据 Can i use 网站的

通过在线工具, 我们还可以查看表达式最终匹配支持的 browser 哦

postcss-import

这个插件可以让 PostCSS transplie 的时候把 import 的 CSS bundle 在一起.

安装

yarn add postcss-import --dev

setup postcss.config.js, 引入 plugin

const postcssPresetEnv = require("postcss-preset-env");
const postcssImport = require("postcss-import");

module.exports = {
  plugins: [
    postcssPresetEnv({ stage: 1 }),
    postcssImport(),
  ],
};

reset.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

style.css (import reset.css)

@import "./reset.css";

body {
  background-color: pink;
}

效果

最终 reset.css 被 bundle 到了 dist/style.css 里头

postcss-nested

和 Sass 的 nested 是一样的. 所以说 PostCSS 具有替代 Sass 的能力.

安装 > plugin > 效果 和上面的雷同, 我就不讲解了.

注: 在 VS Code, .css 写 nested 虽然不会语法报错, 但它也不太智能. 不会比写 Sass 的体验好.

postcss-simple-vars

和 Sass 的 Variable 是一样的.

postcss-mixins

和 Sass 的 mixins 功能是一样的. 但是语法不同

postcss.config.js (注意: mixin 必须在 nested 和 variable 之前哦)

const postcssPresetEnv = require("postcss-preset-env");
const postcssImport = require("postcss-import");
const postcssMixins = require("postcss-mixins");
const postcssNested = require("postcss-nested");
const postcssSimpleVars = require("postcss-simple-vars");

module.exports = {
  plugins: [
    postcssPresetEnv({ stage: 1 }),
    postcssImport(),
    postcssMixins(), // 必须 before nested 和 variable
    postcssNested(),
    postcssSimpleVars(),
  ],
};

style.css

@import "./reset.css";

/* variable */
$size: 100px;

/* mixin 声明方法 */
@define-mixin method-name $color, $size: 100px {
  background-color: $color;
  width: $size;
  @mixin-content;
}

body {
  background-color: pink;

  /* nested */
  .container {
    width: $size;
  }

  /* mixin 调用方法 */
  @mixin method-name red, 50px {
    height: 100%;
  }
}

效果

postcss-font-magician

我在 Webpack 学习笔记 介绍过这个插件, 虽然已经停更了, 但 for 小网站还是适用的.

安装

yarn add postcss-font-magician --dev

config

postcss([
  postcssPresetEnv({ stage: 1 }),
  postcssFontMagician({
    custom: {
      Montserrat: {
        variants: {
          normal: {
            300: {
              url: {
                woff2: "/src/fonts/montserrat-v25-latin-300.woff2",
                woff: "/src/fonts/montserrat-v25-latin-300.woff",
              },
            },
            400: {
              url: {
                woff2: "/src/fonts/montserrat-v25-latin-regular.woff2",
                woff: "/src/fonts/montserrat-v25-latin-regular.woff",
              },
            },
            500: {
              url: {
                woff2: "/src/fonts/montserrat-v25-latin-500.woff2",
                woff: "/src/fonts/montserrat-v25-latin-500.woff",
              },
            },
            700: {
              url: {
                woff2: "/src/fonts/montserrat-v25-latin-700.woff2",
                woff: "/src/fonts/montserrat-v25-latin-700.woff",
              },
            },
          },
        },
      },
    },
    display: "swap",
  }),
])

效果

只要 CSS 中有时用到对应的字体

transpile 出来的 CSS 自动包含 @font-face 代码

cssnano

nano 的用途是 minifier css. 很久以前我写的 Webpack 学习笔记 – Optimization 里头用的 css-minimizer-webpack-plugin 底层就是用了 cssnano 做 minify.

用法很简单

postcss([
  require("postcss-preset-env")({ stage: 1 }),
  require("postcss-import")(),
  require("postcss-mixins")(),
  require("postcss-nested")(),
  require("postcss-simple-vars")(),
  require("cssnano")({
    preset: ["default", { cssDeclarationSorter: false }],
  }),
])

效果

左边是没有使用 nano 的结果, 右边是用了 nano 的结果.

它做了几件事, 比如, 去掉了空格空行, 去掉了 column-gap: initial. 还有它对属性做了排序. column-gap 被移到 gap 前面了.

这个改动通常是不好的. 因为 CSS 是讲究属性顺序的, 后面的 override 前面的. 所以这种排序很可能会破坏表达.

通过 cssDeclarationSorter: false 可以关掉它. 这样它就不会乱排了. 参考: Stack Overflow – cssnano is reordering overridden properties

小总结

PostCSS 的插件很强, 理论上可以替代任何 Sass 的功能的. 但前提是要有人去贡献这些插件.

当然这是不可能的, 哪来这么多贡献呢 ... /.\ 所以我个人还是觉得 Sass + PostCSS 一起用才实际.

Sass + PostCSS with Gulp

在搭建测试环境时, 我们不喜欢用 bundle tool, Webpack 也好, Vite 也好都算比较上层的东西.

我们更喜欢用底层的 Gulp, 这样可以憋开不必要的东西进来搅局. 这里教大家用 Gulp 搭建简单的 Sass + PostCSS 测试环境.

Gulp 基础参考:

对比webpack，你更应该先掌握gulp【10分钟教你彻底掌握gulp】

Stack Overflow – Pass Parameter to Gulp Task

Gulp 官网

YouTube – Learn PostCSS: How To Setup PostCSS With Gulp

Gulp PostCSS

安装 Gulp 和 gulp-postcss

npm install --global gulp-cli
yarn add gulp --dev
yarn add gulp-postcss --dev
yarn add gulp-sourcemaps --dev

gulpfile.js

// import 需要用到的 gulp 方法
const { src, dest, watch: gulpWatch } = require("gulp");

// postcss 需要的 gulp plugin
const postcss = require("gulp-postcss");
const sourcemaps = require("gulp-sourcemaps");

const cssPath = "style.css";
// 定义 task
function postcssTask() {
  return src(cssPath) // read files
    .pipe(sourcemaps.init())
    .pipe(
      // 用 postcss 处理 file stream
      postcss([
        require("postcss-preset-env")({ stage: 1 }),
        require("postcss-import")(),
        require("postcss-mixins")(),
        require("postcss-nested")(),
        require("postcss-simple-vars")(),
      ])
    )
    .pipe(sourcemaps.write("."))
    .pipe(dest("dist/")); // write files
}

// 定义 yarn run gulp 默认执行的 tasks
exports.default = function () {
  // 通过 yargs 获取 yarn run gulp --watch 的 --watch parameters
  var { watch } = require("yargs").argv;
  return watch ? gulpWatch(cssPath, postcssTask) : postcssTask();
};

// 如果不想使用 parameter 控制 watch, 也可以定义 2 个 tasks, 调用变成 yarn run gulp watch 和 yarn run gulp build
// exports.watch = function () {
//   gulpWatch(cssPath, postcssTask);
// }
// exports.build = postcssTask;

plugin 可以在 gulpfile.js 里, 也可以定义到 postcss.config.js. 但注意, postcss.config.js 这个 file 是一定要有的, 哪怕只是 module.exports = {}; 不然会报错哦

postcss.config.js

module.exports = {}

Run Command

"scripts": {
  "start": "gulp build" // or gulp watch or gulp --watch
},

Gulp Sass

看这篇 CSS – Sass & SCSS

Gulp PostCSS + Sass

gulpfile.js

const { src, dest, watch } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const sourcemaps = require("gulp-sourcemaps");
const postcss = require("gulp-postcss");
const postcssPresetEnv = require("postcss-preset-env");

function sassTask() {
  return src("./src/**/*.scss")
    .pipe(sourcemaps.init())
    .pipe(sass().on("error", sass.logError))
    .pipe(postcss([postcssPresetEnv({ stage: 1 })])) // 这里多了一个 postcss pipe
    .pipe(sourcemaps.write("."))
    .pipe(dest("src/"));
}

exports.build = sassTask;
exports.watch = function () {
  watch("./src/**/*.scss", sassTask);
};

run command

yarn run gulp build // or yarn run gulp watch

效果

Gulp Multi Tasks

这个和 PostCSS 没关系, 只是 Gulp 的功能之一. 随便介绍一下 (内容多一点才考虑开一篇 Gulp 的)

Stack Overflow – Gulpjs combine two tasks into a single task

这里给一个 SVG sprite 的例子

const { src, dest, parallel } = require("gulp");
const svgSprite = require("gulp-svg-sprite");

function spriteSvgIconTask() {
  return src("src/icons/*.svg")
    .pipe(
      svgSprite({
        mode: {
          symbol: true,
        },
      })
    )
    .pipe(dest("src/icons/svg-icon-sprite"));
}

function spriteSvgIconTask2() {
  return src("src/stooges-icons/*.svg")
    .pipe(
      svgSprite({
        mode: {
          symbol: true,
        },
      })
    )
    .pipe(dest("src/stooges-icons/svg-icon-sprite"));
}

exports.spriteSvgIcon = parallel(spriteSvgIconTask, spriteSvgIconTask2);

parallel 是平行执行, series 是顺序.

当 Gulp 遇上 .cjs

当我们把 module 换成 ES Module 后, 旧版本就得改成 .cjs

这时会发现 gulp command 失效

因为它默认查找的 file 是 .js 而不是 .cjs. 参考: Github Issue – Add support for gulpfile.cjs

解决方法是加 options

gulp spriteSvgIcon -f gulpfile.cjs