fix: incorrect css generated when selector content is the same, fix #57

src/index.ts

@@ -160,23 +160,28 @@ export function presetTheme<T extends Record<string, any>>(options: PresetThemeO
             keys.map(key => `${defaultThemeNames.includes(key) ? `${key}:` : ''}${PRESET_THEME_RULE}:${key}:${Date.now()}`),
             { preflights: false },
           )
-          return css.split('\n').slice(1).map((line, index, lines) => {
-            const prevLine = index > 0 ? lines[index - 1] : ''
-            if (prevLine.includes('@media')) {
+          const res = css
+            .replace(/,\n/g, ',')
+            .split('\n')
+            .slice(1).map((line, index, lines) => {
+              const prevLine = index > 0 ? lines[index - 1] : ''
+              if (prevLine.includes('@media')) {
               // convert .light{} to :root{}
-              line = line.replace(/.*?{/, ':root{')
-            }
-            else {
-              // convert .light .themename{} to .themename{}
-              line = line.replace(/\..*?\s(.*\{)/, '$1')
-            }
-            return line
-          }).sort((a, b) => {
-            const regexStr = `^${selectors.light}|^@media|^}`
-            if (a.match(regexStr)?.length)
-              return b.match(regexStr)?.length ? 0 : -1
-            return 1
-          }).join('\n')
+                line = line.replace(/.*?{/, ':root{')
+              }
+              else {
+                // convert .light .themename{} to .themename{}
+                line = line.replace(/(\.\w+)+\s([\.\:\w]+)/g, '$2')
+              }
+              return line
+            }).sort((a, b) => {
+              const regexStr = `^${selectors.light}|^@media|^}`
+              if (a.match(regexStr)?.length)
+                return b.match(regexStr)?.length ? 0 : -1
+              return 1
+            }).join('\n')
+
+          return res
         },
       },
     ],

tests/index.test.ts

@@ -301,4 +301,45 @@ describe('theme', () => {
       .text-custom-var{color:var(--un-preset-theme-colors-customVar);}"
     `)
   })
+
+  test('all theme use same selector content', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetUno(),
+        presetTheme<Theme>({
+          theme: {
+            light: {
+              colors: {
+                primary: 'var(--el-color-primary)',
+              },
+            },
+            dark: {
+              colors: {
+                primary: 'var(--el-color-primary)',
+              },
+            },
+            blue: {
+              colors: {
+                primary: 'var(--el-color-primary)',
+                dd: 'var(--el-color-primary)',
+              },
+            },
+          },
+        }),
+      ],
+    })
+
+    const targets = ['text-primary', 'text-dd']
+    const { css } = await uno.generate(targets.join('\n'))
+    expect(css).toMatchInlineSnapshot(`
+      "/* 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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--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-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
+      /* layer: theme */
+      .blue{--un-preset-theme-colors-primary:var(--el-color-primary);--un-preset-theme-colors-dd:var(--el-color-primary);}
+      .dark,:root{--un-preset-theme-colors-primary:var(--el-color-primary);}
+      /* layer: default */
+      .text-dd{color:var(--un-preset-theme-colors-dd);}
+      .text-primary{color:var(--un-preset-theme-colors-primary);}"
+    `)
+  })
 })