feat(preset-mini): support important: variant (#841)

packages/preset-mini/src/variants/misc.ts

@@ -38,9 +38,10 @@ export const variantScope: Variant = {
 
 export const variantImportant: Variant = {
   match(matcher) {
-    if (matcher.startsWith('!')) {
+    const match = matcher.match(/^(important[:-]|!)/)
+    if (match) {
       return {
-        matcher: matcher.slice(1),
+        matcher: matcher.slice(match[0].length),
         body: (body) => {
           body.forEach((v) => {
             if (v[1])
@@ -51,6 +52,7 @@ export const variantImportant: Variant = {
       }
     }
   },
+  autocomplete: '(important)',
 }
 
 export const variantNegative: Variant = {

test/__snapshots__/preset-attributify.test.ts.snap

@@ -8,7 +8,8 @@ exports[`attributify > autocomplete extractor 5`] = `
   md=\\"[--var:var(--another)]\\"
   lg=\\"bg-blue-600\\"
   class=\\"absolute fixed\\"
-  bg=\\"blue-400 hover:blue-500 dark:!blue-5001 dark:hover:blue-600\\"
+  important=\\"text-red bg-red\\"
+  bg=\\"blue-4001 hover:blue-500 dark:!blue-500 dark:hover:blue-600\\"
   text=\\"sm white\\"
   !leading-4
   flex=\\"!~ col\\"
@@ -86,6 +87,8 @@ Set {
   "[lg~=\\"bg-blue-600\\"]",
   "absolute",
   "fixed",
+  "[important~=\\"text-red\\"]",
+  "[important~=\\"bg-red\\"]",
   "[bg~=\\"blue-400\\"]",
   "[bg~=\\"hover:blue-500\\"]",
   "[bg~=\\"dark:!blue-500\\"]",
@@ -226,6 +229,7 @@ exports[`attributify > fixture1 1`] = `
 .dark [bg~=\\"dark\\\\:hover\\\\:blue-600\\"]:hover{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
 [bg~=\\"blue-400\\"]{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));}
 [bg~=\\"hover\\\\:blue-500\\"]:hover{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));}
+[important~=\\"bg-red\\"]{--un-bg-opacity:1 !important;background-color:rgba(248,113,113,var(--un-bg-opacity)) !important;}
 [p~=\\"x-4\\"]{padding-left:1rem;padding-right:1rem;}
 [p~=\\"y-2\\"]{padding-top:0.5rem;padding-bottom:0.5rem;}
 [p~=\\"t-2\\"],
@@ -235,6 +239,7 @@ exports[`attributify > fixture1 1`] = `
 [font~=\\"sans\\"]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,\\"Helvetica Neue\\",Arial,\\"Noto Sans\\",sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\",\\"Noto Color Emoji\\";}
 [text~=\\"sm\\"]{font-size:0.875rem;line-height:1.25rem;}
 [\\\\!leading-4=\\"\\"]{line-height:1rem !important;}
+[important~=\\"text-red\\"]{--un-text-opacity:1 !important;color:rgba(248,113,113,var(--un-text-opacity)) !important;}
 [text~=\\"white\\"]{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}
 [after~=\\"content-unocss\\"]::after{content:\\"unocss\\";}
 @media (min-width: 640px){
@@ -317,6 +322,8 @@ exports[`attributify > variant 1`] = `
   "lg-bg-blue-600",
   undefined,
   undefined,
+  "important-text-red",
+  "important-bg-red",
   "bg-blue-400",
   "hover:bg-blue-500",
   "dark:!bg-blue-500",

test/__snapshots__/preset-mini.test.ts.snap

@@ -42,6 +42,7 @@ 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;}
 .is-hover\\\\:p-4px:is(:hover),
 .not-hover\\\\:p-4px:not(:hover){padding:4px;}
 .not-hover\\\\:p-3:not(:hover){padding:0.75rem;}
@@ -817,6 +818,7 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .lt-sm\\\\:m1{margin:0.25rem;}
 }
 @media (min-width: 640px){
+.sm\\\\:important\\\\:p-3{padding:0.75rem !important;}
 .sm\\\\:m-1,
 .sm\\\\:m1{margin:0.25rem;}
 }

test/assets/preset-mini-targets.ts

@@ -753,6 +753,8 @@ export const presetMiniTargets: string[] = [
   'peer-not-placeholder-shown:text-2xl',
   'sm:m-1',
   'sm:m1',
+  'important:p-3',
+  'sm:important:p-3',
 
   // variants class
   'all-[.target]-[combinator:test-2]',

test/preset-attributify.test.ts

@@ -11,6 +11,7 @@ describe('attributify', () => {
   md="[--var:var(--another)]"
   lg="bg-blue-600"
   class="absolute fixed"
+  important="text-red bg-red"
   bg="blue-400 hover:blue-500 dark:!blue-500 dark:hover:blue-600"
   text="sm white"
   !leading-4
@@ -149,26 +150,26 @@ describe('attributify', () => {
 
     expect(res).not.toBeNull()
 
-    expect(res!.extracted).toMatchInlineSnapshot('"dark:!bg-blue-500"')
+    expect(res!.extracted).toMatchInlineSnapshot('"bg-blue-400"')
     expect(res!.transformSuggestions!([`${res!.extracted}1`, `${res!.extracted}2`]))
       .toMatchInlineSnapshot(`
         [
-          "dark:!blue-5001",
-          "dark:!blue-5002",
+          "blue-4001",
+          "blue-4002",
         ]
       `)
 
     const reversed = res!.resolveReplacement(`${res!.extracted}1`)
     expect(reversed).toMatchInlineSnapshot(`
       {
         "end": 189,
-        "replacement": "dark:!blue-5001",
-        "start": 175,
+        "replacement": "blue-4001",
+        "start": 181,
       }
     `)
 
     expect(fixture1.slice(reversed.start, reversed.end))
-      .toMatchInlineSnapshot('"dark:!blue-500"')
+      .toMatchInlineSnapshot('"blue-400"')
     expect(fixture1.slice(0, reversed.start) + reversed.replacement + fixture1.slice(reversed.end))
       .toMatchSnapshot()
   })