How do I check if CSS @layer is supported in CSS and Javascript?

Question

So I know that @support and CSS.supports can be used to check if certain features is available but I cannot in anyway make it works to detect if CSS @layer is available or not. I am 100% sure my browser supports it but the following checks all return false:

console.log(CSS.supports("@layer"))
console.log(CSS.supports("@layer a;"))
console.log(CSS.supports("@layer a {  }"))
console.log(CSS.supports("layer"))
console.log(CSS.supports("layer: 1"))
console.log(CSS.supports("layer", 1))

p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

<div class="box">
  <p>Hello, world!</p>
</div>

The above text shows as purple for me so I know @layer works and DevTools' CSS Layer button shows up. However all the tests are false.

What is the correct prompt for this check?

Answer 1

One way might be to test the CSSOM for the presence of one of the Layer Rule types. So for example

console.log(typeof CSSLayerBlockRule === 'function')