零弐壱蜂

[CSS in JS] 最新のCSSプロパティにVS Codeのシンタックスハイライトを対応させる方法

背景

最新のCSSプロパティ（container-typeやtext-wrap）を利用した場合に以下のような警告が発生する。

Unknown property: 'container-type' ts-styled-plugin(9999)

これはvscode-styled-componentsでシンタックスハイライトを行っている場合、（内部で利用しているライブリが）最新のCSSプロパティに対応していないことが原因だった。

ちなみに@starting-styleに対しても似たような警告が発生する。

Unknown at rule @starting-style ts-styled-plugin(9999)
  • Unknown property
  • Unknown at rule

環境

対応方法

プロジェクトのtsconfig.jsonのpluginsに以下のような項目を追加する。

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@styled/typescript-styled-plugin",
        "lint": {
          "validProperties": ["container-type", "container-name", "text-wrap"],
          "unknownAtRules": "ignore",
          "validate": false
        }
      }
    ]
  }
}

validPropertiesには「Unknown property」として警告が発生したプロパティを追加することで、警告を解消できる。unknownAtRulesでは「Unknown at rule」に対しての無視指定をする。

vscode-styled-componentsがアーカイブ化されている

vscode-styled-componentsはアーカイブ化されているため、メンテナーが出てこない限り今後のメンテナンスは行われない可能性が高い。

NOTE: Sadly this repository is no longer supported or updated by the Styled Components team as of June 2024. If you wish to help develop this code please reach out on Discord or in the issue. We can unarchive this repo if we get contributors but until then it will remain the way it is.

日本語訳:
2024年6月以降、このリポジトリはもはやStyled Componentsチームによってサポートされず、更新されません。このコードの開発を手伝いたい場合は、Discordかissueで連絡してください。貢献者がいればこのリポジトリをアーカイブ解除できますが、それまではこのままになります。

参考