feat(rule-utils): add details-content pseudo to pseudo.ts (#5138)

henrikvilhelmberglund · web-flow · commit 2a2c92d91fc7 · 2026-03-08T22:29:29.000Z
diff --git a/packages-presets/rule-utils/src/pseudo.ts b/packages-presets/rule-utils/src/pseudo.ts
@@ -76,6 +76,7 @@ export const PseudoClasses: Record<string, string> = Object.fromEntries([
   ['before', '::before'],
   ['after', '::after'],
   ['file', '::file-selector-button'],
+  ['details-content', '::details-content'],
 ].map(key => Array.isArray(key) ? key : [key, `:${key}`]))
 
 export const PseudoClassesKeys = Object.keys(PseudoClasses)
diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
@@ -641,6 +641,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .hover\:not-first\:checked\:bg-red\/10:checked:not(:first-child):hover{background-color:rgb(248 113 113 / 0.1);}
 .hover\:not-first\:checked\:bg-true-gray\/10:checked:not(:first-child):hover{background-color:rgb(163 163 163 / 0.1);}
 .file\:bg-violet-50::file-selector-button{--un-bg-opacity:1;background-color:rgb(245 243 255 / var(--un-bg-opacity));}
+.details-content\:bg-green-100::details-content{--un-bg-opacity:1;background-color:rgb(220 252 231 / var(--un-bg-opacity));}
 .bg-opacity-\[--opacity-variable\],
 .bg-opacity-\$opacity-variable{--un-bg-opacity:var(--opacity-variable);}
 .bg-opacity-45{--un-bg-opacity:0.45;}
diff --git a/test/assets/output/preset-wind4-targets.css b/test/assets/output/preset-wind4-targets.css
@@ -746,6 +746,7 @@
 .hover\:not-first\:checked\:bg-red\/10:checked:not(:first-child):hover{background-color:color-mix(in srgb, var(--colors-red-DEFAULT) 10%, transparent) /* oklch(70.4% 0.191 22.216) */;}
 .hover\:file\:bg-violet-100::file-selector-button:hover{background-color:color-mix(in srgb, var(--colors-violet-100) var(--un-bg-opacity), transparent) /* oklch(94.3% 0.029 294.588) */;}
 .file\:bg-violet-50::file-selector-button{background-color:color-mix(in srgb, var(--colors-violet-50) var(--un-bg-opacity), transparent) /* oklch(96.9% 0.016 293.756) */;}
+.details-content\:bg-green-100::details-content{background-color:color-mix(in srgb, var(--colors-green-100) var(--un-bg-opacity), transparent) /* oklch(96.2% 0.044 156.743) */;}
 .bg-opacity-\[--opacity-variable\],
 .bg-opacity-\$opacity-variable{--un-bg-opacity:var(--opacity-variable);}
 .bg-opacity-45{--un-bg-opacity:45%;}
@@ -1992,6 +1993,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .hover\:not-first\:checked\:bg-red\/10:checked:not(:first-child):hover{background-color:color-mix(in oklab, var(--colors-red-DEFAULT) 10%, transparent) /* oklch(70.4% 0.191 22.216) */;}
 .hover\:file\:bg-violet-100::file-selector-button:hover{background-color:color-mix(in oklab, var(--colors-violet-100) var(--un-bg-opacity), transparent) /* oklch(94.3% 0.029 294.588) */;}
 .file\:bg-violet-50::file-selector-button{background-color:color-mix(in oklab, var(--colors-violet-50) var(--un-bg-opacity), transparent) /* oklch(96.9% 0.016 293.756) */;}
+.details-content\:bg-green-100::details-content{background-color:color-mix(in oklab, var(--colors-green-100) var(--un-bg-opacity), transparent) /* oklch(96.2% 0.044 156.743) */;}
 .decoration-purple\/50{text-decoration-color:color-mix(in oklab, var(--colors-purple-DEFAULT) 50%, transparent) /* oklch(71.4% 0.203 305.504) */;}
 .data-\[invalid\~\=grammar\]\:underline-green-600[data-invalid~=grammar]{text-decoration-color:color-mix(in oklab, var(--colors-green-600) var(--un-line-opacity), transparent) /* oklch(62.7% 0.194 149.214) */;}
 .underline-red-500{text-decoration-color:color-mix(in oklab, var(--colors-red-500) var(--un-line-opacity), transparent) /* oklch(63.7% 0.237 25.331) */;}
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -1176,6 +1176,7 @@ export const presetMiniTargets: string[] = [
   'hover:file:bg-violet-100',
   'backdrop:shadow-green',
   'backdrop-element:shadow-green-100',
+  'details-content:bg-green-100',
 
   // variants - pseudo classes
   'rtl:text-right',
