gulpからautoprefixerを使った際の出力について

オンライン版のautoprefier（https://autoprefixer.github.io/）で
対象ブラウザをie >= 11にして
下記scssを変換すると

scss
1.grid {
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  grid-template-rows: auto auto;
5  grid-gap: 20px;
6}

次のようなcssが出力されますが

css
1.grid {
2  display: -ms-grid;
3  display: grid;
4  -ms-grid-columns: 1fr 20px 1fr;
5  grid-template-columns: 1fr 1fr;
6  -ms-grid-rows: auto 20px auto;
7  grid-template-rows: auto auto;
8  grid-gap: 20px;
9}.grid > *:nth-child(1) {
10  -ms-grid-row: 1;
11  -ms-grid-column: 1;
12}.grid > *:nth-child(2) {
13  -ms-grid-row: 1;
14  -ms-grid-column: 3;
15}.grid > *:nth-child(3) {
16  -ms-grid-row: 3;
17  -ms-grid-column: 1;
18}.grid > *:nth-child(4) {
19  -ms-grid-row: 3;
20  -ms-grid-column: 3;
21}

gulpのautoprefixerだと
.grid > *:nth-child(1)部分が出力されず
下記のようになってしまいます。
そしてIE11の表示が崩れます。

css
1.grid {
2  display: -ms-grid;
3  display: grid;
4  -ms-grid-columns: 1fr 1fr;
5  grid-template-columns: 1fr 1fr;
6  -ms-grid-rows: auto auto;
7  grid-template-rows: auto auto;
8  grid-gap: 20px;
9}

gulpから呼び出すautoprefixerとオンライン版では出力が異なるのがデフォルトなんでしょうか？

package.json

json
1    "gulp": "^4.0.0",
2    "gulp-sass": "^4.0.2",
3    "gulp-postcss": "^8.0.0",
4    "autoprefixer": "^9.4.3",

gulpfile.jsのautoprefixerにはgird:trueをつけています。

javascript
1gulp.task("default", function () {
2  return gulp.src("src/style.css")
3    .pipe(sass({ outputStyle: "expanded" }))
4    .pipe(postcss([
5      autoprefixer({
6        browsers: ["ie >= 11"],
7        grid: true
8      })
9    ]))
10    .pipe(gulp.dest("dist"));
11});

行動規範の内容に同意します

回答1件

ベストアンサー

以下のようなディレクトリ構成で、

test
├ dist
├ src
│ └ style.scss
├ gulpfile.js
└ package.json

package.jsonを以下のように、

json
1{
2  "name": "test_project",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "author": "",
10  "license": "ISC",
11  "dependencies": {
12    "gulp": "^4.0.0",
13    "gulp-sass": "^4.0.2",
14    "gulp-postcss": "^8.0.0",
15    "autoprefixer": "^9.4.3"
16  }
17}

style.scssを以下のように、

scss
1.grid {
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  grid-template-rows: auto auto;
5  grid-gap: 20px;
6}

gulpfile.jsを以下のように記述しました。ここで、質問文のコードから、2箇所を変更している点に注意してください。

javascript
1const gulp = require("gulp");
2const sass = require("gulp-sass");
3const postcss = require("gulp-postcss");
4const autoprefixer = require("autoprefixer");
5
6gulp.task("default", function () {
7    return gulp.src("src/style.scss") // 拡張子を変更
8        .pipe(sass({outputStyle: "expanded"}))
9        .pipe(postcss([
10            autoprefixer({
11                browsers: ["ie >= 11"],
12                grid: "autoplace" // trueは no-autoplace を表す。 autoplace に変更
13            })
14        ]))
15        .pipe(gulp.dest("dist"));
16});

この状態で、npxコマンドを使いgulpコマンドを実行しました。

terminal
1$ npx gulp

すると、./distフォルダにstyle.cssが作成され、その内容を見ると、以下のように、質問者さんが実現したい内容となりました。

css
1.grid {
2  display: -ms-grid;
3  display: grid;
4  -ms-grid-columns: 1fr 20px 1fr;
5  grid-template-columns: 1fr 1fr;
6  -ms-grid-rows: auto 20px auto;
7  grid-template-rows: auto auto;
8  grid-gap: 20px;
9}.grid > *:nth-child(1) {
10  -ms-grid-row: 1;
11  -ms-grid-column: 1;
12}.grid > *:nth-child(2) {
13  -ms-grid-row: 1;
14  -ms-grid-column: 3;
15}.grid > *:nth-child(3) {
16  -ms-grid-row: 3;
17  -ms-grid-column: 1;
18}.grid > *:nth-child(4) {
19  -ms-grid-row: 3;
20  -ms-grid-column: 3;
21}

この出力された CSS を使い、以下のようなコードを書き、IE 11で動かすと、無事動作します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        body {
8            margin: 0;
9        }
10
11        .grid {
12            display: -ms-grid;
13            display: grid;
14            -ms-grid-columns: 1fr 20px 1fr;
15            grid-template-columns: 1fr 1fr;
16            -ms-grid-rows: auto 20px auto;
17            grid-template-rows: auto auto;
18            grid-gap: 20px;
19        }
20
21        .grid > *:nth-child(1) {
22            -ms-grid-row: 1;
23            -ms-grid-column: 1;
24            background-color: cyan;
25        }
26
27        .grid > *:nth-child(2) {
28            -ms-grid-row: 1;
29            -ms-grid-column: 3;
30            background-color: magenta;
31
32        }
33
34        .grid > *:nth-child(3) {
35            -ms-grid-row: 3;
36            -ms-grid-column: 1;
37            background-color: yellow;
38
39        }
40
41        .grid > *:nth-child(4) {
42            -ms-grid-row: 3;
43            -ms-grid-column: 3;
44            background-color: black;
45        }
46    </style>
47</head>
48<body>
49<div class="grid">
50    <div>a</div>
51    <div>b</div>
52    <div>c</div>
53    <div>d</div>
54</div>
55</body>
56</html>