@supportsがビルドされない


Edge対策でハックが必要になったのでSCSSに下記記述をしてビルドしても
出力されたCSSになぜか@supportsで囲われたブロックがきれいに消えるという現象。

Hack for Edge

@supports (-ms-ime-align: auto) {
  /* スタイルセット */
}

環境

package.json

{
  "name": "localtest",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "engines": {
    "node": "8.11.3"
  },
  "browserify-shim": {
    "jquery": "$"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "dependencies": {
    "browserify": "^16.2.2",
    "browserify-shim": "^3.8.14",
    "jquery": "~3.2.1"
  },
  "devDependencies": {
    "es6-promise": "*",
    "eslint": "*",
    "eslint-plugin-es5":"^1.3.1",
    "gulp": "*",
    "gulp-autoprefixer": "*",
    "gulp-clean-css": "*",
    "gulp-concat": "*",
    "gulp-load-plugins": "^1.5.0",
    "gulp-merge-media-queries": "*",
    "gulp-plumber": "*",
    "gulp-postcss": "^7.0.0",
    "gulp-rename": "*",
    "gulp-sass": "*",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-stylelint": "^7.0.0",
    "gulp-uglify": "*",
    "postcss-reporter": "*",
    "postcss-scss": "*",
    "run-sequence": "^2.2.1",
    "stylelint": "^9.2.0",
    "stylelint-config-sass-guidelines": "*",
    "stylelint-config-standard": "*",
    "stylelint-scss": "*",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  },
  "scripts": {
    "watch": "gulp",
    "sass": "gulp sass",
    "js": "gulp js",
    "deploy": "gulp deploy",
    "lint": "eslint src"
  }
}

原因

gulp-merge-media-queriesでメディアクエリ記述をまとめていたのですが、これが@supportsの部分を無視(?)してくれていたようです。

  • 参考記事

gulp media queries まとめる系プラグインで @supports が消えてる件

対策

記事にあるようにgulp-merge-media-queriesの代わりにgulp-group-css-media-queriesを利用することで解決