diff --git a/packages/preset-mini/src/preflights.ts b/packages/preset-mini/src/preflights.ts index 38b782f998..c05efde127 100644 --- a/packages/preset-mini/src/preflights.ts +++ b/packages/preset-mini/src/preflights.ts @@ -8,10 +8,7 @@ export const preflights: Preflight[] = [ getCSS(ctx: PreflightContext) { if (ctx.theme.preflightBase) { const css = entriesToCss(Object.entries(ctx.theme.preflightBase)) - let roots = toArray(ctx.theme.preflightRoot ?? []) - if (!roots.length) - roots = ['*,::before,::after', '::backdrop'] - + const roots = toArray(ctx.theme.preflightRoot ?? ['*,::before,::after', '::backdrop']) return roots.map(root => `${root}{${css}}`).join('') } }, diff --git a/test/__snapshots__/preflights.test.ts.snap b/test/__snapshots__/preflights.test.ts.snap index 4692908eb2..76c6f1f04c 100644 --- a/test/__snapshots__/preflights.test.ts.snap +++ b/test/__snapshots__/preflights.test.ts.snap @@ -7,12 +7,12 @@ exports[`preflights > basic 1`] = ` .hello { text: red }" `; -exports[`preflights > preflight root can be customized 1`] = ` +exports[`preflights > preflight root can be customized with array 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);}" +.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 2`] = ` +exports[`preflights > preflight root can be customized with string 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);}" +: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);}" `; diff --git a/test/preflights.test.ts b/test/preflights.test.ts index 82f31790fb..2e826250e4 100644 --- a/test/preflights.test.ts +++ b/test/preflights.test.ts @@ -45,7 +45,7 @@ describe('preflights', () => { `) }) - test('preflight root can be customized', async () => { + test('preflight root can be customized with string', async () => { const uno = createGenerator({ presets: [ presetMini(), @@ -58,7 +58,7 @@ describe('preflights', () => { expect(css).toMatchSnapshot() }) - test('preflight root can be customized', async () => { + test('preflight root can be customized with array', async () => { const uno = createGenerator({ presets: [ presetMini(), @@ -70,4 +70,17 @@ describe('preflights', () => { 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('') + }) })