0

Is there a way to get an intermediate value for CSS custom prop using JS?

I have a custom prop --text--primary which is defined using other prop:

--gray90: #333;
--text--primary: var(--gray90);

What I want is by having --text--primary, get an intermediate value: --gray90. I know, there is getPropertyValue but it works with computed values only, so it returns #333. Is there a way to do it without parsing the CSS?

Rusty Key
  • 41
  • 3
  • You could loop over the [document.styleSheets](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/styleSheets) but not sure if that is really optimal. – Reyno Dec 01 '20 at 07:54
  • @Reyno, yep, unfortunately that would be pretty heavy in my case – Rusty Key Dec 01 '20 at 08:11
  • There's a fairly recent answer from Bernesto on [link]https://stackoverflow.com/questions/20377835/how-to-get-css-class-property-in-javascript which looks promising as it's trying to get intermediate values (which the actual question wasn't). I haven't tried it though and it looks quite heavy code-wise. – A Haworth Dec 01 '20 at 09:28
  • @AHaworth thanks, but that's basically what I wanted to avoid. I hoped that there is a native way of getting them via some JS helper, but it's understandable that there is none, since the whole idea might be considered as pretty fishy. I'll go with parsing CSS then. – Rusty Key Dec 02 '20 at 07:58

0 Answers0