-
-
Notifications
You must be signed in to change notification settings - Fork 967
Closed
Labels
preset-wind4Align with Tailwind4 presetAlign with Tailwind4 preset
Description
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
System Info
N/A
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.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
preset-wind4Align with Tailwind4 presetAlign with Tailwind4 preset