feat(preset-tagify): add excludeTags option (#1047)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Jun 1, 2022 · cc7c763 · cc7c763
1 parent 3f279db
commit cc7c763
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/packages/preset-tagify/src/extractor.ts b/packages/preset-tagify/src/extractor.ts
@@ -7,14 +7,27 @@ export const htmlTagRE = /<([\w\d-:]+)/g
 export const extractorTagify = (options: TagifyOptions): Extractor => {
   const {
     prefix = '',
+    excludedTags = ['b', /^h\d+$/, 'table'],
   } = options
 
   return {
     name: 'tagify',
     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
@@ -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
@@ -40,6 +40,7 @@ describe('tagify', () => {
 
     const code = `
       <flex>
+        <h1 class="h2"> excluded heading </h1>
         <text-red> red text </text-red>
         <text-green5:10 />
         <m-1> margin </m-1>
@@ -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 = `
+      <table />
+      <h1> excluded heading </h1>
+      <h6> tagified heading </h6>
+      <b> bordered </b>
+    `
+
+    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: [