Skip to content

presetWind4 cannot rewrite variable prefix #4989

@ocavue

Description

@ocavue

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

Metadata

Metadata

Assignees

Labels

preset-wind4Align with Tailwind4 preset

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions