refactor(transformer): simplify template replacement logic

Now only the `css` template literal is replaced, not the entire variable declaration and its usages. This reduces code complexity and improves maintainability.

Author: kh4f

packages/rawstyle/src/transformer.ts

@@ -1,15 +1,14 @@
 import { parseSync, Visitor } from 'oxc-parser'
 import { generateHash } from '@/utils'
-import type { TransformResult, CssVarDecl, CssVarRef, Replacement } from '@/types'
+import type { TransformResult, Replacement } from '@/types'
 
 export const transform = (file: string, source: string): TransformResult => {
 	const { program } = parseSync(file, source)
-	const cssVarDecls: CssVarDecl[] = []
-	const cssVarRefs: CssVarRef[] = []
+	const fileHash = generateHash(file)
+	let transformed = source
+	let css = ''
 	const replacements: Replacement[] = []
-	let isInClassNameAttr = false
-	let activeRange: { start: number, end: number } | null
-	let currentVarName: string | null
+	let activeVarName: string | null
 
 	new Visitor({
 		ImportDeclaration(node) {
@@ -24,74 +23,37 @@ export const transform = (file: string, source: string): TransformResult => {
 			}
 		},
 
-		JSXAttribute(node) {
-			if (node.name.name !== 'className') return
-			if (node.value?.type !== 'JSXExpressionContainer') return
-			isInClassNameAttr = true
-		},
-
-		Identifier(node) {
-			if (!isInClassNameAttr) return
-			cssVarRefs.push({ name: node.name, start: node.start, end: node.end })
-		},
-
-		'JSXAttribute:exit'() {
-			isInClassNameAttr = false
-		},
-
 		VariableDeclaration(node) {
 			const variableDeclarator = node.declarations[0]
 			const identifier = variableDeclarator.id
 			if (identifier.type !== 'Identifier') return
-			currentVarName = identifier.name
-			activeRange = { start: node.start, end: node.end }
+			activeVarName = identifier.name
 		},
 
 		'VariableDeclaration:exit'() {
-			currentVarName = null
-			activeRange = null
-		},
-
-		ExpressionStatement(node) {
-			activeRange = { start: node.start, end: node.end }
-		},
-
-		'ExpressionStatement:exit'() {
-			activeRange = null
+			activeVarName = null
 		},
 
 		TaggedTemplateExpression(node) {
 			const tag = node.tag
 			if (tag.type !== 'Identifier' || !/^g?css$/.test(tag.name)) return
-			const template = node.quasi.quasis.map(q => {
-				const tpl = q.value.cooked ?? ''
-				const indent = (/^([^\n]*?)\S/m.exec(tpl))?.[1] ?? ''
-				return tpl.split('\n').map(line => line.replace(indent, '')).join('\n').trim()
-			}).join('')
-			if (!activeRange) return
-			cssVarDecls.push({ name: currentVarName ?? '', tag: tag.name, template, start: activeRange.start, end: activeRange.end })
-			replacements.push({ start: activeRange.start, end: activeRange.end, replacement: '' })
-		},
-	}).visit(program)
 
-	let transformed = source
-	const hash = generateHash(file)
-	let css = ''
+			const cssTpl = source.slice(node.quasi.start + 1, node.quasi.end - 1)
+			let rep = ''
+			if (tag.name === 'gcss') {
+				css += cssTpl
+				rep = '""'
+			} else {
+				const clName = `${activeVarName}_${fileHash}`
+				css += `.${clName} {${cssTpl}}`
+				rep = `'${activeVarName}_${fileHash}'`
+			}
 
-	for (const cssVar of cssVarDecls) {
-		if (cssVar.tag === 'gcss') {
-			css += cssVar.template
-		} else if (cssVar.tag === 'css') {
-			const className = `${cssVar.name}_${hash}`
-			const refs = cssVarRefs.filter(ref => ref.name === cssVar.name)
-			if (!refs.length) continue
-			for (const ref of refs) replacements.push({ start: ref.start, end: ref.end, replacement: `'${className}'` })
-			css += `.${className}{${cssVar.template}}`
-		}
-	}
+			replacements.push({ start: node.start, end: node.end, replacement: rep })
+		},
+	}).visit(program)
 
 	replacements.sort((a, b) => b.start - a.start)
-
 	for (const rep of replacements) transformed = transformed.slice(0, rep.start) + rep.replacement + transformed.slice(rep.end)
 
 	return { transformed, css }

packages/rawstyle/src/types.d.ts

@@ -3,20 +3,6 @@ export interface TransformResult {
 	css: string
 }
 
-export interface CssVarRef {
-	name: string
-	start: number
-	end: number
-}
-
-export interface CssVarDecl {
-	name: string
-	tag: string
-	template: string
-	start: number
-	end: number
-}
-
 export interface Replacement {
 	start: number
 	end: number