stylelint導入時にstyle属性によるスタイルの適用にエラー

概要

style={{color: 'red'}}などのstyle属性によるスタイルの適用をJSX(TSX)で使っていたのですが、
stylelint導入後にエラーを吐くようになりました。CSSプロパティをうまく認識してくれていないみたいです。

エラー文 custom-property-no-missing-var-function

Unknown rule custom-property-no-missing-var-function.stylelint(custom-property-no-missing-var-function)

そのルール知らない、プロパティを変数か関数で定義しないといけないんじゃない?と言われています。
そもそもcssプロパティなので定義も何もないんだけど、、参りました。

custome-property-no-missing-var-functionはカスタムプロパティの使用時に出るエラー。

    :root { --foo: red; }
    a { color: --foo; }
/**            ↑
 *             This custom property */

参考 stylelint公式より

エラー文 function-no-unknown

Unknown rule function-no-unknown. Did you mean unit-no-unknown?stylelint(function-no-unknown)

よくわからない関数を使っていると言われています。関数でもないんだよな〜。

a { transform: unknown(1); }
/**            ↑
 * Functions like this */

参考 stylelint

結論

こちらを参考にして修正を行いました。

<span style={{color: 'red'} as CSSProperties}> 

変数で書く場合

const style = {color: 'red'};
<span style={style as CSSProperties}> 

もしくは

const style = {color: 'red'}  as CSSProperties;
<span style={style}> 

右辺と左辺で型の互換性がないというのが主な原因だったようです。
該当箇所にas CSSPropertiesをつけるのが面倒でしたが、一旦解決。