# Postcss

在前面 CSS 准备小节末尾，出现了 writing-mode 在 IE 上失效的情况。如果加上 -ms-writing-mode: tb-lr，那么 IE 就可以正确显示样式。这是因为部分 CSS 在不同浏览器厂商存在差异，那如何进行兼容？自己手动写上各个浏览器的前缀或对应的值来兼容吗？

Postcss (opens new window) 可以帮助我们轻松的解决上面的问题，它相当于 Babel，只不过 Babel 是在 JS 领域，而 Postcss 则是在 CSS 领域。可以根据不同的需求来使用 Postcss 平台上提供的插件，这里的问题就对应着 autoprefixer (opens new window) 插件。和 TypeScript 章节中的整体编译、单独编译一样，我们也需要进行整体编译和单独编译。

# 整体编译

在 Webacpk 使用还需要额外安装 postcss-loader。使用方式如下：

# 安装
npm install postcss autoprefixer postcss-loader --save-dev

1
2

依旧采用配置传入方式：

// build.js
// ...
webpack(
  {
    // ...
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            {
              loader: "postcss-loader",
              options: {
                postcssOptions: { plugins: [require("autoprefixer")] },
              },
            },
          ],
        },
        // ...
      ],
    },
    plugins: [new MiniCssExtractPlugin()],
  }
  // ...
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

运行 node build.js，重新在 IE 里打开 index.html，文本就和 Chrome 效果一致了，均为垂直排列。

IE 运行效果图

可以查看产物 dist/main.css，对比之前 src/style/element.css 文件 writing-mode 属性已经做了兼容转化。

.ui-random-text {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: cornflowerblue;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
}

.ui-backgroud-body {
  border-radius: 50%;
  box-shadow: grey 10px 10px 10px 0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 单独编译

以上是整体编译的方法，此时如果重新运行 node compile.js，打开 http://localhost:3000/，浏览器会抛出错误 Uncaught Error: Cannot find module './style/element.css'。按需加载目前只处理了 .ts 文件，lib 和 es 目录下并没有 .css 文件。这和 TypeScript 单独编译小节类似，只需要将 .css 文件通过 Postcss 处理后的产物移交至 es 和 lib 中，尽量于 src 目录结构保持一致，这样就不需要重新修改产物的资源引用路径了。

注意

其实这里还有个错误，就是 example 这个目录，是一个单独的测试项目。使用了 Webpack 进行本地开发测试，example/serve.js 这个文件没有对 .css 文件的处理逻辑，所以 example 项目也解析不了从任何地方引入的 .css 文件。

先将 example 模拟项目改造一下以支持 .css：

// example/serve.js
// ...
var compiler = webpack({
  // ...
  module: {
    // 模拟用户的项目也需要对 css 进行处理
    rules: [
      {
        test: /\.css$/,
        // 顺序不能错，loader 从右往左执行
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  // ...
});
// ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

再新建个文件或在原先的 compile.js 里编写以下 .css 处理逻辑。（这里就在 compile.js 写）。autoprefixer 文档 (opens new window)

// compile.js
var stream = require("stream");
var { src, dest } = require("gulp");
var babel = require("@babel/core");
var postcss = require("postcss");

function compileTS(modules) {
  // ...
}

function compileCSS(modules) {
  // Commonjs 输出至 ./lib
  // ES6 Module 输出至 ./es
  var path = modules === false ? "./es" : "./lib";

  // 读取文件
  src("./src/**/*.css")
    .pipe(
      new stream.Transform({
        objectMode: true,
        transform: function(chunk, encoding, next) {
          // 传入配置
          postcss([require("autoprefixer")])
            .process(chunk.contents.toString(encoding), { from: chunk.path })
            .then((result) => {
              chunk.contents = Buffer.from(result.css);
              next(null, chunk);
            });
        },
      })
    )
    .pipe(dest(path)); // 输出到某文件中
}

// 编译 TS
compileTS(false);
compileTS();

// 编译 CSS
compileCSS(false);
compileCSS();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

注意

如果没有传入 { from: chunk.path }，控制台会 Without "from" option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to "undefined" to prevent this warning. 警告。

运行 node compile.js 和重启服务 node example/serve.js 在 Chrome 和 IE 上打开 http://localhost:3000/，页面正常运行。

# 根据浏览器进行兼容

Postcss 还可以根据目标浏览器进行选择性兼容，这可以使文件体积更加精简。由于和 Babel 根据浏览器按需引用类似，这里不进行赘述。如果使用传入配置方式，请参考选项 (opens new window) 中的 overrideBrowserslist 属性。如有需要可以按照以下方式改造：

注意

官网是不推荐使用 overrideBrowserslist 的，但这里为了方便理解，还是使用了。如果你已经理解了配置传入的方式，可以对此进行改造，对所有使用的 browserslist 配置的地方统一成一个入口。

整体编译 的改造：

// build.js
// ...
webpack(
  {
    // ...
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            {
              loader: "postcss-loader",
              options: {
                postcssOptions: {
                  plugins: [
                    require("autoprefixer")({
                      // 可以对比添加前后的产物有什么区别
                      // 注意这里是不兼容 IE <= 11，为了查看添加前后的区别
                      overrideBrowserslist: ["> 1%", "not ie <= 11"],
                    }),
                  ],
                },
              },
            },
          ],
        },
        // ...
      ],
    },
    // ...
  }
  // ...
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

单独编译 的改造：

// compile.js
var stream = require("stream");
var { src, dest } = require("gulp");
var babel = require("@babel/core");
var postcss = require("postcss");

function compileTS(modules) {
  // ...
}

function compileCSS(modules) {
  // Commonjs 输出至 ./lib
  // ES6 Module 输出至 ./es
  var path = modules === false ? "./es" : "./lib";

  // 读取文件
  src("./src/**/*.css")
    .pipe(
      new stream.Transform({
        objectMode: true,
        transform: function(chunk, encoding, next) {
          // 传入配置
          postcss([
            require("autoprefixer")({
              // 可以对比添加前后的产物有什么区别
              // 注意这里是不兼容 IE <= 11，为了查看添加前后的区别
              overrideBrowserslist: ["> 1%", "not ie <= 11"],
            }),
          ])
            .process(chunk.contents.toString(encoding), { from: chunk.path })
            .then((result) => {
              chunk.contents = Buffer.from(result.css);
              next(null, chunk);
            });
        },
      })
    )
    .pipe(dest(path)); // 输出到某文件中
}

// 编译 TS
compileTS(false);
compileTS();

// 编译 CSS
compileCSS(false);
compileCSS();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

还可以根据官方文档 (opens new window) 来开启 Debug 模式，方便查看目前进行兼容的属性有哪些。对比完成后，建议改成兼容 IE11。

注意

debug 打印并非根据 overrideBrowserslist 配置打印出来的值。
目标浏览器的配置需要于其他插件保持统一。

← CSS SASS →