Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(transformer-attributify-jsx): fix curlybraceRE (#1879)
  • Loading branch information
zyyv committed Nov 15, 2022
1 parent d5a6a6a commit 9710504
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 6 deletions.
5 changes: 2 additions & 3 deletions packages/transformer-attributify-jsx/src/index.ts
Expand Up @@ -40,8 +40,7 @@ export interface TransformerAttributifyJsxOptions {
const elementRE = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/gs
const attributeRE = /([a-zA-Z()#][\[?a-zA-Z0-9-_:()#%\]?]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g
const classFilterRE = /(className|class)\s*=\s*\{[^\}]*\}/i
const curlybraceRE = /\{.+\}/g

const curlybraceRE = /\w+\s?=\s?\{.+?\}/g
export default function transformerAttributifyJsx(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer {
const {
blocklist = [],
Expand Down Expand Up @@ -80,7 +79,7 @@ export default function transformerAttributifyJsx(options: TransformerAttributif
if (classNamePart)
attributifyPart = item[3].replace(classFilterRE, ' '.repeat(classNamePart[0].length))
if (curlybraceRE.test(attributifyPart))
continue
attributifyPart = attributifyPart.replace(curlybraceRE, match => ' '.repeat(match.length))
for (const attr of attributifyPart.matchAll(attributeRE)) {
const matchedRule = attr[0].replace(/\:/i, '-')
if (matchedRule.includes('=') || isBlocked(matchedRule))
Expand Down
6 changes: 3 additions & 3 deletions test/transformer-attributify-jsx.test.ts
Expand Up @@ -10,7 +10,7 @@ describe('transformerAttributifyJs', () => {
<div h-full text-center flex select-none className={red ? 'text-red': 'text-green'}>
<input value={ target ? '10px' : '20px'} style={{ height: '100px' }}>
<div ma>
<div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
<div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s key={index}>
unocss
</div>
<div op30 text-lg fw300 m1 className={hidden && 'op0'}>
Expand Down Expand Up @@ -46,7 +46,7 @@ describe('transformerAttributifyJs', () => {
"<div h-full=\\"\\" text-center=\\"\\" flex=\\"\\" select-none=\\"\\" className={red ? 'text-red': 'text-green'}>
<input value={ target ? '10px' : '20px'} style={{ height: '100px' }}>
<div ma=\\"\\">
<div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\">
<div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\" key={index}>
unocss
</div>
<div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\" className={hidden && 'op0'}>
Expand Down Expand Up @@ -80,7 +80,7 @@ describe('transformerAttributifyJs', () => {
"<div h-full=\\"\\" text-center=\\"\\" flex select-none=\\"\\" className={red ? 'text-red': 'text-green'}>
<input value={ target ? '10px' : '20px'} style={{ height: '100px' }}>
<div ma=\\"\\">
<div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\">
<div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\" key={index}>
unocss
</div>
<div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\" className={hidden && 'op0'}>
Expand Down

0 comments on commit 9710504

Please sign in to comment.