ScssをGulp4(gulp-dart-sass)でコンパイルすると属性値を囲むクオート(' ")が消えてしまう現象の解決法

gulp4.0（gulp-dart-sass）を使ってscssをコンパイル。属性値を囲むクオートがシングル・ダブルともに消える。

gulp4.0を使ってscssをコンパイルしているのですが、input[type="text"]など属性値を囲むクオートがシングル・ダブル(' ")ともに消えてしまいます。

scss
1input[type="text"]{
2     display: block;
3}
4[class^="btn_"]{
5    display: block;
6}

これをgulp-dart-sassでコンパイルするとこうなります↓

css
1input[type=text]{
2     display: block;
3}
4[class^=btn_]{
5    display: block;
6}

試したこと

ちなみに以下のパターンは大丈夫できちんとクオートが残ってコンパイルされます。

background: url("");
content: "";

[]内のクオートがどうも消えている模様。。。。

また、
scss記法からのコンパイルが上記の現象が起きていて、
sass記法からのコンパイルだときちんとクオート付きでコンパイルされます。

その他

最悪、SassMeisterでsass記法に変換して、コンパイルしなおせばよいのですが。なんかそれもなと。
またVSCode　Live sass compiler利用は今回は対象外です。

このGulpでscssをコンパイルってかなりメジャーな方法だと思うので、この現象皆さんがどう対応しているのかが知りたいです。
よろしくお願いします。

hoshi-takanori

2022/01/26 07:55

それで何かお困りでしょうか？ css の仕様では、空文字列でなく、かつスペースや記号を含まないものは引用符を省略できるのだと思います。(未確認ですが。) 人間が直接読み書きする「ソースコード」では引用符を付けた方が (というか、付けるなら付けるで統一した方が) 読みやすかったりしますが、sass や scss から生成される css はソースコードではなく「生成されたコード」であり、通常人間が直接編集するものではなく、ブラウザが正しく解釈できれば充分なので、省略できるものは省略される場合があるということかと。