@Property in css isn't updating its value when I'm setting a new one from style in a div

Question

I'm sorry for that title not very precise. Actually I have the following problem. I'd like to bring a value from a styled component (React with Styletron) to a css file via @property (https://developer.mozilla.org/en-US/docs/Web/CSS/@property). However, the @property is linted with the following statement : "Unknown at rule @propertycss(unknownAtRules)" and isn't updating, taking the default value. You can find my code below :

CSS :

:root{
  --p:90;
}

@property --p {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

React :

const Receipt: FunctionComponent = () => {
  const style = { '--p ': 20 } as React.CSSProperties;
  return (
      <div className="pie" style={style}/>
  );
};

export default Receipt;

Thank you for your help