Unable to use position: running() CSS property

[rymarren]

I am experiencing an issue while using Material UI styled components, which uses this package for CSS types. I was directed to open an issue here by MUI folks: https://github.com/mui/material-ui/issues/34313

Steps to reproduce 🕹

Barebones example:

const StyledThing = styled('div')({ position: 'running(elementName)' });

Current behavior 😯

I get a TS error stating:

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

Syntax: static | relative | absolute | sticky | fixed

Initial value: static

Chrome  Firefox Safari  Edge    IE
1   1   1   12  4
@see — [https://developer.mozilla.org/docs/Web/CSS/position](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html)

Type '"running(elementName)"' is not assignable to type 'PositionProperty | PropsFunc<{}, PositionProperty | undefined> | undefined'.ts(2322)

Expected behavior 🤔

There should be no TS error, this should work.

Context 🔦

https://developer.mozilla.org/en-US/docs/Web/CSS/position#formal_syntax and https://www.w3.org/TR/css-gcpm-3/#running-syntax describe this new syntax.

This CSS rule is important for creating web experiences that can be printed. See https://pagedjs.org/documentation/7-generated-content-in-margin-boxes/#running-elements%3A-headers%2Ffooter-with-specific-(complex)-content for an example.