VS CodeのCSSでUnknown at rule @scopeが表示されるときの対処法

VS CodeのCSSでUnknown at rule @scope

VS CodeのCSSで@scopeを使用すると「Unknown at rule @scope」という警告が表示されます。

この警告はVS CodeのCSSバリデーターが最新仕様である@scopeルールをまだ認識していないために発生します。

CSS

/* @scope を使用したコードだと警告が出る */
@scope (.RootHome) {
  h1 {
    color: blue;
  }
}

/* @scope を使用したコードだと警告が出る */
@scope (.RootHome) {
  h1 {
    color: blue;
  }
}

@tailwindなどであればVS Code拡張機能のPostCSS Language Supportをインストールすれば「Unknown at rule @tailwind」の警告が表示されなくなりますが、@scopeの警告は消えません。

Unknown at rule @scopeの警告を消す方法

@scopeの警告を消すにはプロジェクトルートに.vscodeディレクトリを作成して、その中にcss-custom-data.jsonとsettings.jsonを入れて設定を追加することで警告を消せます。

css-custom-data.json

{
  "version": 1.2,
  "atDirectives": [
    {
      "name": "@scope",
      "description": "Limits selector matching to a subtree rooted at the scope start selector.",
      "references": [
        {
          "name": "MDN",
          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@scope"
        }
      ]
    }
  ]
}

{
  "version": 1.2,
  "atDirectives": [
    {
      "name": "@scope",
      "description": "Limits selector matching to a subtree rooted at the scope start selector.",
      "references": [
        {
          "name": "MDN",
          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@scope"
        }
      ]
    }
  ]
}

settings.json

{
  "css.customData": [".vscode/css-custom-data.json"]
}

{
  "css.customData": [".vscode/css-custom-data.json"]
}

@scopeルールはCSSの中でも特に便利なルールで、今後使われる機会が増えるのでVS Codeでの警告の消し方も覚えておいたほうが良いでしょう。

@scope - CSS | MDN

VS CodeのCSSでUnknown at rule @scope

Unknown at rule @scopeの警告を消す方法

関連した記事