Style Dictionaryの設定ファイルをJSONからJS、そしてTSへ置き変えていった時のメモ

m-yoshiro

業務でStyle Dictionaryを使ってて、そこでやったことを主に自分のために記録しとく。
ゆっくりやっていきます。

m-yoshiro

Style Dictionaryの設定ファイルの管理で一番オーソドックスなのが、JSONファイルだと思う。
やりたいことが単純であればJSONで十分。だけど、もっと複雑なことをしたい場合は設定をJSファイルで書く必要が出てくる（はず）。

ちなみに、設定ファイルのフォーマットで使えるのはこの4つ。

JSON
JSONC
JSON5
Javascript (CommonJS)

m-yoshiro

「もっと複雑なこと」とは、自分の場合はTokenの特定のパターンを持つ値を異なるフォーマットに変換したり、特定のTokenを出力から除外すること。Style Dictionaryはこれらに対する手段を用意してくれてて、それが Transforms だったり、Filter だったりする。

Transforms はpre-defined な Transform が予め用意されているので、それを使うのもの手。

m-yoshiro

ただ、私の場合は予め用意されているTransformersの中に要望にあったものがなく、自作する必要があった。Style Dictionaryはカスタマイズする手段を提供してている。それが以下のAPI。

...etc

filterだとこんな感じ。(公式のサンプルを引用)

StyleDictionary.registerFilter({
  name: 'isColor',
  matcher: function(token) {
    return token.attributes.category === 'color';
  }
})

上のように、自作した設定を適用したい場合はJSを書く必要がある。
これが置き換えを行なった動機です。

m-yoshiro

JSに置き換えると、今度はそのJSファイルがすぐに肥大化していきました。
自作の設定も複雑なものが増えてきたので、TypeScriptとJestの導入を(心の中で)決意しました。
(おおごとのように見えるけど、まだ規模が小さいコードベースなのでラクでした）

一旦おしまい

m-yoshiro

Style Dicitonaryの設定ファイルをTSに置き換えるまでは、以下のステップを踏んだ。

設定ファイルをJSONからJSファイルに置き換え
Style DictionaryをNPMモジュールとして利用するようにする
TypeScriptに置き換える

m-yoshiro

1. 設定ファイルをJSONからJSファイルに置き換え

置き換えは簡単。JSファイルにした後、JSONの中身を module.exports にセットするだけ。
JSファイルでの設定は、JSONと比べて2つメリットがある。

カスタムの設定を追加することができる (custom transformer, custom filter, ...etc)
設定はJSのオブジェクトなので、柔軟に編集できる

以下は公式のサンプルを引用。transform.myTransform, format.myFormat のように、カスタムの処理を追加できる。

module.exports = {
  source: [`tokens/**/*.json`],
    transform: {
      // Now we can use the transform 'myTransform' below
      myTransform: {
        type: 'name',
        transformer: (token) => token.path.join('_').toUpperCase()
      }
  },
  // Same with formats, you can now write them directly to this config
  // object. The name of the format is the key.
  format: {
    myFormat: ({dictionary, platform}) => {
      return dictionary.allTokens.map(token => `${token.name}: ${token.value}`).join('\n');
    }
  },
  platforms: {
    // ...
  }
}

m-yoshiro

2. Style DictionaryをNPMモジュールとして利用するようにする

Style Dictionaryをnpmモジュールとして読み込んで利用する方法。設定の反映とビルドは、それぞれ　.extend と .buildAllPlatforms を実行して行う。

(後日追記)