fix(preset-mini)!: don't apply negative variant on non-target (#1098)

packages/core/src/generator/index.ts

@@ -341,14 +341,26 @@ export class UnoGenerator {
 
   applyVariants(parsed: ParsedUtil, variantHandlers = parsed[4], raw = parsed[1]): UtilObject {
     const handlers = [...variantHandlers].sort((a, b) => (a.order || 0) - (b.order || 0))
-    const entries = handlers.reduce((p, v) => v.body?.(p) || p, parsed[2])
-    const selector = handlers.reduce((p, v) => v.selector?.(p, entries) || p, toEscapedSelector(raw))
+
+    let entries: CSSEntries = parsed[2]
+    let selector = toEscapedSelector(raw)
+    let parent: string | undefined
+    let layer: string | undefined
+    let sort: number | undefined
+    handlers.forEach((v) => {
+      entries = v.body?.(entries) || entries
+      selector = v.selector?.(selector, entries) || selector
+      parent = Array.isArray(v.parent) ? v.parent[0] : v.parent || parent
+      layer = v.layer || layer
+      sort = v.sort || sort
+    })
+
     const obj: UtilObject = {
       selector: movePseudoElementsEnd(selector),
       entries,
-      parent: handlers.reduce((p: string | undefined, v) => Array.isArray(v.parent) ? v.parent[0] : v.parent || p, undefined),
-      layer: handlers.reduce((p: string | undefined, v) => v.layer || p, undefined),
-      sort: handlers.reduce((p: number | undefined, v) => v.sort || p, undefined),
+      parent,
+      layer,
+      sort,
     }
 
     for (const p of this.config.postprocess)

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

@@ -2,6 +2,11 @@ import type { Variant } from '@unocss/core'
 import { CONTROL_MINI_NO_NEGATIVE } from '../utils'
 
 const numberRE = /[0-9.]+(?:[a-z]+|%)?/
+
+const ignoreProps = [
+  /opacity|color|flex/,
+]
+
 export const variantNegative: Variant = {
   name: 'negative',
   match(matcher) {
@@ -18,13 +23,16 @@ export const variantNegative: Variant = {
           const value = v[1]?.toString()
           if (!value || value === '0')
             return
+          if (ignoreProps.some(i => v[0].match(i)))
+            return
           if (numberRE.test(value)) {
             v[1] = value.replace(numberRE, i => `-${i}`)
             changed = true
           }
         })
         if (changed)
           return body
+        return []
       },
     }
   },

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

@@ -7,20 +7,6 @@ exports[`preset-mini > custom var prefix 1`] = `
 .scale-100{--hi-scale-x:1;--hi-scale-y:1;transform:translateX(var(--hi-translate-x)) translateY(var(--hi-translate-y)) translateZ(var(--hi-translate-z)) rotate(var(--hi-rotate)) rotateX(var(--hi-rotate-x)) rotateY(var(--hi-rotate-y)) rotateZ(var(--hi-rotate-z)) skewX(var(--hi-skew-x)) skewY(var(--hi-skew-y)) scaleX(var(--hi-scale-x)) scaleY(var(--hi-scale-y)) scaleZ(var(--hi-scale-z));}"
 `;
 
-exports[`preset-mini > none targets 1`] = `
-"/* layer: preflights */
-*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 #0000;--un-ring-inset:var(--un-empty,/*!*/ /*!*/);--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}"
-`;
-
-exports[`preset-mini > stray targets 1`] = `
-"/* layer: preflights */
-*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 #0000;--un-ring-inset:var(--un-empty,/*!*/ /*!*/);--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}
-/* layer: default */
-.-border-solid{border-style:solid;}
-.-decoration-none{text-decoration:none;}
-.-color-blue-400{--un-text-opacity:-1;color:rgba(-96,165,250,var(--un-text-opacity));}"
-`;
-
 exports[`preset-mini > targets 1`] = `
 "/* layer: preflights */
 *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 #0000;--un-ring-inset:var(--un-empty,/*!*/ /*!*/);--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}

test/assets/preset-mini-targets.ts

@@ -880,11 +880,9 @@ export const presetMiniNonTargets = [
   'content-foo-bar',
   'content-[foo',
   'content-foo]',
-]
 
-export const presetMiniStrayTargets: string[] = [
   // variants - negative
   '-border-solid',
-  '-color-blue-400',
   '-decoration-none',
+  '-color-blue-400',
 ]

test/preset-mini.test.ts

@@ -1,7 +1,7 @@
 import { createGenerator, escapeSelector } from '@unocss/core'
 import presetMini from '@unocss/preset-mini'
 import { describe, expect, test } from 'vitest'
-import { presetMiniNonTargets, presetMiniStrayTargets, presetMiniTargets } from './assets/preset-mini-targets'
+import { presetMiniNonTargets, presetMiniTargets } from './assets/preset-mini-targets'
 import { presetWindTargets } from './assets/preset-wind-targets'
 
 const uno = createGenerator({
@@ -62,25 +62,10 @@ describe('preset-mini', () => {
     expect(css).toMatchSnapshot()
   })
 
-  test('stray targets', async () => {
-    const code = presetMiniStrayTargets.join(' ')
-    const { css } = await uno.generate(code)
-    const { css: css2 } = await uno.generate(code)
-
-    const unmatched = []
-    for (const i of presetMiniStrayTargets) {
-      if (!css.includes(escapeSelector(i)))
-        unmatched.push(i)
-    }
-    expect(unmatched).toEqual([])
-    expect(css).toMatchSnapshot()
-    expect(css).toEqual(css2)
-  })
-
   test('none targets', async () => {
-    const { css, matched } = await uno.generate(new Set(presetMiniNonTargets))
+    const { css, matched } = await uno.generate(new Set(presetMiniNonTargets), { minify: true, preflights: false })
 
+    expect(css).toMatchInlineSnapshot('""')
     expect([...matched]).toEqual([])
-    expect(css).toMatchSnapshot()
   })
 })

test/transformer-directives.test.ts

@@ -377,7 +377,7 @@ describe('transformer-directives', () => {
         "nav {
           border-width: 1px;
           border-style: solid;
-        
+
           ul {
             li {
               border-width: 1px;