fix(preset-attributify): add placeholder to default ignore attribut…

…es (#1263)
unocss · Jul 14, 2022 · 925291a · 925291a
1 parent 9eb3895
commit 925291a
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/packages/preset-attributify/src/extractor.ts b/packages/preset-attributify/src/extractor.ts
@@ -10,9 +10,10 @@ const strippedPrefixes = [
 const splitterRE = /[\s'"`;]+/g
 const elementRE = /<\w(?=.*>)[\w:\.$-]*\s((?:['"`\{].*?['"`\}]|.*?)*?)>/gs
 const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-]+)(?:=(["'])([^\2]*?)\2)?/g
+export const defaultIgnoreAttributes = ['placeholder']
 
 export const extractorAttributify = (options?: AttributifyOptions): Extractor => {
-  const ignoreAttributes = options?.ignoreAttributes ?? []
+  const ignoreAttributes = options?.ignoreAttributes ?? defaultIgnoreAttributes
   const nonValuedAttribute = options?.nonValuedAttribute ?? true
   const trueToNonValued = options?.trueToNonValued ?? false
 

diff --git a/packages/preset-attributify/src/index.ts b/packages/preset-attributify/src/index.ts
@@ -1,7 +1,7 @@
 import type { Preset } from '@unocss/core'
 import { extractorSplit } from '@unocss/core'
 import { autocompleteExtractorAttributify } from './autocomplete'
-import { extractorAttributify } from './extractor'
+import { defaultIgnoreAttributes, extractorAttributify } from './extractor'
 import type { AttributifyOptions } from './types'
 import { variantAttributify } from './variant'
 
@@ -16,7 +16,7 @@ const preset = (options: AttributifyOptions = {}): Preset => {
   options.prefix = options.prefix ?? 'un-'
   options.prefixedOnly = options.prefixedOnly ?? false
   options.nonValuedAttribute = options.nonValuedAttribute ?? true
-  options.ignoreAttributes = options.ignoreAttributes ?? []
+  options.ignoreAttributes = options.ignoreAttributes ?? defaultIgnoreAttributes
 
   const variants = [
     variantAttributify(options),

diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap
@@ -135,7 +135,7 @@ Set {
   "[pt-4=\\"\\"]",
   "[px-4=\\"\\"]",
   "[text-true-gray-800=\\"\\"]",
-  "[placeholder=\\"\\"]",
+  "[un-placeholder~=\\"text-red\\"]",
   "[absolute=\\"\\"]",
   "[leading-1rem=\\"\\"]",
   "[left-4=\\"\\"]",
@@ -256,6 +256,7 @@ exports[`attributify > fixture2 1`] = `
 [peer=\\"\\"]:not(:placeholder-shown)~[peer-not-placeholder-shown~=\\"text-green-500\\"]{--un-text-opacity:1;color:rgba(34,197,94,var(--un-text-opacity));}
 [text-gray-7=\\"\\"]{--un-text-opacity:1;color:rgba(55,65,81,var(--un-text-opacity));}
 [text-true-gray-800=\\"\\"]{--un-text-opacity:1;color:rgba(38,38,38,var(--un-text-opacity));}
+[un-placeholder~=\\"text-red\\"]::placeholder{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
 [group=\\"\\"]:hover [group-hover~=\\"op-50\\"]{opacity:0.5;}
 [op-20=\\"\\"]{opacity:0.2;}
 [all\\\\:transition-400=\\"\\"] *{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:400ms;}

diff --git a/test/preset-attributify.test.ts b/test/preset-attributify.test.ts
@@ -61,7 +61,7 @@ describe('attributify', () => {
   </div>
   <div flex>
     <div ma inline-flex relative h-14>
-      <input type="text" m-0 pt-4 px-4 text-true-gray-800 peer placeholder>
+      <input type="text" m-0 pt-4 px-4 text-true-gray-800 peer placeholder="unocss" un-placeholder="text-red">
       <label absolute leading-1rem left-4 pointer-events-none text-gray-7 top="1/3" transition="200 linear"
         peer-not-placeholder-shown="-translate-y-4 scale-75 origin-top-left text-green-500"
         peer-focus="-translate-y-4 scale-75 origin-top-left text-green-500"