fix(preset-mini): support important suffix

antfu · antfu · commit accc99362d84 · 2022-06-13T11:41:17.000+08:00
diff --git a/packages/preset-mini/src/variants/important.ts b/packages/preset-mini/src/variants/important.ts
@@ -3,10 +3,17 @@ import type { Variant } from '@unocss/core'
 export const variantImportant: Variant = {
   name: 'important',
   match(matcher) {
+    let base: string | undefined
+
     const match = matcher.match(/^(important[:-]|!)/)
-    if (match) {
+    if (match)
+      base = matcher.slice(match[0].length)
+    else if (matcher.endsWith('!'))
+      base = matcher.slice(0, -1)
+
+    if (base) {
       return {
-        matcher: matcher.slice(match[0].length),
+        matcher: base,
         body: (body) => {
           body.forEach((v) => {
             if (v[1])
@@ -17,5 +24,4 @@ export const variantImportant: Variant = {
       }
     }
   },
-  autocomplete: '(important)',
 }
diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap
@@ -299,7 +299,6 @@ exports[`attributify > fixture2 1`] = `
 [all\\\\:transition-400=\\"\\"] *{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:400ms;}
 [transition~=\\"\\\\32 00\\"]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;}
 [after~=\\"content-\\\\[\\\\!\\\\]\\"]::after{content:!;}
-[before~=\\"content-\\\\!\\"]::before{content:\\"!\\";}
 @media (min-width: 640px){
 [sm~=\\"bg-blue-600\\"]{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
 }"
diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -51,7 +51,8 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .pxy{padding:1rem;}
 .hover\\\\:\\\\!p-1:hover{padding:0.25rem !important;}
 .hover\\\\:p-5:hover{padding:1.25rem;}
-.important\\\\:p-3{padding:0.75rem !important;}
+.important\\\\:p-3,
+.p3\\\\!{padding:0.75rem !important;}
 .is-hover\\\\:p-4px:is(:hover),
 .not-hover\\\\:p-4px:not(:hover){padding:4px;}
 .not-hover\\\\:p-3:not(:hover){padding:0.75rem;}
@@ -250,6 +251,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .border-is-style-double{border-inline-start-style:double;}
 .after\\\\:content-\\\\[unocss\\\\]::after,
 .content-\\\\[unocss\\\\]{content:unocss;}
+.content-\\\\[\\\\!\\\\]{content:!;}
 .content-\\\\[attr\\\\(dashed-attr\\\\)\\\\]{content:attr(dashed-attr);}
 .content-unocss{content:\\"unocss\\";}
 .content-empty,
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -310,6 +310,7 @@ export const presetMiniTargets: string[] = [
   'order-none',
   'content-start',
   'content-center',
+  'content-[!]',
   'items-end',
   'self-stretch',
   'place-content-stretch',
@@ -772,6 +773,7 @@ export const presetMiniTargets: string[] = [
   'sm:m1',
   'important:p-3',
   'sm:important:p-3',
+  'p3!',
 
   // variants class
   'all-[.target]-[combinator:test-2]',
