[csswg-drafts] Allow String Interpolation in CSS (content, url(), etc.) using CSS Variables (#11822)

RodoYolo has just created a new issue for https://github.com/w3c/csswg-drafts:

== Allow String Interpolation in CSS (content, url(), etc.) using CSS Variables ==
Abstract

I propose introducing string interpolation (similar to Python’s f-strings) in CSS, allowing CSS variables (var(--var-name)) to be dynamically inserted into content, background-image: url(), and other string-based properties.

Problem Statement

Currently, CSS variables cannot be concatenated within strings, making it difficult to generate dynamic content or asset paths without JavaScript.

For example, these do not work in current CSS:

```
:root {
  --theme-name: "halloweentheme";
}

.alert::after {
  content: "alerts/" var(--theme-name) "/mail"; /* Invalid */
}

.alert {
  background-image: url("assets/themes/" var(--theme-name) "/background.jpg"); /* Invalid */
}
```

Developers currently rely on workarounds:
 • JavaScript string manipulation.
 • Duplicating CSS rules for different themes or asset paths.
 • attr() for limited cases, which lacks flexibility.

These solutions increase complexity and go against CSS’s goal of reducing reliance on JavaScript for styling.


Proposed Solution: CSS String Interpolation (f-string style)

Introduce a new syntax for string interpolation, similar to f-strings in Python:

```
.alert::after {
  content: f"alerts/{var(--theme-name)}/mail"; 
  /* Expected output: "alerts/halloweentheme/mail" */
}

.alert {
  background-image: url(f"assets/themes/{var(--theme-name)}/background.jpg");
  /* Expected output: url("assets/themes/halloweentheme/background.jpg") */
}
```


Use Cases

1. Dynamic Theming:
 • Easily switch themes with a single variable change (halloweentheme, darkmode, lightmode).

2. Dynamic Asset Paths:
 • Construct background images, icons, and other resources dynamically.

3. Multilingual Support:
 • Set Image paths based on language


This syntax would allow variables to be seamlessly embedded inside strings without requiring external processing.


Potential Implementation Approach
 • Extend CSS variable parsing to allow direct interpolation inside f""-style strings.
 • Align with existing calc() parsing logic for runtime evaluation.
 • Ensure compatibility with all browsers and CSS preprocessors.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11822 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 4 March 2025 16:20:14 UTC