来源：postcss 转换css

postcss类似babel，可以转换css

例如有一个css规则，用到了一些比较新的属性，可能无法被广泛地兼容：

1
2
3
4
.block {
  display: flex;
  color: oklch(61%, 0.2, 29);   /* 颜色空间(亮度 色相 饱和度) */
}

则可以让postcss执行例如加前缀、换用兼容性高的属性值等操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import postcss from 'postcss'
import autoprefixer from 'autoprefixer'   // 添加前缀
import postcssEnv from 'postcss-preset-env'   // 转换新特性预设

import fs from 'node:fs'

const css = fs.readFileSync('./index.css', 'utf-8')

// postcssEnv配置：兼容到目前为止最新的两个浏览器版本，包括IE
postcss([postcssEnv({browsers: 'last 2 versions'}), autoprefixer]).process(css, {
  from: './index.css'
}).then(res => {
  console.log(res.css)
  /** ->
   * .block {
   *   display: -webkit-box;
   *   display: -ms-flexbox;
   *   display: flex;
   *   color: rgb(226, 65, 52);
   * }
  */
})