🍃

まって！TailwindCSSプラグインで非同期処理書けたんだけど！

2023/06/09に公開

Tailwind CSS

icon

iconify

tech

TailwindCSSのプラグインでは、Promiseを返すと空のルールになります。

matchUtilities({
  prefix: async (value) => {
    return {
      "--property": value
    };
  },
});

// .prefix-\[arbitrary\] {}

オブジェクトの参照を持っておいて、非同期で更新してみても空です。

matchUtilities({
  prefix: (value) => {
    const val = {};
    setTimeout(() => {
      val["--property"] = value;
    }, 100);
    return val;
  },
});

// .prefix-\[arbitrary\] {}

まって！非同期処理書けないんだけど！

ところでこの記事のタイトルを目にした時、あなたはこう思ったのではないでしょうか？

「いや、待たないし」

「なんで待たないといけないの？」

「なんでこの人たちいつも待たせようとしてくるの？」

私はそう思いました。

TailwindCSSのプラグインも同じことを考えています

まって！と言ったところでTailwindCSSのプラグインは待ってくれないのです。

ではどうすれば待ってもらうことができるのか、
早速やっていきたいと思います。

非同期処理を同期処理で実行する

ということで早速やっていきたいと思います。

Nodejsには child_process.spawnSync という関数があり
実行可能ファイルを別プロセスで起動することができます。

また、この関数は起動したプロセスの処理が完了するまで待機するため
非同期処理を書いたプログラムを用意し、それを spawnSync で呼び出すことで
非同期処理を同期的に実行することができます。

async.ts

(async () => {
  // 結果は標準出力に書き込む
  process.stdout.write("まって！");
})();

import { spawnSync } from "child_process";
import { resolve } from "path";

const { status, stdout, stderr } = spawnSync(
  "node",
  [resolve(__dirname, "async")]
);

if (status !== 0) {
  throw new Error(String(stderr));
}

const result = String(stdout);

console.log(result + "非同期処理書けたんだけど！");
// まって！非同期処理書けたんだけど！

そしてこの仕組みをいれて丸一日ほど実装しておいたものがこちら。

Iconifyのアイコンを表示するTailwindCSSプラグインです。
Iconifyは大量のアイコンセットから好きなアイコンを選んで使うことができるサービスです。

しかし、実際には多くのライブラリで事前にアイコンセットのインストールが必要です。

このプラグインが他のものと大きく違うのは事前にアイコンセットをインストールする必要がないところです。

arbitrary values でアイコン名が指定され、プラグインで登録した関数が動作するタイミングでアイコンデータを自動でダウンロードし、CSSのルールに変換して返します。

以上、3分プログラミングのコーナーでした。

まって！非同期処理書けないんだけど！

TailwindCSSのプラグインも同じことを考えています

非同期処理を同期処理で実行する

Discussion