fix(core): honor rule's noMerge option in shortcut (#483)

Author: chu121su12

packages/core/src/generator/index.ts

@@ -187,11 +187,11 @@ export class UnoGenerator {
           const rules = sorted
             .reverse()
             .map(([selector, body, noMerge], idx) => {
-              if (selector && this.config.mergeSelectors) {
+              if (!noMerge && selector && this.config.mergeSelectors) {
                 // search for rules that has exact same body, and merge them
                 for (let i = idx + 1; i < size; i++) {
                   const current = sorted[i]
-                  if (!noMerge && current && current[0] && current[1] === body) {
+                  if (current && !current[2] && current[0] && current[1] === body) {
                     current[0].push(...selector)
                     return null
                   }
@@ -414,7 +414,7 @@ export class UnoGenerator {
     expanded: string[],
     meta: RuleMeta = { layer: this.config.shortcutsLayer },
   ): Promise<StringifiedUtil[] | undefined> {
-    const selectorMap = new TwoKeyMap<string, string | undefined, [CSSEntries[], number]>()
+    const selectorMap = new TwoKeyMap<string, string | undefined, [[CSSEntries, boolean][], number]>()
 
     const parsed = (
       await Promise.all(uniq(expanded)
@@ -437,22 +437,31 @@ export class UnoGenerator {
 
       // find existing selector/mediaQuery pair and merge
       const mapItem = selectorMap.getFallback(selector, parent, [[], item[0]])
-      // append entries
-      mapItem[0].push(entries)
+      // add entries
+      mapItem[0].push([entries, !!item[3]?.noMerge])
     }
 
     return selectorMap
       .map(([e, index], selector, mediaQuery) => {
-        const split = e.filter(entries => entries.some(entry => entry[0] === CONTROL_SHORTCUT_NO_MERGE))
-        const rest = e.filter(entries => entries.every(entry => entry[0] !== CONTROL_SHORTCUT_NO_MERGE))
-        return [...split, rest.flat(1)].map((entries): StringifiedUtil | undefined => {
+        const stringify = (noMerge: boolean) => (entries: CSSEntries): StringifiedUtil | undefined => {
           const body = entriesToCss(entries)
           if (body)
-            return [index, selector, body, mediaQuery, meta]
+            return [index, selector, body, mediaQuery, { ...meta, noMerge }]
           return undefined
+        }
+
+        const merges = [
+          [e.filter(([, noMerge]) => noMerge).map(([entries]) => entries), true],
+          [e.filter(([, noMerge]) => !noMerge).map(([entries]) => entries), false],
+        ] as [CSSEntries[], boolean][]
+
+        return merges.map(([e, noMerge]) => {
+          const splits = e.filter(entries => entries.some(entry => entry[0] === CONTROL_SHORTCUT_NO_MERGE))
+          const rests = e.filter(entries => entries.every(entry => entry[0] !== CONTROL_SHORTCUT_NO_MERGE))
+          return [...splits.map(stringify(noMerge)), ...[rests.flat(1)].map(stringify(noMerge))]
         })
       })
-      .flat(1)
+      .flat(2)
       .filter(Boolean) as StringifiedUtil[]
   }
 

test/__snapshots__/selector-no-merge.test.ts.snap

@@ -7,8 +7,26 @@ exports[`selector > rules split selector 1`] = `
 .not-merged{merged:1;}"
 `;
 
+exports[`variant > variant shortcuts early 1`] = `
+"/* layer: shortcuts */
+.m2-no-merge::non-breaking{merged:1;}
+.m2-no-merge{merged:1;}"
+`;
+
+exports[`variant > variant shortcuts late 1`] = `
+"/* layer: shortcuts */
+.m3-no-merge-ordered{late:2;}
+.m3-no-merge-ordered::non-breaking{late:2;}"
+`;
+
 exports[`variant > variant split selector 1`] = `
 "/* layer: default */
 .moz\\\\:no-merge::non-breaking{merged:1;}
 .webkit\\\\:no-merge::breaking{merged:1;}"
 `;
+
+exports[`variant > variant split shortcuts 1`] = `
+"/* layer: shortcuts */
+.m1-no-merge::breaking{merged:1;}
+.m1-no-merge::non-breaking{merged:1;}"
+`;

test/selector-no-merge.test.ts

@@ -19,17 +19,41 @@ describe('selector', () => {
 
 describe('variant', () => {
   const uno = createGenerator({
+    shortcuts: [
+      [/^m1-(.+)$/, ([, s]) => `moz:${s} webkit:${s}`],
+      [/^m2-(.+)$/, ([, s]) => `moz:${s} merge-candidate`],
+      [/^m3-(.+)$/, ([, s]) => `moz:${s} merge-candidate-early`],
+    ],
     variants: [
       variantMatcher('moz', s => `${s}::non-breaking`),
       variantMatcher('webkit', s => `${s}::breaking`),
     ],
     rules: [
       [/^no-merge$/, () => ({ merged: 1 }), { noMerge: true }],
+      ['merge-candidate', { merged: 1 }],
+
+      ['merge-candidate-early', { late: 2 }],
+      [/^no-merge-ordered$/, () => ({ late: 2 }), { noMerge: true }],
     ],
   })
 
   test('variant split selector', async() => {
     const { css } = await uno.generate('moz:no-merge webkit:no-merge')
     expect(css).toMatchSnapshot()
   })
+
+  test('variant split shortcuts', async() => {
+    const { css } = await uno.generate('m1-no-merge')
+    expect(css).toMatchSnapshot()
+  })
+
+  test('variant shortcuts early', async() => {
+    const { css } = await uno.generate('m2-no-merge')
+    expect(css).toMatchSnapshot()
+  })
+
+  test('variant shortcuts late', async() => {
+    const { css } = await uno.generate('m3-no-merge-ordered')
+    expect(css).toMatchSnapshot()
+  })
 })