Support custom-ident data type

[c-harding]

I’m looking to create a CSS utility function rule for grid-area. I would like to generate the following rule:

.grid-in-header {
  grid-area: header;
}

where header can stand in for any identifier. This corresponds to the CSS data type <custom-ident>.

Background: I would like to recreate https://savvywombat.com.au/tailwind-css/grid-areas in pure Tailwind/CSS.

Feature request

Support for the following syntax

@utility grid-area-* {
  grid-area: --value(custom-ident);
}

What else I’ve tried

@utility grid-area-* {
  grid-area: --value(*);
}

(Didn’t work either)

Arbitrary values

I know I can use the class grid-area-[header], but it would be nice to be able to avoid it.

@utility grid-area-* {
  /* prettier-ignore */
  grid-area: --value([*]);
}