スナップショットテストがなくてもrailsのwebpackerで、node-sassからdart-sassに安心して切り替える

本記事のサマリ

node-sassでコンパイルした結果と、dart-sassでコンパイルした結果を、formatしてdiff確認すると、安心ですよというお話です。もちろん、cssのコンポーネント毎にスナップショットテストを実施していれば、そちらが崩れていないことを確認するほうがベターです。(両方やるとさらに安心ですね)

対象読者

• node-sassは、非推奨になりdart-sassが推奨になったので、切り替えたいけど、ちょっと怖い人
• @imortをやめて、@useを使うのに、dart-sassへの切り替えを行たいけど、ちょっと怖い人

動作確認バージョン

node-sass "^4.12.0"
sass@^1.32.7:

経緯

node-sassは、非推奨になっておりdart-sassを利用せよと公式にも記載されていました。RubyOnRailsでは、(今後は変わっていくと思いますが)標準では、node-sassが利用されていますが、dart-sassに切り替えることが望ましいですし、トランスパイルの速度や、@useといった新しい構文がりようできるなど、メリットも多く、早めに乗り換えたいと思いました。ただ、cssがそのまま動くのか？というのは、やってみないとわからない部分もあり、その検証の一部として、トランスパイル結果のdiffチェックをしようと考えました。
https://github.com/sass/node-sass#node-sass
https://github.com/sass/node-sass/commit/e2391c259167a9692f2c23b0c91caa37502334ca#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5

node-sassでトランスパイルしてもっておく

bin/webpack

# あとで使うので退避
mv public/packs public/packs_by_node_sass
# css以外は削除
find public/packs_by_node_sass -type f | grep  -v .*css$ | xargs rm

dart-sassを使うように変更

# とりあえず、dart-sassを入れる
yarn add sass fiber

# webpackerでdart-sassを利用するように設定を変更する。
# 参考：https://mentalized.net/journal/2019/10/19/use-sass-modules-in-rails/
const { environment } = require('@rails/webpacker')

const sassLoader = environment.loaders.get('sass');
// using dart-sass
const sassLoaderConfig = sassLoader.use.find(function(element) {
  return element.loader === 'sass-loader';
});
sassLoaderConfig.options.implementation = require('sass');
module.exports = environment

dart-sassでトランスパイルする

bin/webpack

mv public/packs public/packs_by_dart_sass
# css以外は削除
find public/packs_by_dart_sass -type f | grep  -v .*css$ | xargs rm

hash値がついていると、diffを取りづらいのでrenameする。

例えば、packs/css/application-a618018a.css を　packs/css/application.css にリネームしておきます。

find public/packs_by_node_sass/ -type f -name "*.css" | xargs rename 's/-[0-9a-z]+.css/.css/g'
find public/packs_by_dart_sass/ -type f -name "*.css" | xargs rename 's/-[0-9a-z]+.css/.css/g'

綺麗にdiffをとるためにcssの整形ツール入れる

yarn add cssbeautify-cli

cssbeautify-cliで、cssを整形する

# node-sassで生成したやつの整形
# 整形したやつは、`-beautify.css` というsuffixをつけている
for file in `find public/packs_by_node_sass/ -type f -name "*.css"`
do
  write_file_path=`dirname ${file}`/`basename ${file} .css`-beautify.css
  echo ${write_file_path}
  ./node_modules/cssbeautify-cli/bin/cssbeautify-cli -f ${file} -w ${write_file_path}
  rm ${file} # 整形前のファイルは削除
done

# dart-sassで生成したやつの整形
# 整形したやつは、`-beautify.css` というsuffixをつけている
for file in `find public/packs_by_dart_sass/ -type f -name "*.css"`
do
  write_file_path=`dirname ${file}`/`basename ${file} .css`-beautify.css
  ./node_modules/cssbeautify-cli/bin/cssbeautify-cli -f ${file} -w ${write_file_path}
  rm ${file} # 整形前のファイルは削除
done

差分をチェック

diff -r public/packs_by_node_sass/ public/packs_by_dart_sass/
# ざっと差分を確認して気になるところは、個別にみやすいdiffツールを利用すると良いかと思います。

# 差分の例
84,85c84,85
<   .owl-carousel .owl-nav button.owl-next,
<   .owl-carousel button.owl-dot {
---
> .owl-carousel .owl-nav button.owl-next,
> .owl-carousel button.owl-dot {
1204c1205
<     grid-gap: .5em;
---
>     grid-gap: 0.5em;
1211c1212
<     content: "\f105";
---
>     content: "";

私の環境では、

• .5remのような表記がきっちり0.5rem のように0がつく(問題なし)
• インデントズレ(これは、formatがちゃんとできていないだけと思われるので問題なし)
• クラス名の指定順序が若干入れ替わる(h1,h2としていたものが、h2,h1になっているといったもの、問題なし)
• contentに指定していたfontawesomeの部分が壊れる -> 問題ありそう

といった感じでした。

以上、見た目の確認とあわせて、こんな感じで差分をとってチェックしていくと安心ですよというお話でした。