Ages ago when CSS grids came with a repeat() function to simplify defining repetitive columns and rows, I was not alone in wishing for this function to be made generic and work in any context.

After seeing Wes Bos on BlueSky wishing for this exact concept , specifically for repeating segments in a shape() definition, I chimed in with my +1's on making repeat() generic across CSS

Without delay, @noamr opened an issue for the w3c csswg to get that ball rolling.

Moments later I was struck by that inspiration that seems to come from God/heaven/the universe/source, full of the excitement of "I can do that now !" and I began banging out a custom function in codepen, on my phone, to bring our hopes into the present instead of waiting for an official implementation.

Here is CSS --repeat() in full

@function --repeat ( --n , --x ) { --bit7 : calc ( round ( down , var ( --n ) / 128 )); --val6 : calc ( var ( --n ) - var ( --bit7 ) * 128 );

--bit6 : calc ( round ( down , var ( --val6 ) / 64 )); --val5 : calc ( var…