UnoCSS version
66.5.5
Describe the bug
To prevent CSS conflicts, I’d like to add a prefix to the generated class names and variable names.
For example, I want to change the class name text-red-500 to bar-text-red-500, and variable name --colors-red-500 to --foo-colors-red-500.
It appears that there are three places where I can adjust the prefix in presetWind4(): variablePrefix, prefix, and preflights.theme.process. I’ve tried all three of them. There is the final output CSS:
/* layer: properties */
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
*,
::before,
::after,
::backdrop {
--un-text-opacity: 100%;
}
}
@property --un-text-opacity {
syntax: '<percentage>';
inherits: false;
initial-value: 100%;
}
/* layer: theme */
:root,
:host {
--baz-colors-red-500: oklch(63.7% 0.237 25.331);
}
/* layer: default */
.bar-text-red-500 {
color: color-mix(
in srgb,
var(--colors-red-500) var(--foo-text-opacity),
transparent
);
}
@supports (color: color-mix(in lab, red, red)) {
.bar-text-red-500 {
color: color-mix(
in oklab,
var(--colors-red-500) var(--foo-text-opacity),
transparent
);
}
}
Notice that I can still see unmodified variable names --un-text-opacity and --colors-red-500 in the output CSS.
Reproduction
https://unocss.dev/play/#html=DwEwlgbgBAxgNgQwM5ILwCIBGCBOBaAFwFMAPAvHIkPAVgAY70A%2BSkKYs4AenAiYCggA&config=JYWwDg9gTgLgBAbzgEwKYDNgDtUGEJaYDmANHGFKgM6owDq2yALHAL5zpQQhwDkArlggBjKlV4AoCagAekWCgwBDfgBt4aTDnyFgRABQIJcOAHpTcAHTWAqkNwBlB3AhgYwAlWPlKNGFQAuOABtbxMKaloGLGZDMJM4ADclKGAlACNVVAAFSkwZIN50CAgAWl4SePC84AK%2BdJTyyoSEiPRVPQALfyCjFpbfWiD0JVUaZv6TGE7UEFReqv7zOAdUebhumDBA8yJgaf50y2FuU0ERMTOhUSpTTIh000SANmfLAFYP0xhqGFMIvylADujCYlh%2BVBg4KoAGIADIARgAnM9cAjnqU4QAmAAMCLRSMWLQoImogTg%2BlQWBgUAAngBKOAAXgAfIgif0TlhISEANaoWkAXWZcCpNNpHJaXKoECyllUEAMvH5tICFTgKvpkoSwHQFJVlkhKX8DGm%2Bl4pVKJwVUCo5XpjL6k2dYrpwRxwqZGoFlkoYFUSmEqHNlut0Dt6otpQaAC8rbLw-btSZWNrWBNJunFlmWqx6RNBZU8xIgA&css=PQKgBA6gTglgLgUzAYwK4Gc4HsC2YDCAyoWABYJQIA0YAhgHYAmYcUD6AZllDhWOqgAOg7nAB0YAGLcwCAB60cggDYIAXGBDAAUKDBi0mXGADe2sGC704AWgDuCGAHNScDQFYADJ4Dc5sAACtMLKAJ5gggCMLPK2ABR2pPBIcsoAlH4WAEa0yADWTlBYqEw2yFjK3Bpw5LxxAOTllVDoYpSMYgAs3vUZ2gC%2BmjpAA&options=N4XyA&version=66.5.5
System Info
N/A
Validations
UnoCSS version
66.5.5
Describe the bug
To prevent CSS conflicts, I’d like to add a prefix to the generated class names and variable names.
For example, I want to change the class name
text-red-500tobar-text-red-500, and variable name--colors-red-500to--foo-colors-red-500.It appears that there are three places where I can adjust the prefix in
presetWind4():variablePrefix,prefix, andpreflights.theme.process. I’ve tried all three of them. There is the final output CSS:Notice that I can still see unmodified variable names
--un-text-opacityand--colors-red-500in the output CSS.Reproduction
https://unocss.dev/play/#html=DwEwlgbgBAxgNgQwM5ILwCIBGCBOBaAFwFMAPAvHIkPAVgAY70A%2BSkKYs4AenAiYCggA&config=JYWwDg9gTgLgBAbzgEwKYDNgDtUGEJaYDmANHGFKgM6owDq2yALHAL5zpQQhwDkArlggBjKlV4AoCagAekWCgwBDfgBt4aTDnyFgRABQIJcOAHpTcAHTWAqkNwBlB3AhgYwAlWPlKNGFQAuOABtbxMKaloGLGZDMJM4ADclKGAlACNVVAAFSkwZIN50CAgAWl4SePC84AK%2BdJTyyoSEiPRVPQALfyCjFpbfWiD0JVUaZv6TGE7UEFReqv7zOAdUebhumDBA8yJgaf50y2FuU0ERMTOhUSpTTIh000SANmfLAFYP0xhqGFMIvylADujCYlh%2BVBg4KoAGIADIARgAnM9cAjnqU4QAmAAMCLRSMWLQoImogTg%2BlQWBgUAAngBKOAAXgAfIgif0TlhISEANaoWkAXWZcCpNNpHJaXKoECyllUEAMvH5tICFTgKvpkoSwHQFJVlkhKX8DGm%2Bl4pVKJwVUCo5XpjL6k2dYrpwRxwqZGoFlkoYFUSmEqHNlut0Dt6otpQaAC8rbLw-btSZWNrWBNJunFlmWqx6RNBZU8xIgA&css=PQKgBA6gTglgLgUzAYwK4Gc4HsC2YDCAyoWABYJQIA0YAhgHYAmYcUD6AZllDhWOqgAOg7nAB0YAGLcwCAB60cggDYIAXGBDAAUKDBi0mXGADe2sGC704AWgDuCGAHNScDQFYADJ4Dc5sAACtMLKAJ5gggCMLPK2ABR2pPBIcsoAlH4WAEa0yADWTlBYqEw2yFjK3Bpw5LxxAOTllVDoYpSMYgAs3vUZ2gC%2BmjpAA&options=N4XyA&version=66.5.5
System Info
N/A
Validations