css-var-hoist

English | 简体中文

css-var-hoist

This function promotes variables in the css string to the root, in order to solve the duplication of a large number of local blocks in Unocss and Tailwind

Purpose

• origin css

[border~="gray-200"] {
  --un-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--un-border-opacity));
}
.dark .dark\:bg-hex-121212 {
  --un-bg-opacity: 1;
  background-color: rgba(18, 18, 18, var(--un-bg-opacity));
}

• hoisted css

:root {
  --un-border-opacity-with-value-hash: 1;
  --un-bg-opacity-with-value-hash: 1;
}
[border~="gray-200"] {
  border-color: rgba(229, 231, 235, var(--un-border-opacity-with-value-hash));
}
.dark .dark\:bg-hex-121212 {
  background-color: rgba(18, 18, 18, var(--un-bg-opacity-with-value-hash));
}

☕

buy me a cup of coffee

License

MIT

Sponsors