gatsby-plugin-linaria-typescript

Gatsby.jsの環境で、typescriptとlinariaを組み合わせて利用する際に利用するのを目的としたプラグイン

同系統のもので、gatsby-plugin-linariaがあるが、gatsby-plugin-typescriptと併用利用しないといけないのとそのログが煩わしいと個人的に感じた為、pluginを作成しようと思った

hanetsuki 2022/02/05

Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.

現在発生しているバグ。

Nextであるが、同様のバグ：

本家Linariaのissue：

以上から、babel周りの問題であることが窺える。

hanetsuki 2022/02/05

今回作成してあるpluginは一度、local環境で動いた設定を元に作成している為、localに移植すれば動くには動く。。。

pluginの中にbabel.config.jsを仕込んでいるが、これが読み込まれていないのか、それともplugin化する事による読み込み順序の弊害なのか。

babel.config.js

module.exports = {
  presets: [
    'babel-preset-gatsby-package',
    '@babel/preset-typescript',
    [
      '@linaria',
      {
        evaluate: true,
        displayName: process.env.NODE_ENV !== 'production',
      },
    ],
  ],
}

hanetsuki 2022/02/05に更新

npm package
local plugin
プロジェクト埋め込み

それぞれ改めて検証してみたがうまくいったのはプロジェクト埋め込みのみだった。

gatsbyのライフサイクルに問題がありそうだ。

babel.config.jsについては、プロジェクトに直接起票することで、前述^[1]については解決することができた。

しかし、styleは反映されなかった。

google chrome developerを確認したところ、classNameに値は付与されていたが、styleが吐き出されていないようだった。これはどこに関連づいているのか別途調べた方がよさそう（？）

脚注

Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly. ↩︎

hanetsuki 2022/02/05

ひとまず、プロジェクト内部で設定する一例をレポジトリにpushしました。