Gulpでプレフィックス自動付与とCSSの順番整理が機能しない

Question

gulpで「autoprefixer」と「css-declaration-sorter」がうまく機能してないようです。
（プレフィックスが全く付与されていない、CSSの順番も自分で記述したものから変更なくバラバラ）

それ以外のパッケージは機能していて、コンパイルまでされています。
エラーも出ていません。

ファイル構成とgulpfile.jsは以下です。

const gulp = require("gulp");
const plumber = require('gulp-plumber');
const sass = require("gulp-sass");
const sassGlob = require("gulp-sass-glob");
const notify = require("gulp-notify");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssdeclsort = require("css-declaration-sorter");
const mqpacker = require("css-mqpacker");

gulp.task("default", function() {
  return gulp.watch("scss/**/*.scss", function() {

    return (
      gulp
        .src("scss/**/*.scss")

        .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
        .pipe(sassGlob())

        .pipe(sass({outputStyle: "expanded"}).on("error", sass.logError))

        .pipe(postcss([autoprefixer()]))
        .pipe(postcss([cssdeclsort({order: 'smacss'})]))
        .pipe(postcss([mqpacker()]))

        .pipe(gulp.dest("www/css"))
    );
  });
});

書籍通り記述したはずなのですがうまくいかず、パッケージ名でググっても良い記事がヒットしません。。
もしわかる方いらっしゃれば教えていただきたいです。

よろしくお願いします。

追加情報（scssと実行結果）

例えばこの箇所です。

.l-header {
  height: 68px;

  &__wrapper {
    position: relative;
    padding: 0 4.26%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__sp-menu {
    position: absolute;
    top: 24px;
    right: 0;

    span {
      width: 26px;
      height: 3px;
      color: #3E3E3E;
      border-radius: 50%;
      
      &:nth-child(1) {
        top: 0;
      }
      
      &:nth-child(2) {
        top: 5.5px;
      }
      
      &:nth-child(1) {
        top: 8.5px;
      }
    }
  }
}

.l-header {
  height: 68px;
}

.l-header__wrapper {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.26%;
}

.l-header__sp-menu {
  position: absolute;
  top: 24px;
  right: 0;
}

.l-header__sp-menu span {
  width: 26px;
  height: 3px;
  border-radius: 50%;
  color: #3E3E3E;
}

.l-header__sp-menu span:nth-child(1) {
  top: 0;
}

.l-header__sp-menu span:nth-child(2) {
  top: 5.5px;
}

.l-header__sp-menu span:nth-child(1) {
  top: 8.5px;
}

Comments

[s8_chu]

質問者さんの SCSS と その実行結果を教えていただけませんか？

[kadot]

いまSCSSと実行結果を追加しました。（質問を更新しました）

ただ、ひとつ発覚したことがありまして、s8_chuさんのくださった回答を見て、改めてCSS見直したら順番変わっていました。。いろいろ調べてくださっているのに本当にすいません…！僕の不注意でした。頭ごちゃごちゃで一部だけ見て質問してしまいました。気をつけます。

プレフィックスの方はついてないようです。例えばflexのところです。

[s8_chu]

Autoprefixer が機能しているかを確認する方法も、回答文に書いてありますので、一度質問者さんの環境でも試してみてください。

[kadot]

すいません…！
いま試してみました。回答と同じコード書いたら、実行結果でプレフィックス付与されました！
ということは僕の環境でも正しく動作しているということですね。

僕の理解が間違ってるのかもしれないのですが、
これが
display: flex;

こうなる
display: -webkit-box;
display: -ms-flexbox;
display: flex;

のかなと思っていたのですが、もしかしてこれはまた別の話…だったりするのでしょうか？

[s8_chu]

モダンブラウザでは、 flexbox 関連のプロパティにベンダープレフィックスが不要なため、デフォルトではベンタープレフィックスが付与されることはありません。
オプションにて設定を変更することでベンダープレフィックスが付与されます。

[kadot]

なるほど！そういうことなんですね！
解決しました。

丁寧に教えてくださり感謝しています。
今度このサービスを使う時は、しっかり見直して自分の質問にミスがないように気をつけます。
正常に動作しているかの確認も教えていただいた考え方を活かしていきたいと思います。

本当にありがとうございました。

Answer 1

こちらの環境では、 Autoprefixer と CSS Declaration Sorter は正常に機能しました。正常に機能することを確認した手順を示します。

最初に、質問文のようなディレクトリ構造を作成したうえで、 package.json を以下のように記述し、 npm install コマンドを実行しました。

{
  "name": "q190298",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^9.5.1",
    "css-declaration-sorter": "^4.0.1",
    "css-mqpacker": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sass-glob": "^1.0.9"
  }
}

---

次に、 scss ディレクトリに style.scss を作成し、以下の内容を記述しました。

$dir: "/img/";

.container {
  flex-direction: column;
  $margin: 5px;
  display: flex;
  width: 100%;
  border: 4em solid #fff;

  .foo {
    overflow: scroll;
    width: calc(100vh - (100vw - 100%));
    background-color: #faa;
    background-image: url($dir + "/foo.img");
    margin-top: $margin + 3px;
    padding: 4em 6em 3em;
    font-size: 15vw;
    height: 150vh;
  }

  .bar {
    height: 60vh;
    background-color: #faf;
    overflow: hidden;
    margin-top: #{$margin} + 3px;
    font-size: 30vw;
    background-image: url("#{$dir}/foo.jpg");
    width: calc(100vw - 20%);
  }
}

::placeholder {
  color: #abf;
}

@media (min-resolution: 2dppx) {
  .image {
    background-image: url($dir + "bar.png");
  }
}

ここで、 Autoprefixer, CSS Declaration Sorter が動作しているかを確かめるためには、以下の項目を確認すれば良いです。

• placeholder 擬似要素は実験的な機能であるため、ブラウザとそのバージョンによっては、ベンダープレフィックスを付与する必要があります。そのため、この擬似要素にプレフィックスが付与されれば、 Autoprefixer は正常に動作していることになります。

• 上記の SCSS は適当に書いたものですが、質問者さんが選択したプロパティ順序 (SMACSS) では、 box-sizing プロパティが一番上に、 display プロパティが上から二番目に配置されるように整形されるはずです(参考)。そのため、 box-sizing, display プロパティの位置が変化すれば、 CSS Declaration Sorter が正常に動作していることになります。

---

また、 gulpfile.js を以下のように変更し、 css ディレクトリ下に normal ディレクトリ、 formatted ディレクトリを作成することで、 Autoprefixer と CSS Declaration Sorter を実行する前後での CSS の変化を見ることにしました。

const gulp = require("gulp");
const plumber = require('gulp-plumber');
const sass = require("gulp-sass");
const sassGlob = require("gulp-sass-glob");
const notify = require("gulp-notify");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssdeclsort = require("css-declaration-sorter");
const mqpacker = require("css-mqpacker");

gulp.task("default", function () {
    return gulp.watch("scss/**/*.scss", function () {

        return (
            gulp
                .src("scss/**/*.scss")
                .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
                .pipe(sassGlob())
                .pipe(sass({outputStyle: "expanded"}).on("error", sass.logError))
                .pipe(gulp.dest("www/css/normal"))
                .pipe(postcss([autoprefixer()]))
                .pipe(postcss([cssdeclsort({order: 'smacss'})]))
                .pipe(postcss([mqpacker()]))
                .pipe(gulp.dest("www/css/formatted"))
        );
    });
});

---

そして、npx gulp コマンドを実行し、 style.scss を変更、保存すると、 normal, formatted ディレクトリには、それぞれ以下のような style.css が出力されました。

normal ディレクトリ

.container {
  flex-direction: column;
  display: flex;
  width: 50%;
  border: 4em solid #fff;
}

.container .foo {
  overflow: scroll;
  width: calc(100vh - (100vw - 100%));
  background-color: #faa;
  background-image: url("/img//foo.img");
  margin-top: 8px;
  padding: 4em 6em 3em;
  display: block;
  font-size: 15vw;
  height: 150vh;
}

.container .bar {
  height: 60vh;
  background-color: #faf;
  overflow: hidden;
  margin-top: 5px + 3px;
  box-sizing: border-box;
  font-size: 30vw;
  background-image: url("/img//foo.jpg");
  width: calc(100vw - 20%);
}

::placeholder {
  color: #abf;
}

@media (min-resolution: 2dppx) {
  .image {
    background-image: url("/img/bar.png");
  }
}

formatted ディレクトリ

.container {
  display: flex;
  flex-direction: column;
  width: 50%;
  border: 4em solid #fff;
}

.container .foo {
  display: block;
  width: calc(100vh - (100vw - 100%));
  height: 150vh;
  margin-top: 8px;
  padding: 4em 6em 3em;
  overflow: scroll;
  background-color: #faa;
  background-image: url("/img//foo.img");
  font-size: 15vw;
}

.container .bar {
  box-sizing: border-box;
  width: calc(100vw - 20%);
  height: 60vh;
  margin-top: 5px + 3px;
  overflow: hidden;
  background-color: #faf;
  background-image: url("/img//foo.jpg");
  font-size: 30vw;
}

::-webkit-input-placeholder {
  color: #abf;
}

::-moz-placeholder {
  color: #abf;
}

:-ms-input-placeholder {
  color: #abf;
}

::-ms-input-placeholder {
  color: #abf;
}

::placeholder {
  color: #abf;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .image {
    background-image: url("/img/bar.png");
  }
}

整形後のコードは、最初に挙げた 2 つの動作条件を満たしているため、これらのパッケージと、 gulpfile.js は正常に機能しているとわかります。