CSS repeat() function now works for any value

Earlier this year, discussions began on extending the CSS repeat() function beyond its original purpose of defining repetitive grid columns and rows. Developers wanted a more versatile solution that could work in shapes and other contexts, sparking renewed interest in making the function universally applicable across CSS specifications.

A front-end engineer noticed Wes Bos on BlueSky advocating for this exact concept, particularly for repeating segments in CSS shape() definitions. The engineer quickly added their support and proposed making repeat() generic across the language. Shortly after, Noam R opened an issue with the W3C CSS Working Group to initiate the process of standardizing this extended functionality.

Inspired by the potential of this enhancement, the engineer began developing a custom solution immediately, crafting a functional prototype on CodePen using just a mobile device. This approach aimed to deliver immediate value rather than deferring implementation until an official CSS specification was finalized.

Introducing the custom --repeat() function in CSS

The engineer created a fully functional custom property function named --repeat() that accepts two parameters: the repeat count and the value to be repeated. This solution leverages CSS custom properties and the calc() function to handle the conversion process internally.

Here’s the complete implementation of the --repeat() function:

@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: ;);
}

## Understanding the core mechanics behind --repeat()

At its core, any non-iterative version of the `repeat()` function essentially converts the repetition count parameter into a unary number system, using the second parameter as the symbol for "one."

For example, `--repeat(4, 1)` would produce:

1111

This is equivalent to concatenating the value four times in a row.

The most efficient method to achieve this conversion in CSS is through an intermediate binary step. This approach is particularly effective because it allows the--repeat() function to interpret each bit of the input number as a boolean flag:

- If the bit is 1, include the corresponding power-of-two concatenation.
- If the bit is 0, skip that concatenation entirely.

To illustrate, consider the binary number `0b10111`. This translates to the decimal value 23. The unary representation derived from this binary step would look like:

1111 1111 1111 1111 1111 11 1

The spaces are included purely for readability and are not part of the actual unary output.

## Converting decimal to binary using CSS custom properties

Several years ago, developer Ana Tudor demonstrated on Twitter how to simulate the `mod()` function in CSS, a technique she had been using for an extended period. This revelation highlighted the potential of CSS custom properties to introduce operations that were previously impossible within the language.

Following this insight, the engineer released a tool named css-bin-bits, which operates in a manner similar to the initial steps of the custom `--repeat()` function. The process involves:

- Dividing the input number by ascending powers of two.
- Applying integer rounding (equivalent to `floor()`) to extract the most significant bit.
- Continuing this sequence until the least significant bit is processed.

For instance, converting the decimal value 23 into binary would proceed as follows:

--input: 23;
--bit4: calc(round(down, var(--input) / 16));
--remaining: calc(var(--input) - var(--bit4) * 16);
--bit3: calc(round(down, var(--remaining) / 8));
--remaining2: calc(var(--remaining) - var(--bit3) * 8);

This method requires setting an assumed maximum value. The custom `--repeat()` function supports up to eight bits, allowing a maximum of 255 repetitions. The css-bin-bits tool, in contrast, supports multiple 16-bit values for broader use cases.

## Generating unary output from binary flags in CSS

Once the input number is converted into its binary representation, each bit serves as a boolean switch to determine whether a specific known set of concatenations should be included in the final unary output.

To support this functionality, the known sets of concatenations must be pre-generated up to the maximum supported value. For example, the power-of-two values for the `--repeat()` function are built as follows:

--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);

This approach ensures that the output is generated efficiently without requiring iterative loops, which remain unsupported in current CSS specifications.

## How developers can start using --repeat() today

While waiting for official CSS specifications to include the generic `--repeat()` function, developers can begin experimenting with this custom implementation immediately. The process involves:

- Defining the `--repeat()` function using CSS custom properties.
- Using the calc() function with integer rounding to handle binary conversion.
- Applying the result to any CSS variable or value that requires repetition.

Here’s a quick hands-on example of how to use the custom `--repeat()` function:

.custom-repeat {
  --output: var(--repeat(4, --x));
  display: flex;
  gap: 1rem;
}

This solution empowers developers to achieve more with CSS today, rather than deferring implementation until future specifications are finalized and widely adopted.

The development community has taken a significant step forward in expanding the capabilities of CSS custom properties and functions. With tools like css-bin-bits and custom implementations like `--repeat()`, developers can push the boundaries of what is currently possible in CSS, even without official support for advanced operations.

Looking ahead, the proposal to make the `repeat()` function generic across CSS specifications could soon gain momentum, supported by community-driven initiatives and tools that demonstrate immediate value. This approach not only accelerates innovation but also provides practical solutions that developers can adopt today, shaping the future of CSS specifications and standards.