Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(transformer-attributify-jsx): ignore the className part #1582

Merged
merged 1 commit into from Sep 14, 2022
Merged

fix(transformer-attributify-jsx): ignore the className part #1582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 8 additions & 1 deletion packages/transformer-attributify-jsx/src/index.ts
View file
Open in desktop
Expand Up @@ -39,6 +39,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

export default function transformerAttributifyJsx(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer {
const {
Expand Down Expand Up @@ -72,7 +73,13 @@ export default function transformerAttributifyJsx(options: TransformerAttributif
const tasks: Promise<void>[] = []

for (const item of Array.from(code.original.matchAll(elementRE))) {
for (const attr of item[3].matchAll(attributeRE)) {
// Get the length of the className part, and replace it with the equal length of empty string
const classNamePart = item[3].match(classFilterRE)
let attributifyPart = item[3]
if (classNamePart)
attributifyPart = item[3].replace(classFilterRE, ' '.repeat(classNamePart[0].length))

for (const attr of attributifyPart.matchAll(attributeRE)) {
const matchedRule = attr[0].replace(/\:/i, '-')
if (matchedRule.includes('=') || isBlocked(matchedRule))
continue
Expand Down
12 changes: 6 additions & 6 deletions test/transformer-attributify-jsx.test.ts
View file
Open in desktop
Expand Up @@ -7,12 +7,12 @@ import transformerAttributifyJsx from '../packages/transformer-attributify-jsx/s

describe('transformerAttributifyJs', () => {
const originalCode = `
<div h-full text-center flex select-none>
<div h-full text-center flex select-none className={red ? 'text-red': 'text-green'}>
<div ma>
<div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
unocss
</div>
<div op30 text-lg fw300 m1>
<div op30 text-lg fw300 m1 className={hidden && 'op0'}>
The instant on-demand Atomic CSS engine.
</div>
<div m2 flex justify-center text-2xl op30 hover:op80 hover:text-2xl>
Expand Down Expand Up @@ -42,12 +42,12 @@ describe('transformerAttributifyJs', () => {
await transformerAttributifyJsx().transform(code, 'app.tsx', { uno, tokens: new Set() } as any)

expect(code.toString()).toMatchInlineSnapshot(`
"<div h-full=\\"\\" text-center=\\"\\" flex=\\"\\" select-none=\\"\\">
"<div h-full=\\"\\" text-center=\\"\\" flex=\\"\\" select-none=\\"\\" className={red ? 'text-red': 'text-green'}>
<div ma=\\"\\">
<div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\">
unocss
</div>
<div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\">
<div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\" className={hidden && 'op0'}>
The instant on-demand Atomic CSS engine.
</div>
<div m2=\\"\\" flex=\\"\\" justify-center=\\"\\" text-2xl=\\"\\" op30=\\"\\" hover-op80=\\"\\" hover-text-2xl=\\"\\">
Expand Down Expand Up @@ -75,12 +75,12 @@ describe('transformerAttributifyJs', () => {
}).transform(code, 'app.jsx', { uno, tokens: new Set() } as any)

expect(code.toString()).toMatchInlineSnapshot(`
"<div h-full=\\"\\" text-center=\\"\\" flex select-none=\\"\\">
"<div h-full=\\"\\" text-center=\\"\\" flex select-none=\\"\\" className={red ? 'text-red': 'text-green'}>
<div ma=\\"\\">
<div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\">
unocss
</div>
<div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\">
<div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\" className={hidden && 'op0'}>
The instant on-demand Atomic CSS engine.
</div>
<div m2=\\"\\" flex justify-center=\\"\\" text-2xl=\\"\\" op30=\\"\\" hover-op80=\\"\\" hover-text-2xl=\\"\\">
Expand Down