How can I use #property in #emotion/styled? - emotion-js

Question

Hello I want to customize my css property using the below method (#property).
https://css-tricks.com/using-property-for-css-custom-properties/
How can I use in emotion?
I want to use this inside code below.
export const Typography = styled("h4", {
label: "Typography"
})<{}>(() => {
return {
fontSize: 36,
fontWeight: 400,
marginBottom: 40,
color: palette.grey.default,
width: 300,
letterSpacing: -1
};
});
And make increasing number animation like below.
#property --num1 {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}
#property --num2 {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}
#property --num3 {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}
div {
counter-reset: num1 var(--num1) num2 var(--num2) num3 var(--num3);
font-size: 40px;
font-weight: bold;
animation: animate 2s forwards ease;
}
div:before {
content: counter(num1) counter(num2) counter(num3);
}
#keyframes animate {
to {
--num1: 3;
--num2: 8;
--num3: 999999;
}
}