こちらの環境では、 Autoprefixer と CSS Declaration Sorter は正常に機能しました。正常に機能することを確認した手順を示します。
最初に、質問文のようなディレクトリ構造を作成したうえで、 package.json を以下のように記述し、 npm install
コマンドを実行しました。
JSON
1{
2 "name": "q190298",
3 "version": "1.0.0",
4 "description": "",
5 "main": "index.js",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1"
8 },
9 "keywords": [],
10 "author": "",
11 "license": "ISC",
12 "dependencies": {
13 "autoprefixer": "^9.5.1",
14 "css-declaration-sorter": "^4.0.1",
15 "css-mqpacker": "^7.0.0",
16 "gulp": "^4.0.2",
17 "gulp-notify": "^3.2.0",
18 "gulp-plumber": "^1.2.1",
19 "gulp-postcss": "^8.0.0",
20 "gulp-sass": "^4.0.2",
21 "gulp-sass-glob": "^1.0.9"
22 }
23}
次に、 scss ディレクトリに style.scss を作成し、以下の内容を記述しました。
SCSS
1$dir: "/img/";
2
3.container {
4 flex-direction: column;
5 $margin: 5px;
6 display: flex;
7 width: 100%;
8 border: 4em solid #fff;
9
10 .foo {
11 overflow: scroll;
12 width: calc(100vh - (100vw - 100%));
13 background-color: #faa;
14 background-image: url($dir + "/foo.img");
15 margin-top: $margin + 3px;
16 padding: 4em 6em 3em;
17 font-size: 15vw;
18 height: 150vh;
19 }
20
21 .bar {
22 height: 60vh;
23 background-color: #faf;
24 overflow: hidden;
25 margin-top: #{$margin} + 3px;
26 font-size: 30vw;
27 background-image: url("#{$dir}/foo.jpg");
28 width: calc(100vw - 20%);
29 }
30}
31
32::placeholder {
33 color: #abf;
34}
35
36@media (min-resolution: 2dppx) {
37 .image {
38 background-image: url($dir + "bar.png");
39 }
40}
ここで、 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 の変化を見ることにしました。
JavaScript
1const gulp = require("gulp");
2const plumber = require('gulp-plumber');
3const sass = require("gulp-sass");
4const sassGlob = require("gulp-sass-glob");
5const notify = require("gulp-notify");
6const postcss = require("gulp-postcss");
7const autoprefixer = require("autoprefixer");
8const cssdeclsort = require("css-declaration-sorter");
9const mqpacker = require("css-mqpacker");
10
11gulp.task("default", function () {
12 return gulp.watch("scss/**/*.scss", function () {
13
14 return (
15 gulp
16 .src("scss/**/*.scss")
17 .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
18 .pipe(sassGlob())
19 .pipe(sass({outputStyle: "expanded"}).on("error", sass.logError))
20 .pipe(gulp.dest("www/css/normal"))
21 .pipe(postcss([autoprefixer()]))
22 .pipe(postcss([cssdeclsort({order: 'smacss'})]))
23 .pipe(postcss([mqpacker()]))
24 .pipe(gulp.dest("www/css/formatted"))
25 );
26 });
27});
そして、npx gulp
コマンドを実行し、 style.scss を変更、保存すると、 normal, formatted ディレクトリには、それぞれ以下のような style.css が出力されました。
normal ディレクトリ
CSS
1.container {
2 flex-direction: column;
3 display: flex;
4 width: 50%;
5 border: 4em solid #fff;
6}
7
8.container .foo {
9 overflow: scroll;
10 width: calc(100vh - (100vw - 100%));
11 background-color: #faa;
12 background-image: url("/img//foo.img");
13 margin-top: 8px;
14 padding: 4em 6em 3em;
15 display: block;
16 font-size: 15vw;
17 height: 150vh;
18}
19
20.container .bar {
21 height: 60vh;
22 background-color: #faf;
23 overflow: hidden;
24 margin-top: 5px + 3px;
25 box-sizing: border-box;
26 font-size: 30vw;
27 background-image: url("/img//foo.jpg");
28 width: calc(100vw - 20%);
29}
30
31::placeholder {
32 color: #abf;
33}
34
35@media (min-resolution: 2dppx) {
36 .image {
37 background-image: url("/img/bar.png");
38 }
39}
formatted ディレクトリ
CSS
1.container {
2 display: flex;
3 flex-direction: column;
4 width: 50%;
5 border: 4em solid #fff;
6}
7
8.container .foo {
9 display: block;
10 width: calc(100vh - (100vw - 100%));
11 height: 150vh;
12 margin-top: 8px;
13 padding: 4em 6em 3em;
14 overflow: scroll;
15 background-color: #faa;
16 background-image: url("/img//foo.img");
17 font-size: 15vw;
18}
19
20.container .bar {
21 box-sizing: border-box;
22 width: calc(100vw - 20%);
23 height: 60vh;
24 margin-top: 5px + 3px;
25 overflow: hidden;
26 background-color: #faf;
27 background-image: url("/img//foo.jpg");
28 font-size: 30vw;
29}
30
31::-webkit-input-placeholder {
32 color: #abf;
33}
34
35::-moz-placeholder {
36 color: #abf;
37}
38
39:-ms-input-placeholder {
40 color: #abf;
41}
42
43::-ms-input-placeholder {
44 color: #abf;
45}
46
47::placeholder {
48 color: #abf;
49}
50
51@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
52 .image {
53 background-image: url("/img/bar.png");
54 }
55}
整形後のコードは、最初に挙げた 2 つの動作条件を満たしているため、これらのパッケージと、 gulpfile.js は正常に機能しているとわかります。