CSS variables: convert var(--abc) into plain values

I am working on a Wordpress child theme where I make extensive use of CSS variable such as:

:root {
    --h1color: #333333;
}
h1 {
    color: var(--h1color);
}

In order to avoid performance decrease I am testing this online tool to re-compile my CSS with variable into a plain CSS, after the styling is completed:

https://css-variables.github.io

Do you see any disadvantage in this procedure?

I am using about 100/150 CSS variables and I would like to keep the style.css file as light as possible.