Invalid characters in generated custom properties are not escaped #4957
Description
UnoCSS version
v66.5.4
Describe the bug
Generated custom properties should escape invalid characters, the same way selectors are escaped. E.g.:
.p-1\/2rlh{ padding: var(--spacing-1/2rlh); }should be
.p-1\/2rlh{ padding: var(--spacing-1\/2rlh); }Notice the missing \ in --spacing-1/2rlh.
Otherwise it errors:
Thank you very much in advance.
Reproduction
uno.config.js
import presetWind4 from "@unocss/preset-wind4";
import { defineConfig } from "unocss";
export default defineConfig({
cli: {
entry: {
patterns: ["sample.html"],
outFile: "sample.css",
},
},
presets: [
presetWind4({ preflights: { reset: false }}),
],
theme: {
spacing: {
"1/2rlh": "0.5rlh",
},
},
});sample.html
<!doctype html>
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="sample.css">
</head>
<body class="p-1/2rlh">
Sample
</body>
</html>Compiling it, produces:
sample.css
/* layer: theme */
:root, :host {
--spacing-1/2rlh: 0.5rlh;
}
/* layer: default */
.p-1\/2rlh{padding:var(--spacing-1/2rlh);}Instead, the expected output should be:
/* layer: theme */
:root, :host {
--spacing-1\/2rlh: 0.5rlh;
}
/* layer: default */
.p-1\/2rlh{padding:var(--spacing-1\/2rlh);}System Info
No response
Validations
- Read the Contributing Guidelines.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.