feat(presets): customize preflight's root

packages/preset-mini/src/_theme/types.ts

@@ -1,3 +1,5 @@
+import type { Arrayable } from '@unocss/core'
+
 export interface ThemeAnimation {
   keyframes?: Record<string, string>
   durations?: Record<string, string>
@@ -60,5 +62,6 @@ export interface Theme {
   }
   // vars
   /** Used to generate CSS variables placeholder in preflight */
+  preflightRoot?: Arrayable<string>
   preflightBase?: Record<string, string | number>
 }

packages/preset-mini/src/preflights.ts

@@ -1,5 +1,5 @@
 import type { Preflight, PreflightContext } from '@unocss/core'
-import { entriesToCss } from '@unocss/core'
+import { entriesToCss, toArray } from '@unocss/core'
 import type { Theme } from './theme'
 
 export const preflights: Preflight[] = [
@@ -8,7 +8,8 @@ export const preflights: Preflight[] = [
     getCSS(ctx: PreflightContext<Theme>) {
       if (ctx.theme.preflightBase) {
         const css = entriesToCss(Object.entries(ctx.theme.preflightBase))
-        return `*,::before,::after{${css}}::backdrop{${css}}`
+        const roots = toArray(ctx.theme.preflightRoot ?? ['*,::before,::after', '::backdrop'])
+        return roots.map(root => `${root}{${css}}`).join('')
       }
     },
   },

test/__snapshots__/preflights.test.ts.snap

@@ -6,3 +6,13 @@ exports[`preflights > basic 1`] = `
 /* layer: custom */
 .hello { text: red }"
 `;
+
+exports[`preflights > preflight root can be customized with array 1`] = `
+"/* layer: preflights */
+.scope-1{--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 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);}[data-scope-2]{--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 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);}"
+`;
+
+exports[`preflights > preflight root can be customized with string 1`] = `
+"/* layer: preflights */
+:root{--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 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);}"
+`;

test/preflights.test.ts

@@ -44,4 +44,43 @@ describe('preflights', () => {
       ]
     `)
   })
+
+  test('preflight root can be customized with string', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetMini(),
+      ],
+      theme: {
+        preflightRoot: ':root',
+      },
+    })
+    const { css } = await uno.generate('')
+    expect(css).toMatchSnapshot()
+  })
+
+  test('preflight root can be customized with array', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetMini(),
+      ],
+      theme: {
+        preflightRoot: ['.scope-1', '[data-scope-2]'],
+      },
+    })
+    const { css } = await uno.generate('')
+    expect(css).toMatchSnapshot()
+  })
+
+  test('preflight root can be disabled using empty array', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetMini(),
+      ],
+      theme: {
+        preflightRoot: [],
+      },
+    })
+    const { css } = await uno.generate('')
+    expect(css).eql('')
+  })
 })