diff --git a/packages/core/src/core/postprocess.ts b/packages/core/src/core/postprocess.ts index 082939d..a563ac5 100644 --- a/packages/core/src/core/postprocess.ts +++ b/packages/core/src/core/postprocess.ts @@ -22,7 +22,11 @@ export function postprocessWithUnColor(unColor: string): Postprocessor { export function importantProcess(): Postprocessor { return (util) => { - util.entries.forEach(i => i[1] += ' !important') + util.entries.forEach(i => { + if(i[1] != null && !String(i[1]).includes('!important')){ + i[1] += ' !important' + } + }) } } // IN-README-END diff --git a/test/postprocess.test.ts b/test/postprocess.test.ts index 1439be9..a9a5595 100644 --- a/test/postprocess.test.ts +++ b/test/postprocess.test.ts @@ -37,19 +37,26 @@ describe('presetUseful postprocess with unColor', () => { }) describe('presetUseful postprocess with important', () => { - const code = 'bg-red text-blue' + const withOutImport = ['bg-red', 'text-blue'] + const withInImport = ['!text-xl', 'sm:text-sm!', 'important-ma'] + it('base', async () => { const uno = generateUno({ important: true, }) - const { css } = await uno.generate(code, { preflights: false }) + const { css } = await uno.generate([...withInImport, ...withOutImport], { preflights: false }) expect(css).toMatchInlineSnapshot(` "/* layer: default */ + .important-ma{margin:auto !important;} .bg-red{--un-bg-opacity:1 !important;background-color:rgba(248,113,113,var(--un-bg-opacity)) !important;} - .text-blue{--un-text-opacity:1 !important;color:rgba(96,165,250,var(--un-text-opacity)) !important;}" + .\\\\!text-xl{font-size:1.25rem !important;line-height:1.75rem !important;} + .text-blue{--un-text-opacity:1 !important;color:rgba(96,165,250,var(--un-text-opacity)) !important;} + @media (min-width: 640px){ + .sm\\\\:text-sm\\\\!{font-size:0.875rem !important;line-height:1.25rem !important;} + }" `) }) })