Resolving keys and values with prefix adjusted

[unional]

I'm trying to find a way to get utility works with prefix, but without hardcoding the prefix.

Say I am using prefix abc.
Currently, when I define a utility that I want to reference a variable, I have to do this:

/* some.css */
@utility some-width {
  width: var(--abc-some-width);
}

I am building a design system and I want to avoid such hardcoding so that it can be used like this:

@import './some.css' prefix(xyz);

If I use theme(), it resolves the value which is not what I want:

@utility some-width {
  width: theme(--some-width); /* produce `width: 20px;` when `--some-width: 20px;` */
}

Similar issue with variants, where the issue is on the key:

/* dark.css */
@layer theme {
  * {
    @variant dark {
      --abc-some-bg: theme(--red-200);
    }
  }
}

Ideally, we can do:

/* dark.css */
@layer theme {
  * {
    @variant dark {
      --some-bg: theme(--red-200);
    }
  }
}

/* tailwind.css */
@import './dark.css' prefix(xyz);

[unional]

Prior discussion: #16313