On gists

Css only type grinding

CSS CSS trick

demo.css Raw #

/* https://www.bitovi.com/blog/css-only-type-grinding-casting-tokens-into-useful-values */

@property --variant {
  syntax: "primary|secondary|success|error";
  initial-value: primary;
  inherits: true;
}

@property --_v-primary-else-0 {
  syntax: "primary|<integer>"; initial-value: 0; inherits: true;
}


@property --_v-primary-bit {
  syntax: "<integer>"; initial-value: 1; inherits: true;
}


.element {
  --variant: primary;
  --_v-primary-else-0: var(--variant);
  --_v-primary-bit: var(--_v-primary-else-0);
}