gulpとPostCSSを使って、Sassのメディアクエリをまとめようとしています。小さな画面サイズから大きな画面サイズへと順にメディアクエリを出力したいのですが、順序が崩れてしまいます。

Question

CSSを記述するときはSassを使っています。そしてメディアクエリを多用しており、今回作ったサイトでは同じ画面サイズのメディアクエリがあちこちに存在する状況になっています。

このメディアクエリを簡潔にするため、gulpとPostCSSを使って同じ画面サイズのメディアクエリを１つにまとめようとしています。

わたしがCSSを記述するときの順序ですが、わたしは基本的にモバイルファーストで作成しています。
つまり最初にスマホ画面のCSSを作成し、その後、メディアクエリで徐々に大画面のCSSを作る方針をとっています。

わたしのサイトで使ったメディアクエリは次の通りです（style.scssファイルに記述します）。

// style.scssファイルの記述
@media (max-width: 374px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1366px) {}

このCSSから推測できるように、わたしは画面サイズの基準を375pxとしてサイトを作っています。
そのためメディアクエリを設定するときも基本的にmin-widthを使うことになるのですが、小さなスマホ画面に対応するため、例外的に@media (max-width: 374px) {}を使っている個所もあります。

さてこのようにメディアクエリを設定したのですが、最初に書いたようにこれらのメディアクエリはCSSファイルのあちこちに必要に応じて点在しています。
そこでgulpとPostCSSでメディアクエリをまとめたのですが、次のような順で出力されました（style.cssファイルに出力されます）。

// style.cssファイルの出力
@media (min-width: 768px) {}
@media (min-width: 1366px) {}
@media (min-width: 992px) {}
@media (max-width: 374px) {}
@media (min-width: 1200px) {}

しかしこのような出力順になったため、1366px以上のときの設定が、@media (min-width: 992px) {}や@media (min-width: 1200px) {}によって打ち消されてしまいました。

また@media (max-width: 374px) {}の記述が@media (min-width: 992px) {}と@media (min-width: 1200px) {}の間に挟まれているのも気になります。

今回はこの位置に@media (max-width: 374px) {}がきても影響はなかったのですが、@media (max-width: ●px) {}のサイズやプロパティの設定によってはmin-widthに挟まれるとデザインが崩れる可能性があります。

そのため@media (max-width: ●px) {}と@media (min-width: ●px) {}を併用するにしても、デザインが崩れない順に出力したいと考えています。

今回の場合だと、メディアクエリの出力順を

@media (max-width: 374px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1366px) {}

としたいのですが、どのようにすればいいのでしょうか。
よろしくお願いします。

わたしとしてはてっきりPostCSSを使うと自然に小画面～大画面となるようにメディアクエリが設定されると思っていたのですが、やはりgulpfile.jsの設定が十分ではないということでしょうか。

念のためわたしの使ったpackage.jsonとgulpfile.jsのコードを記載します。

{
  "name": "mediaqueryfiles",
  "version": "1.0.0",
  "description": "このフォルダは、Sassのメディアクエリをまとめるために作られたフォルダです。",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.3.0",
    "css-declaration-sorter": "^6.0.3",
    "css-mqpacker": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-postcss": "^9.0.0",
    "gulp-sass": "^5.0.0",
    "node-sass": "^6.0.1",
    "sass": "^1.35.2"
  }
}

// gulpプラグインの読み込み
var gulp = require("gulp");
var sass = require('gulp-sass')(require('sass'));
var postcss = require("gulp-postcss");
var mqpacker = require("css-mqpacker"); // メディアクエリをまとめる
var cssdeclsort = require("css-declaration-sorter"); // プロパティ順の分類

// scssの監視タスクを作成する
gulp.task("default", function () {
    // scssファイルを監視
    return gulp.watch("scss/*.scss", function () {
        // scssの更新があった場合の処理
        // scssファイルを取得
        return (
            gulp
                .src("scss/*.scss")
                // Sassのコンパイルを実行
                .pipe(
                    sass({
                        outputStyle: "expanded", // expandedとして圧縮する
                    })
                        // Sassのコンパイルエラーを表示
                        // (これがないと自動的に止まってしまう)
                        .on("error", sass.logError)
                )
                // sassの後に指定
                .pipe(postcss([cssdeclsort({ order: "concentric-css" })])) // concentric-cssでソートする（ボックスモデルの外側からソートする）
                .pipe(postcss([mqpacker()]))
                // cssフォルダー以下に保存
                .pipe(gulp.dest("css"))
        );
    });
});

Answer 1

node-css-mqpacker は min-width クエリにおける幾つかの単位でのみソート機能が利用出来ます。もし動作をカスタマイズしたい場合は自身で sort 関数を作成する必要があります。

sort

Currently, this option only supports min-width queries with specific units (ch, em, ex, px, and rem). If you want to do more, you need to create your own sorting function and pass it to this module like this:

しかし今回の場合は、 node-css-mqpacker の拡張に位置する sort-css-media-queries を利用することで質問者さんの実現したい動作が行えます。その結果、使用したディレクトリ構造や各ファイル内容は次のようになります。より詳細な動作は質問者さんでカスタマイズしてみてください。

ディレクトリ構造

./
├ scss
│ └ style.scss
├ gulpfile.js
└ package.json

package.json

{
  "name": "mediaqueryfiles",
  "version": "1.0.0",
  "description": "このフォルダは、Sassのメディアクエリをまとめるために作られたフォルダです。",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.3.0",
    "css-declaration-sorter": "^6.0.3",
    "css-mqpacker": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-postcss": "^9.0.0",
    "gulp-sass": "^5.0.0",
    "node-sass": "^6.0.1",
    "sass": "^1.35.2"
  },
  "dependencies": {
    "sort-css-media-queries": "^2.0.3"
  }
}

gulpfile.js

var gulp = require("gulp");
var sass = require('gulp-sass')(require('sass'));
var postcss = require("gulp-postcss");
var mqpacker = require("css-mqpacker"); // メディアクエリをまとめる
var sortCSSmq = require("sort-css-media-queries");
var cssdeclsort = require("css-declaration-sorter"); // プロパティ順の分類

// scssの監視タスクを作成する
gulp.task("default", function () {
    // scssファイルを監視
    return gulp.watch("scss/*.scss", function () {
        // scssの更新があった場合の処理
        // scssファイルを取得
        return (
            gulp
                .src("scss/*.scss")
                // Sassのコンパイルを実行
                .pipe(
                    sass({
                        outputStyle: "expanded", // expandedとして圧縮する
                    })
                        // Sassのコンパイルエラーを表示
                        // (これがないと自動的に止まってしまう)
                        .on("error", sass.logError)
                )
                // sassの後に指定
                .pipe(postcss([cssdeclsort({order: "concentric-css"})])) // concentric-cssでソートする（ボックスモデルの外側からソートする）
                .pipe(postcss([mqpacker({sort: sortCSSmq.desktopFirst})]))
                // cssフォルダー以下に保存
                .pipe(gulp.dest("css"))
        );
    });
});

style.scss

@media (min-width: 1366px) {
  div {
    height: 1366px;
  }
}

@media (min-width: 992px) {
  div {
    height: 992px;
  }
}

p {
  color: #abc;
}

@media (max-width: 374px) {
  div {
    h1 {
      font-weight: lighter;
      font-size: 30px;
    }

    width: 374px;
  }
}

@media (min-width: 768px) {
  div {
    width: 768px;
  }
}

@media (min-width: 992px) {
  div {
    width: 992px;
  }

  h1 {
    font-weight: bold;
    font-size: 20px;
  }
}

h1 {
  font-weight: inherit;
  font-size: 50px;
}

@media (min-width: 1200px) {
  div {
    width: 1200px;
  }
}

@media (min-width: 768px) {
  div {
    height: 768px;
    min-height: 450px;
  }
}

@media (min-width: 1366px) {
  h2 {
    color: red;
  }
  div {
    width: 1366px;
  }
}

@media (max-width: 374px) {
  div {
    height: 374px;
  }
}

@media (min-width: 1200px) {
  div {
    height: 1200px;
  }
}

style.css(出力)

p {
  color: #abc;
}
h1 {
  font-weight: inherit;
  font-size: 50px;
}
@media (max-width: 374px) {
  div {
    width: 374px;
  }
  div h1 {
    font-weight: lighter;
    font-size: 30px;
  }
  div {
    height: 374px;
  }
}
@media (min-width: 768px) {
  div {
    width: 768px;
  }
  div {
    height: 768px;
    min-height: 450px;
  }
}
@media (min-width: 992px) {
  div {
    height: 992px;
  }
  div {
    width: 992px;
  }

  h1 {
    font-weight: bold;
    font-size: 20px;
  }
}
@media (min-width: 1200px) {
  div {
    width: 1200px;
  }
  div {
    height: 1200px;
  }
}
@media (min-width: 1366px) {
  div {
    height: 1366px;
  }
  h2 {
    color: red;
  }

  div {
    width: 1366px;
  }
}

Comments

[cheshire-cat]

ありがとうございました。Sassのソートが分からず、悩んでいました。自分なりに改良して使ってみます。