JIT & @layer for border-inset/outset/groove/ridge

[kkarpeev]

Hello!
I'm trying to define utilities for absent border-styles like inset, outset, ridge and groove.
Doing it like this:

  @layer base {
    @variants focus, hover {
      .border-inset { border-style: inset; }
      .border-outset { border-style: outset; }
      .border-groove { border-style: groove; }
      .border-ridge { border-style: ridge; }
    }
  }

Also tried utilities instead of base.
But JIT still ignores it and keeps saying that:
CssSyntaxError: blah-blah-blah-path/MyComponent.svelte:9:5: The border-inset class does not exist. If border-inset is a custom class, make sure it is defined within a @layer directive.

Can anyone, please, explain what I do wrong?

[simonswiss]

Hey!

Are you able to share your project?

I haven't tried in Svelte, but just copy/pasted your @layer CSS block in a JIT project, and the border- utilities work perfectly on focus and hover 👍