node.js上でYAMLファイルから生成したJSON文字列をScss配列のファイルとして生成する

タイトルだけでは分かりづらいですが、条件としては以下のような感じです。

1. ymlファイルに設定があり、node.jsのスクリプトからfs.readFileSyncで読み込む
2. yamlのparseメソッドでパース、JSの変数として格納
3. JSの変数をJSON.stringifyでJSON形式の文字列(インデント・改行なし)に変換
4. 3.の文字列の前後にScss配列の構文を考慮して文字列を付け加える
5. Scss配列の構文になるようにJSON形式の文字列から文字列を置換
6. fs.writeFileSyncでファイルに書き込み

ここで、JSONからScssに変換するためには以下の置換が必要です。

• {を(に変換
• }を)に変換
• "を除去
  • ただし:の右側について、文字列の場合はそのまま文字列として認識させたいので"を残す

ネックは最後の:の右側はダブルクォーテーションを残す、ということ。

{
    "hoge":{
        "fuga":true,
        "piyo":false
    },
    "hogehoge": "fugafuga"
}

例えばこんなJSONだった場合、

$array: ( //ここはプレフィックスな文字列としてくっつける
    hoge: ( //ここからJSONの内容
        fuga:true,
        piyo:false
    ),
    hogehoge: "fugafuga"; //ここまでJSONの内容 //fugafugaは文字列なのでダブルクォーテーションを残す
); //ここはサフィックスな文字列としてくっつける

こんな感じに変換したいわけです。

とはいえ、普通はそんなことしなくても良いと思うのでなかなか記事が見付からず、自分で行った方法をメモとして残しておきます。

処理

肝心の処理ですが、以下のルールで置換を行うことでやりたいことを実現できました。

1. JSON.stringifyでJSON形式になっている文字列jsonStrに対して、前後にScssの配列となるように文字列(前に配列の名前と左括弧$ARRAY_NAME(、後ろに配列の終了を示す右括弧とセミコロン);)を追加
2. 1.の前後に文字列を加えた文字列に対して、replaceメソッドで正規表現置換: {"を(に
3. replaceで":を:に
4. replaceで}を)に
5. replaceで,"を,に
6. 5.までメソッドチェーンで繋げて処理を完了させた文字列をファイルに書き出し

ということで処理部分1.から6.についてのコードは下記。

let scssStr = `$ARRAY_NAME:(${jsonStr});`
scssStr = scssStr.replace(/\{"/gi, '(').replace(/":/gi, ':').replace(/\}/gi, ')').replace(/\,"/gi, ',')
fs.writeFileSync('FILEPATH/TO/SCSS.scss', scssStr, (err) => if(err) console.log(err))

これでScss配列になったファイルが生成できました。

参考

• scssの配列ループ＋変数でカテゴリ色分けなどを簡単にするよ！ – Qiita
• Sassで連想配列が使えるようになってたので使ってみた。 – Qiita