tailwindでvariantをまとめて付ける
tailwindcss便利だけど，variantを付けるのがダルいことがある
md:flex-col md:space-y-0 md:space-x-4とか書くの割とつらい
まとめて付けるやつが欲しい
tw.md("flex-col", "space-y-0", "space-x-4")って書いたら上のやつと同等になってほしい
問題として，tailwindcssは静的に確定する値しか使えないので，twを普通にJavaScriptのオブジェクトとして定義することはできない
アプローチ
1. babel-plugin-macrosを使ってBabelの上でtwを実装する
つくった
2. tailwindcssのtransformerとしてBabelを使った変換を入れる
@babel/core使うとサクっと書けるけど，パッケージとして提供するのもアリだな
code:babel.config.js
module.exports = {
...
plugins: "babel-plugin-macros"
...
}
code:tailwind.config.js
const transformer =
ext =>
content =>
// filenameはbabelが必要なパーサーのモードを選ぶのに必要
require("@babel/core").transformSync(content, { filename: content.${ext} }).code
module.exports = {
...
// purge: ...ではなく
purge: {
content: ...
transform: {
"js": transformer("js"),
"jsx": transformer("jsx"),
"ts": transformer("ts"),
"tsx": transformer("tsx"),
}
},
...
}