@nuasite/cms 0.7.2 → 0.8.0

package/src/handlers/source-writer.ts

@@ -346,10 +346,12 @@ function replaceClassInAttribute(
 	newClass: string,
 	sourceLine?: number,
 ): { success: true; content: string } | { success: false; error: string } {
-	const classAttrPattern = /(class\s*=\s*)(["'])([^"']*)\2/
-
 	const replaceOnLine = (line: string): string | null => {
-		const match = line.match(classAttrPattern)
+		// Build pattern dynamically to only exclude the actual quote character used,
+		// so bg-[url('/path')] works inside class="..." (single quotes allowed in double-quoted attr)
+		const dqMatch = line.match(/(class\s*=\s*)(")([^"]*)"/)
+		const sqMatch = line.match(/(class\s*=\s*)(')([^']*)'/)
+		const match = dqMatch || sqMatch
 		if (!match) return null
 
 		const prefix = match[1]!
@@ -365,7 +367,7 @@ function replaceClassInAttribute(
 		} else {
 			classes.splice(idx, 1)
 		}
-		return line.replace(classAttrPattern, `${prefix}${quote}${classes.join(' ')}${quote}`)
+		return line.replace(match[0], `${prefix}${quote}${classes.join(' ')}${quote}`)
 	}
 
 	if (sourceLine) {
@@ -403,12 +405,23 @@ function appendClassToAttribute(
 	newClass: string,
 	sourceLine?: number,
 ): { success: true; content: string } | { success: false; error: string } {
-	const appendPattern = /(class\s*=\s*["'])([^"']*)(["'])/
+	// Match class attribute with either quote, only excluding the actual quote used
+	// so bg-[url('/path')] works inside class="..."
+	const matchClassAttr = (line: string) => {
+		return line.match(/(class\s*=\s*")(([^"]*))(")/)
+			|| line.match(/(class\s*=\s*')(([^']*))(')/)
+	}
 
-	const doAppend = (_: string, open: string, classes: string, close: string) => {
+	const doAppendOnLine = (line: string): string | null => {
+		const match = matchClassAttr(line)
+		if (!match) return null
+		const open = match[1]!
+		const classes = match[2]!
+		const close = match[4]!
 		const trimmed = classes.trimEnd()
 		const separator = trimmed ? ' ' : ''
-		return `${open}${trimmed}${separator}${escapeReplacement(newClass)}${close}`
+		const replacement = `${open}${trimmed}${separator}${escapeReplacement(newClass)}${close}`
+		return line.replace(match[0], replacement)
 	}
 
 	if (sourceLine) {
@@ -416,9 +429,9 @@ function appendClassToAttribute(
 		const lineIndex = sourceLine - 1
 
 		if (lineIndex >= 0 && lineIndex < lines.length) {
-			const line = lines[lineIndex]!
-			if (appendPattern.test(line)) {
-				lines[lineIndex] = line.replace(appendPattern, doAppend)
+			const result = doAppendOnLine(lines[lineIndex]!)
+			if (result !== null) {
+				lines[lineIndex] = result
 				return { success: true, content: lines.join('\n') }
 			}
 			return { success: false, error: `No class attribute found on line ${sourceLine}` }
@@ -426,10 +439,13 @@ function appendClassToAttribute(
 		return { success: false, error: `Invalid source line ${sourceLine}` }
 	}
 
-	if (appendPattern.test(content)) {
-		return {
-			success: true,
-			content: content.replace(appendPattern, doAppend),
+	// Fallback: find the first class attribute in the content
+	const lines = content.split('\n')
+	for (let i = 0; i < lines.length; i++) {
+		const result = doAppendOnLine(lines[i]!)
+		if (result !== null) {
+			lines[i] = result
+			return { success: true, content: lines.join('\n') }
 		}
 	}
 	return { success: false, error: 'No class attribute found in source file' }

package/src/html-processor.ts

@@ -1,8 +1,8 @@
 import { type HTMLElement as ParsedHTMLElement, parse } from 'node-html-parser'
 import { processSeoFromHtml } from './seo-processor'
 import { enhanceManifestWithSourceSnippets } from './source-finder'
-import { extractColorClasses, extractTextStyleClasses } from './tailwind-colors'
-import type { Attribute, ComponentInstance, ImageMetadata, ManifestEntry, PageSeoData, SeoOptions } from './types'
+import { extractBackgroundImageClasses, extractColorClasses, extractTextStyleClasses } from './tailwind-colors'
+import type { Attribute, BackgroundImageMetadata, ComponentInstance, ImageMetadata, ManifestEntry, PageSeoData, SeoOptions } from './types'
 import { generateStableId } from './utils'
 
 /** Type for parsed HTML element nodes from node-html-parser */
@@ -612,6 +612,68 @@ export async function processHtml(
 		})
 	})
 
+	// Background image detection pass: mark elements with bg-[url()] classes
+	interface BgImageEntry {
+		metadata: BackgroundImageMetadata
+		sourceFile?: string
+		sourceLine?: number
+	}
+	const bgImageEntries = new Map<string, BgImageEntry>()
+	root.querySelectorAll('*').forEach((node) => {
+		// Skip already-marked elements
+		if (node.getAttribute(attributeName)) return
+
+		// Skip elements inside markdown wrapper
+		if (isInsideMarkdownWrapper(node)) return
+
+		const classAttr = node.getAttribute('class')
+		const bgMeta = extractBackgroundImageClasses(classAttr)
+		if (!bgMeta) return
+
+		// When skipMarkdownContent is true, only mark elements with source file attributes
+		if (skipMarkdownContent) {
+			let hasSourceAttr = false
+			let current: HTMLNode | null = node
+			while (current) {
+				if (current.getAttribute?.('data-astro-source-file')) {
+					hasSourceAttr = true
+					break
+				}
+				current = current.parentNode as HTMLNode | null
+			}
+			if (!hasSourceAttr) return
+		}
+
+		const id = getNextId()
+		node.setAttribute(attributeName, id)
+		node.setAttribute('data-cms-bg-img', 'true')
+
+		// Try to get source location from the element itself or ancestors
+		let sourceFile: string | undefined
+		let sourceLine: number | undefined
+		let current: HTMLNode | null = node
+		while (current && !sourceFile) {
+			const file = current.getAttribute?.('data-astro-source-file')
+			const line = current.getAttribute?.('data-astro-source-loc') || current.getAttribute?.('data-astro-source-line')
+			if (file) {
+				sourceFile = file
+				if (line) {
+					const lineNum = parseInt(line.split(':')[0] ?? '1', 10)
+					if (!Number.isNaN(lineNum)) {
+						sourceLine = lineNum
+					}
+				}
+			}
+			current = current.parentNode as HTMLNode | null
+		}
+
+		bgImageEntries.set(id, {
+			metadata: bgMeta,
+			sourceFile,
+			sourceLine,
+		})
+	})
+
 	// Third pass: collect candidate text elements (don't mark yet)
 	// We collect candidates first to filter out pure containers before marking
 	interface TextCandidate {
@@ -645,7 +707,12 @@ export async function processHtml(
 		// Only apply when includeTags is null or doesn't include 'span'
 		if (skipInlineStyleTags && (includeTags === null || !includeTags.includes('span')) && tag === 'span') {
 			const classAttr = node.getAttribute('class')
-			if (classAttr && hasOnlyTextStyleClasses(classAttr)) {
+			// Skip bare spans (no classes) - they're just text wrappers
+			if (!classAttr || !classAttr.trim()) {
+				return
+			}
+			// Skip styled spans (only text styling classes)
+			if (hasOnlyTextStyleClasses(classAttr)) {
 				return
 			}
 		}
@@ -711,7 +778,8 @@ export async function processHtml(
 		const hasDescendants = hasCandidateDescendants(node)
 
 		// Skip pure containers - they have no direct text and all content comes from children
-		if (!directText && hasDescendants) {
+		// Exempt <a> elements - they have editable attributes (href)
+		if (!directText && hasDescendants && candidate.tag !== 'a') {
 			candidateNodes.delete(node) // Remove from candidates so nested checks stay accurate
 			continue
 		}
@@ -820,12 +888,18 @@ export async function processHtml(
 			const imageInfo = imageEntries.get(id)
 			const isImage = !!imageInfo
 
+			// Check if this is a background image entry
+			const bgImageInfo = bgImageEntries.get(id)
+			// Also extract bg image classes fresh for elements marked for other reasons
+			const bgImageClassAttr = node.getAttribute('class')
+			const bgImageMetadata = bgImageInfo?.metadata ?? extractBackgroundImageClasses(bgImageClassAttr)
+
 			// Check if this is the collection wrapper
 			const isCollectionWrapper = id === collectionWrapperId
 
 			const entryText = isImage ? (imageInfo.metadata.alt || imageInfo.metadata.src) : textWithPlaceholders.trim()
-			// For images, use the source file we captured from ancestors if not in sourceLocationMap
-			const entrySourcePath = sourceLocation?.file || imageInfo?.sourceFile || sourcePath
+			// For images/bg-images, use the source file we captured from ancestors if not in sourceLocationMap
+			const entrySourcePath = sourceLocation?.file || imageInfo?.sourceFile || bgImageInfo?.sourceFile || sourcePath
 
 			// Generate stable ID based on content and context
 			const stableId = generateStableId(tag, entryText, entrySourcePath)
@@ -848,7 +922,7 @@ export async function processHtml(
 				html: htmlContent,
 				sourcePath: entrySourcePath,
 				childCmsIds: childCmsIds.length > 0 ? childCmsIds : undefined,
-				sourceLine: sourceLocation?.line ?? imageInfo?.sourceLine,
+				sourceLine: sourceLocation?.line ?? imageInfo?.sourceLine ?? bgImageInfo?.sourceLine,
 				sourceSnippet: undefined,
 				variableName: undefined,
 				parentComponentId,
@@ -860,6 +934,8 @@ export async function processHtml(
 				stableId,
 				// Image metadata for image entries
 				imageMetadata: imageInfo?.metadata,
+				// Background image metadata for bg-[url()] elements
+				backgroundImage: bgImageMetadata,
 				// Color and text style classes for buttons/styled elements
 				colorClasses: allTrackedClasses,
 				// All attributes with resolved values (isStatic will be updated later from source)

package/src/source-finder/snippet-utils.ts

@@ -656,7 +656,10 @@ export async function enhanceManifestWithSourceSnippets(
 								const propName = cached.propAliases.get(baseVar)!
 								const componentFileName = path.basename(filePath)
 								const result = await searchForExpressionProp(
-									componentFileName, propName, exprPath, entry.text!,
+									componentFileName,
+									propName,
+									exprPath,
+									entry.text!,
 								)
 								if (result) {
 									const propSnippet = result.snippet ?? trimmedText
@@ -682,7 +685,8 @@ export async function enhanceManifestWithSourceSnippets(
 						for (const searchDir of ['pages', 'components', 'layouts']) {
 							try {
 								const result = await searchForPropInParents(
-									path.join(srcDir, searchDir), trimmedText,
+									path.join(srcDir, searchDir),
+									trimmedText,
 								)
 								if (result) {
 									const parentSnippet = result.snippet ?? trimmedText

package/src/tailwind-colors.ts

@@ -9,6 +9,7 @@ export {
 	buildColorClass,
 	COLOR_CLASS_PATTERNS,
 	DEFAULT_TAILWIND_COLORS,
+	extractBackgroundImageClasses,
 	extractColorClasses,
 	extractTextStyleClasses,
 	getColorType,

package/src/types.ts

@@ -42,6 +42,20 @@ export interface ComponentDefinition {
 	previewWidth?: number
 }
 
+/** Background image metadata for elements using bg-[url()] */
+export interface BackgroundImageMetadata {
+	/** Full Tailwind class, e.g. bg-[url('/path.png')] */
+	bgImageClass: string
+	/** Extracted image URL, e.g. /path.png */
+	imageUrl: string
+	/** Background size class: bg-auto | bg-cover | bg-contain */
+	bgSize?: string
+	/** Background position class: bg-center | bg-top | bg-bottom-left | ... */
+	bgPosition?: string
+	/** Background repeat class: bg-repeat | bg-no-repeat | bg-repeat-x | bg-repeat-y */
+	bgRepeat?: string
+}
+
 /** Image metadata for better tracking and integrity */
 export interface ImageMetadata {
 	/** Image source URL */
@@ -155,6 +169,8 @@ export interface ManifestEntry {
 	sourceHash?: string
 	/** Image metadata for img elements (replaces imageSrc/imageAlt) */
 	imageMetadata?: ImageMetadata
+	/** Background image metadata for elements using bg-[url()] */
+	backgroundImage?: BackgroundImageMetadata
 	/** Content validation constraints */
 	constraints?: ContentConstraints
 	/** Color classes applied to this element (for buttons, etc.) */