|
1 | | -import { HELPER_PREFIX } from '@vue-macros/common' |
2 | | -import { generateClassProperty } from '@vue/language-core/lib/codegen/style/classProperty.js' |
3 | | -import { parseCssClassNames } from '@vue/language-core/lib/utils/parseCssClassNames.js' |
4 | 1 | import { replaceRange } from 'ts-macro' |
5 | | -import type { JsxMacros, TransformOptions } from '.' |
| 2 | +import type { DefineStyle, TransformOptions } from '.' |
6 | 3 |
|
7 | 4 | export function transformDefineStyle( |
8 | | - defineStyles: JsxMacros['defineStyle'], |
| 5 | + { expression, isCssModules }: DefineStyle, |
| 6 | + index: number, |
9 | 7 | options: TransformOptions, |
10 | 8 | ): void { |
11 | | - if (!defineStyles?.length) return |
12 | 9 | const { ts, codes, ast } = options |
13 | | - defineStyles.forEach(({ expression, isCssModules }, index) => { |
14 | | - if ( |
15 | | - isCssModules && |
16 | | - expression?.arguments[0] && |
17 | | - !expression.typeArguments && |
18 | | - ts.isTemplateLiteral(expression.arguments[0]) |
19 | | - ) { |
20 | | - replaceRange( |
21 | | - codes, |
22 | | - expression.arguments.pos - 1, |
23 | | - expression.arguments.pos - 1, |
24 | | - `<${HELPER_PREFIX}PrettifyLocal<{}`, |
25 | | - ...generateCssClassesType( |
26 | | - expression.arguments[0].getText(ast).slice(1, -1), |
27 | | - expression.arguments[0].getStart(ast) + 1, |
28 | | - index, |
29 | | - ), |
30 | | - '>>', |
31 | | - ) |
32 | | - } |
33 | | - |
34 | | - addEmbeddedCode(expression, index, options) |
35 | | - }) |
36 | | -} |
37 | | - |
38 | | -function* generateCssClassesType(css: string, offset: number, index: number) { |
39 | | - for (const className of [...parseCssClassNames(css)]) { |
40 | | - yield* generateClassProperty( |
41 | | - index, |
42 | | - className.text, |
43 | | - className.offset + offset, |
44 | | - 'string', |
| 10 | + if ( |
| 11 | + isCssModules && |
| 12 | + expression?.arguments[0] && |
| 13 | + !expression.typeArguments && |
| 14 | + ts.isTemplateLiteral(expression.arguments[0]) |
| 15 | + ) { |
| 16 | + replaceRange( |
| 17 | + codes, |
| 18 | + expression.arguments.pos - 1, |
| 19 | + expression.arguments.pos - 1, |
| 20 | + `<{`, |
| 21 | + ...parseCssClassNames( |
| 22 | + expression.arguments[0].getText(ast).slice(1, -1), |
| 23 | + ).map(({ text }) => `\n'${text.slice(1)}': string`), |
| 24 | + '\n}>', |
45 | 25 | ) |
46 | 26 | } |
| 27 | + |
| 28 | + addEmbeddedCode(expression, index, options) |
47 | 29 | } |
48 | 30 |
|
49 | 31 | function addEmbeddedCode( |
@@ -88,3 +70,22 @@ function addEmbeddedCode( |
88 | 70 | embeddedCodes: [], |
89 | 71 | }) |
90 | 72 | } |
| 73 | + |
| 74 | +const commentReg = /(?<=\/\*)[\s\S]*?(?=\*\/)|(?<=\/\/)[\s\S]*?(?=\n)/g |
| 75 | +const cssClassNameReg = /(?=(\.[a-z_][-\w]*)[\s.,+~>:#)[{])/gi |
| 76 | +const fragmentReg = /(?<=\{)[^{]*(?=(?<!\\);)/g |
| 77 | + |
| 78 | +function parseCssClassNames(css: string) { |
| 79 | + for (const reg of [commentReg, fragmentReg]) { |
| 80 | + css = css.replace(reg, (match) => ' '.repeat(match.length)) |
| 81 | + } |
| 82 | + const matches = css.matchAll(cssClassNameReg) |
| 83 | + const result = [] |
| 84 | + for (const match of matches) { |
| 85 | + const matchText = match[1] |
| 86 | + if (matchText) { |
| 87 | + result.push({ offset: match.index, text: matchText }) |
| 88 | + } |
| 89 | + } |
| 90 | + return result |
| 91 | +} |
0 commit comments