diff --git a/packages/preset-tagify/src/extractor.ts b/packages/preset-tagify/src/extractor.ts index ce8e97eaf4..56b7c3dc2e 100644 --- a/packages/preset-tagify/src/extractor.ts +++ b/packages/preset-tagify/src/extractor.ts @@ -7,6 +7,7 @@ export const htmlTagRE = /<([\w\d-:]+)/g export const extractorTagify = (options: TagifyOptions): Extractor => { const { prefix = '', + excludedTags = ['b', /^h\d+$/, 'table'], } = options return { @@ -14,7 +15,19 @@ export const extractorTagify = (options: TagifyOptions): Extractor => { extract({ code }) { return new Set( Array.from(code.matchAll(htmlTagRE)) - .filter(({ 1: match }) => match.startsWith(prefix)) + .filter(({ 1: match }) => { + for (const exclude of excludedTags) { + if (typeof exclude === 'string') { + if (match === exclude) + return false + } + else { + if (exclude.test(match)) + return false + } + } + return match.startsWith(prefix) + }) .map(([, matched]) => `${MARKER}${matched}`), ) }, diff --git a/packages/preset-tagify/src/types.ts b/packages/preset-tagify/src/types.ts index d28f5658e1..cccb51fca0 100644 --- a/packages/preset-tagify/src/types.ts +++ b/packages/preset-tagify/src/types.ts @@ -4,6 +4,12 @@ export interface TagifyOptions { */ prefix?: string + /** + * Tags excluded from processing. + * @default ['b', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'table'] + */ + excludedTags?: (string | RegExp)[] + /** * Extra CSS properties to apply to matched rules */ diff --git a/test/preset-tagify.test.ts b/test/preset-tagify.test.ts index e428e12fc7..45df0c1902 100644 --- a/test/preset-tagify.test.ts +++ b/test/preset-tagify.test.ts @@ -40,6 +40,7 @@ describe('tagify', () => { const code = ` +

excluded heading

red text margin @@ -61,10 +62,38 @@ describe('tagify', () => { text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} text-green5\\\\:10{color:rgba(34,197,94,0.1);} flex{display:flex;} + .h2{height:0.5rem;} custom-rule{background-color:pink;}" `) }) + test('exclude tags', async () => { + const uno = createGenerator({ + presets: [ + presetMini(), + presetTagify({ + excludedTags: [ + /^h[1-5]$/, + 'table', + ], + }), + ], + }) + + const code = ` + +

excluded heading

+
tagified heading
+ bordered + ` + + expect((await uno.generate(code, { preflights: false })).css).toMatchInlineSnapshot(` + "/* layer: default */ + b{border-width:1px;border-style:solid;} + h6{height:1.5rem;}" + `) + }) + test('extraProperties', async () => { const uno = createGenerator({ presets: [