From 680a245be2f847c1eb679c7414816fa8c9244706 Mon Sep 17 00:00:00 2001 From: Chris <1633711653@qq.com> Date: Tue, 15 Nov 2022 10:58:53 +0800 Subject: [PATCH 1/4] fix(transformerAttributeJsx): fix curlybraceRE --- .../transformer-attributify-jsx/src/index.ts | 7 +- test/transformer-attributify-jsx.test.ts | 193 ++++++++++-------- 2 files changed, 108 insertions(+), 92 deletions(-) diff --git a/packages/transformer-attributify-jsx/src/index.ts b/packages/transformer-attributify-jsx/src/index.ts index cf69be4788..dee5506007 100644 --- a/packages/transformer-attributify-jsx/src/index.ts +++ b/packages/transformer-attributify-jsx/src/index.ts @@ -40,8 +40,7 @@ export interface TransformerAttributifyJsxOptions { const elementRE = /|<(\/?)([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+?=\{.+?\}/g export default function transformerAttributifyJsx(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer { const { blocklist = [], @@ -72,15 +71,15 @@ export default function transformerAttributifyJsx(options: TransformerAttributif idFilter, async transform(code, _, { uno }) { const tasks: Promise[] = [] - for (const item of Array.from(code.original.matchAll(elementRE))) { // 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)) + 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)) diff --git a/test/transformer-attributify-jsx.test.ts b/test/transformer-attributify-jsx.test.ts index c86b9e1acb..639da7b09a 100644 --- a/test/transformer-attributify-jsx.test.ts +++ b/test/transformer-attributify-jsx.test.ts @@ -6,30 +6,30 @@ import { describe, expect, test } from 'vitest' import transformerAttributifyJsx from '../packages/transformer-attributify-jsx/src' describe('transformerAttributifyJs', () => { - const originalCode = ` -
- -
-
- unocss -
-
- The instant on-demand Atomic CSS engine. -
-
- -
-
-
-
- on-demand · instant · fully customizable -
- `.trim() +// const originalCode = ` +//
+// +//
+//
+// unocss +//
+//
+// The instant on-demand Atomic CSS engine. +//
+//
+// +//
+//
+//
+//
+// on-demand · instant · fully customizable +//
+// `.trim() const uno = createGenerator({ presets: [ @@ -38,75 +38,92 @@ describe('transformerAttributifyJs', () => { ], }) - test('transform', async () => { - const code = new MagicString(originalCode) - await transformerAttributifyJsx().transform(code, 'app.tsx', { uno, tokens: new Set() } as any) + // test('transform', async () => { + // const code = new MagicString(originalCode) + // await transformerAttributifyJsx().transform(code, 'app.tsx', { uno, tokens: new Set() } as any) - expect(code.toString()).toMatchInlineSnapshot(` - "
- -
-
- unocss -
-
- The instant on-demand Atomic CSS engine. -
-
- -
-
-
-
- on-demand · instant · fully customizable -
" - `) - }) + // expect(code.toString()).toMatchInlineSnapshot(` + // "
+ // + //
+ //
+ // unocss + //
+ //
+ // The instant on-demand Atomic CSS engine. + //
+ //
+ // + //
+ //
+ //
+ //
+ // on-demand · instant · fully customizable + //
" + // `) + // }) + + // test('blocklist', async () => { + // const code = new MagicString(originalCode) + // const blocklist: (string | RegExp)[] = ['flex', 'absolute'] - test('blocklist', async () => { - const code = new MagicString(originalCode) - const blocklist: (string | RegExp)[] = ['flex', 'absolute'] + // await transformerAttributifyJsx({ + // blocklist, + // }).transform(code, 'app.jsx', { uno, tokens: new Set() } as any) - await transformerAttributifyJsx({ - blocklist, - }).transform(code, 'app.jsx', { uno, tokens: new Set() } as any) + // expect(code.toString()).toMatchInlineSnapshot(` + // "
+ // + //
+ //
+ // unocss + //
+ //
+ // The instant on-demand Atomic CSS engine. + //
+ //
+ // + //
+ //
+ //
+ //
+ // on-demand · instant · fully customizable + //
" + // `) + + // const codeToString = code.toString() + // blocklist.forEach((rule) => { + // if (rule instanceof RegExp) + // expect(new RegExp(`${rule.source}=""`).test(codeToString)).not.true + // else + // expect(codeToString).not.toMatch(`${rule}=""`) + // }) + // }) + + test('testSomething', async () => { + const testCode = ` +
+ + ` + const code = new MagicString(testCode) + + await transformerAttributifyJsx().transform(code, 'app.jsx', { uno, tokens: new Set() } as any) expect(code.toString()).toMatchInlineSnapshot(` - "
- -
-
- unocss -
-
- The instant on-demand Atomic CSS engine. -
-
- -
-
-
-
- on-demand · instant · fully customizable -
" + " +
+ + " `) - - const codeToString = code.toString() - blocklist.forEach((rule) => { - if (rule instanceof RegExp) - expect(new RegExp(`${rule.source}=""`).test(codeToString)).not.true - else - expect(codeToString).not.toMatch(`${rule}=""`) - }) }) }) From e38a722b72d94b1af18d34cfa7ec6b5d84792b2d Mon Sep 17 00:00:00 2001 From: Chris <1633711653@qq.com> Date: Tue, 15 Nov 2022 11:03:07 +0800 Subject: [PATCH 2/4] chore: update --- .../transformer-attributify-jsx/src/index.ts | 2 +- test/transformer-attributify-jsx.test.ts | 190 ++++++++---------- 2 files changed, 86 insertions(+), 106 deletions(-) diff --git a/packages/transformer-attributify-jsx/src/index.ts b/packages/transformer-attributify-jsx/src/index.ts index dee5506007..154ad40a66 100644 --- a/packages/transformer-attributify-jsx/src/index.ts +++ b/packages/transformer-attributify-jsx/src/index.ts @@ -71,13 +71,13 @@ export default function transformerAttributifyJsx(options: TransformerAttributif idFilter, async transform(code, _, { uno }) { const tasks: Promise[] = [] + for (const item of Array.from(code.original.matchAll(elementRE))) { // 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)) - if (curlybraceRE.test(attributifyPart)) attributifyPart = attributifyPart.replace(curlybraceRE, match => ' '.repeat(match.length)) for (const attr of attributifyPart.matchAll(attributeRE)) { diff --git a/test/transformer-attributify-jsx.test.ts b/test/transformer-attributify-jsx.test.ts index 639da7b09a..e352b0a5c6 100644 --- a/test/transformer-attributify-jsx.test.ts +++ b/test/transformer-attributify-jsx.test.ts @@ -6,30 +6,29 @@ import { describe, expect, test } from 'vitest' import transformerAttributifyJsx from '../packages/transformer-attributify-jsx/src' describe('transformerAttributifyJs', () => { -// const originalCode = ` -//
-// -//
-//
-// unocss -//
-//
-// The instant on-demand Atomic CSS engine. -//
-//
-// -//
-//
-//
-//
-// on-demand · instant · fully customizable -//
-// `.trim() + const originalCode = ` +
+
+
+ unocss +
+
+ The instant on-demand Atomic CSS engine. +
+
+ +
+
+
+
+ on-demand · instant · fully customizable +
+ `.trim() const uno = createGenerator({ presets: [ @@ -38,92 +37,73 @@ describe('transformerAttributifyJs', () => { ], }) - // test('transform', async () => { - // const code = new MagicString(originalCode) - // await transformerAttributifyJsx().transform(code, 'app.tsx', { uno, tokens: new Set() } as any) + test('transform', async () => { + const code = new MagicString(originalCode) + await transformerAttributifyJsx().transform(code, 'app.tsx', { uno, tokens: new Set() } as any) - // expect(code.toString()).toMatchInlineSnapshot(` - // "
- // - //
- //
- // unocss - //
- //
- // The instant on-demand Atomic CSS engine. - //
- //
- // - //
- //
- //
- //
- // on-demand · instant · fully customizable - //
" - // `) - // }) - - // test('blocklist', async () => { - // const code = new MagicString(originalCode) - // const blocklist: (string | RegExp)[] = ['flex', 'absolute'] - - // await transformerAttributifyJsx({ - // blocklist, - // }).transform(code, 'app.jsx', { uno, tokens: new Set() } as any) - - // expect(code.toString()).toMatchInlineSnapshot(` - // "
- // - //
- //
- // unocss - //
- //
- // The instant on-demand Atomic CSS engine. - //
- //
- // - //
- //
- //
- //
- // on-demand · instant · fully customizable - //
" - // `) - - // const codeToString = code.toString() - // blocklist.forEach((rule) => { - // if (rule instanceof RegExp) - // expect(new RegExp(`${rule.source}=""`).test(codeToString)).not.true - // else - // expect(codeToString).not.toMatch(`${rule}=""`) - // }) - // }) + expect(code.toString()).toMatchInlineSnapshot(` + "
+
+
+ unocss +
+
+ The instant on-demand Atomic CSS engine. +
+
+ +
+
+
+
+ on-demand · instant · fully customizable +
" + `) + }) - test('testSomething', async () => { - const testCode = ` -
- - ` - const code = new MagicString(testCode) + test('blocklist', async () => { + const code = new MagicString(originalCode) + const blocklist: (string | RegExp)[] = ['flex', 'absolute'] - await transformerAttributifyJsx().transform(code, 'app.jsx', { uno, tokens: new Set() } as any) + await transformerAttributifyJsx({ + blocklist, + }).transform(code, 'app.jsx', { uno, tokens: new Set() } as any) expect(code.toString()).toMatchInlineSnapshot(` - " -
- - " + "
+
+
+ unocss +
+
+ The instant on-demand Atomic CSS engine. +
+
+ +
+
+
+
+ on-demand · instant · fully customizable +
" `) + + const codeToString = code.toString() + blocklist.forEach((rule) => { + if (rule instanceof RegExp) + expect(new RegExp(`${rule.source}=""`).test(codeToString)).not.true + else + expect(codeToString).not.toMatch(`${rule}=""`) + }) }) }) From a1e69708f874ba1a58471992e7be073fe064c45d Mon Sep 17 00:00:00 2001 From: Chris <1633711653@qq.com> Date: Tue, 15 Nov 2022 11:09:18 +0800 Subject: [PATCH 3/4] chore: update --- packages/transformer-attributify-jsx/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/transformer-attributify-jsx/src/index.ts b/packages/transformer-attributify-jsx/src/index.ts index 154ad40a66..59affaf19b 100644 --- a/packages/transformer-attributify-jsx/src/index.ts +++ b/packages/transformer-attributify-jsx/src/index.ts @@ -40,7 +40,7 @@ export interface TransformerAttributifyJsxOptions { const elementRE = /|<(\/?)([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 = /\w+?=\{.+?\}/g +const curlybraceRE = /\w+\s?=\s?\{.+?\}/g export default function transformerAttributifyJsx(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer { const { blocklist = [], From 36c695ebca555ab6fb135954ec7d7e9025efbf28 Mon Sep 17 00:00:00 2001 From: Chris <1633711653@qq.com> Date: Tue, 15 Nov 2022 11:17:24 +0800 Subject: [PATCH 4/4] chore: update --- test/transformer-attributify-jsx.test.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/transformer-attributify-jsx.test.ts b/test/transformer-attributify-jsx.test.ts index e352b0a5c6..d8e49e137c 100644 --- a/test/transformer-attributify-jsx.test.ts +++ b/test/transformer-attributify-jsx.test.ts @@ -8,6 +8,7 @@ import transformerAttributifyJsx from '../packages/transformer-attributify-jsx/s describe('transformerAttributifyJs', () => { const originalCode = `
+
unocss @@ -43,6 +44,7 @@ describe('transformerAttributifyJs', () => { expect(code.toString()).toMatchInlineSnapshot(` "
+
unocss @@ -76,6 +78,7 @@ describe('transformerAttributifyJs', () => { expect(code.toString()).toMatchInlineSnapshot(` "
+
unocss