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(--val6) - var(--bit6) * 64);
--bit5: calc(round(down, var(--val5) / 32));
--val4: calc(var(--val5) - var(--bit5) * 32);
--bit4: calc(round(down, var(--val4) / 16));
--val3: calc(var(--val4) - var(--bit4) * 16);
--bit3: calc(round(down, var(--val3) / 8));
--val2: calc(var(--val3) - var(--bit3) * 8);
--bit2: calc(round(down, var(--val2) / 4));
--val1: calc(var(--val2) - var(--bit2) * 4);
--bit1: calc(round(down, var(--val1) / 2));
--bit0: calc(var(--val1) - var(--bit1) * 2);
--pow0: var(--x);
--pow1: var(--pow0) var(--pow0);
--pow2: var(--pow1) var(--pow1);
--pow3: var(--pow2) var(--pow2);
--pow4: var(--pow3) var(--pow3);
--pow5: var(--pow4) var(--pow4);
--pow6: var(--pow5) var(--pow5);
--pow7: var(--pow6) var(--pow6);
result: if(style(--bit0 = 1): var(--pow0); else: ;)
if(style(--bit1 = 1): var(--pow1); else: ;)
if(style(--bit2 = 1): var(--pow2); else: ;)
if(style(--bit3 = 1): var(--pow3); else: ;)
if(style(--bit4 = 1): var(--pow4); else: ;)
if(style(--bit5 = 1): var(--pow5); else: ;)
if(style(--bit6 = 1): var(--pow6); else: ;)
if(style(--bit7 = 1): var(--pow7); else: ;);
}
And hands on:
How it works
Ultimately what any non-iterative repeat() function actually is just casting the number-of-times-to-repeat parameter into the unary number base using the 2nd parameter as the symbol representing "1".
--repeat(4,1);
/* 1111 */
The easiest way to convert to unary in CSS is to first convert it to binary because ...the most apt way to describe what it means to read a binary number in the context of a --repeat() function is to say:
For each bit:
if it's 1,
add the corresponding power of two to the total value.
If it's 0,
add 0 (or just do nothing) to the total value.
For example, what is 0b10111?
1 x 2^4 (1 x 16)
+ 0 x 2^3 (0 x 8)
+ 1 x 2^2 (1 x 4)
+ 1 x 2^1 (1 x 2)
+ 1 x 2^0 (1 x 1)
------------------
23
So converting to unary from there becomes a sequence of known concatenations (additions) rather than an arbitrary length from a direct conversion. Ultimately, the corresponding binary bit represents a boolean flag - do we include this specific known set in the final concatenation or not?
(1 yes) 1111 1111 1111 1111
(0 nah) 1111 1111
(1 yes) 1111
(1 yes) 11
(1 yes) 1
---------------------------
(0b10111) 1111 1111 1111 1111 1111 11 1
(the spaces are for human readability and not actually part of unary)
Converting decimal to binary in CSS
Long long ago when Ana Tudor pointed out how she simulates mod() on twitter (which had been known to her even longer), I hadn't even begun playing with custom properties of the Houdini spec yet, but I realized how much potential was in that idea to do something impossible CSS - to add binary operators to the language. I released css-bin-bits a month later - it works exactly like the start of this repeat function:
We use rounded integer casting (which is the same as floor(n) or round(down, n, 1), after division of powers of two, in sequence, to bite off the most significant bit of an input number:
x = 23; # 0b10111
dec = x / 16; # 1.3125
0or1 = int-round-down-floor(dec) # 1
x - 0or1 * 16 = 5 # 0b00101
...
just do that until the last bit and you've converted your input from decimal into binary, with each bit in its own var.
You do have to assume a maximum value. The
--repeat()function I provided supports 8 bits, 255 total repeats.
(css-bin-bits supports multiple 16 bit values)
In modern CSS, you implement this sequence exactly like this:
--bit7: calc(round(down, var(--n) / 128));
--val6: calc(var(--n) - var(--bit7) * 128);
--bit6: calc(round(down, var(--val6) / 64));
--val5: calc(var(--val6) - var(--bit6) * 64);
--bit5: calc(round(down, var(--val5) / 32));
--val4: calc(var(--val5) - var(--bit5) * 32);
--bit4: calc(round(down, var(--val4) / 16));
--val3: calc(var(--val4) - var(--bit4) * 16);
--bit3: calc(round(down, var(--val3) / 8));
--val2: calc(var(--val3) - var(--bit3) * 8);
--bit2: calc(round(down, var(--val2) / 4));
--val1: calc(var(--val2) - var(--bit2) * 4);
--bit1: calc(round(down, var(--val1) / 2));
--bit0: calc(var(--val1) - var(--bit1) * 2);
Start with the most significant bit supported, divide by that corresponding power of two, round that result down, if it's 1, subtract that power of two from --n and use that value for the next step... continue until the last bit.
Converting binary to unary in CSS
We mentioned earlier that it's concatenating known sets of the symbol back-to-back, based on powers of two.
So we must generate the list of known sets up to our maximum.
First, to repeat any CSS variable is straight forward:
--x: 👽;
--pow0: var(--x);
--pow1: var(--pow0) var(--pow0);
/* --pow1 = 👽 👽 */
That's 2^0 and 2^1 taken care of.
Since each power of 2 is double the previous, we just complete the set by doubling the previous until max:
--pow2: var(--pow1) var(--pow1);
--pow3: var(--pow2) var(--pow2);
--pow4: var(--pow3) var(--pow3);
--pow5: var(--pow4) var(--pow4);
--pow6: var(--pow5) var(--pow5);
--pow7: var(--pow6) var(--pow6);
and we inch towards the billion laughs attack.
CSS has protections for the billion laughs attack built in! During development of augmented-ui v2 in early 2020 after I invented the Space Toggle, I actually triggered Chrome's new protection limit and Anders (who is very often the one responsible for implementing incredibly awesome CSS features in Chrome) bumped up their low-ish limit to something very comfortable for all of CSS since we had legitimate use cases!
Now that we have our sets built out, we just need to check each of our bits with the new if(style()), output the corresponding --powX variable if it's 1, else an empty "space" in a concatenation block, and we're done!
result: if(style(--bit0 = 1): var(--pow0); else: ;)
if(style(--bit1 = 1): var(--pow1); else: ;)
if(style(--bit2 = 1): var(--pow2); else: ;)
if(style(--bit3 = 1): var(--pow3); else: ;)
if(style(--bit4 = 1): var(--pow4); else: ;)
if(style(--bit5 = 1): var(--pow5); else: ;)
if(style(--bit6 = 1): var(--pow6); else: ;)
if(style(--bit7 = 1): var(--pow7); else: ;);
if(style()) is such incredible work, once it's baseline, it makes the Space Toggle completely obsolete and already does far more and far cooler things than Space Toggle alone can do.
It's even properly short-circuited - so those --powX variables are not computed unless they are used. (Only the dependency tree for them is calculated, which is a simple straight line from --pow7 ... to --pow0 to --x)
Like always, my work feels inspired/guided, and comes with amazing synchronicities leading up to it. I had absolutely no idea this
if(style( = ))syntax existed, and it doesn't work withif(style( : ))syntax. But the day prior, in a completely unrelated thread, I saw T. Afif post a link to an article teaching about it. When my assumed implementation didn't work using:, I got a tap on my brain, swapped the syntax to what I just learned about, and suddenly it worked! Thank you my friend!
--repeat() use cases and demos!
I've packaged it up for easy use anywhere just by importing it into your CSS file:
@import url("https://unpkg.com/@propjockey/doubledash.css@0.0.2/functions/repeat.css");
Use it in content
Use it with text-shadow
--repeat-join(--n, --join, --x)
The minimum value for --n is 1, we can pass a comma as a parameter by wrapping it in the do-not-spread curly braces operator as shown in the codepen.
We modify the original repeat function by subtracting 1 from --n before turning it into binary. We add --join to --x for --pow0, which then duplicates join everywhere before --x --n minus 1 times.
Then on the output we use --x directly once first, then conditionally concatenate all the --powX values like before.
Leave a star while you're there!
Use it with drop-shadow() in a filter
Use it to repeat line segments in shape()
Use it for any part of any property!
Need to repeat subsets your animation-* property list without using the default looping of the full list?
This solves it!
Need to repeat any subset of any parallel-array CSS properties?
This solves it!
Need to repeat steps in your conic-gradient() only a few times?
This solves it!
Need to repeat something not listed? Leave a comment!
Open Contact 👽
Please do reach out if you need help with any of this, have feature requests, or want to share what you've created!
| PropJockey | CodePen | DEV Blog | GitHub |
|---|---|---|---|
 |
 |
 |
 |
| Mastodon | X | Bluesky | |
|---|---|---|---|
 |
 |
 |
 |
My heart is open to receive abundance in all forms,
flowing to me in many expected and unexpected ways.
| PayPal | Ko-fi | Venmo |
|---|---|---|
 |
 |
 |
| BTC | XRP | ETH |
|---|---|---|
 |
 |
 |
| bc1qe...usgn9 | rw2ci...nWKQg : 459777128 |
0x674...beF54 |
Top comments (0)