fix: escape special characters in Figma property names in generated template code

[jmlweb]

Summary

Figma property names containing apostrophes (e.g. Tab's number) produce broken JavaScript when interpolated into single-quoted string literals in the generated template code. The Figma Code Connect panel fails to render the example, even though figma connect publish succeeds without errors.

Root cause

intrinsicToString() in cli/src/connect/intrinsics.ts interpolates figmaPropName directly inside single-quoted JS template literals without escaping:

// Before (broken for names containing apostrophes):
return `${selector}.__properties__.string('${args.figmaPropName}')`
// Generates: string('Tab's number')  — syntax error

Similarly, valueMappingToString() wraps enum mapping keys in double quotes without escaping internal double quotes.

Fix

• Rename replaceNewlines → escapeForSingleQuotedString with correct escaping order (backslashes first, then quotes, then newlines)
• Add escapeForDoubleQuotedString for double-quoted contexts (mapping keys, layer names, className strings)
• Apply escapeForSingleQuotedString to all figmaPropName interpolations in intrinsicToString (String, Instance, Boolean, Enum, Slot)
• Apply escapeForDoubleQuotedString to Children layer names, ClassName strings, TextContent layer names, NestedProps layer names, and valueMappingToString keys

Affected intrinsic types

Intrinsic	Quoting context	Escaping applied
String, Instance, Boolean, Enum, Slot	'${figmaPropName}'	escapeForSingleQuotedString
Children	"${layerName}"	escapeForDoubleQuotedString
ClassName	"${className}"	escapeForDoubleQuotedString
TextContent	'${layer}'	escapeForSingleQuotedString
NestedProps	"${layer}"	escapeForDoubleQuotedString
valueMappingToString keys	"${key}"	escapeForDoubleQuotedString

Reproduction

1. Create a Figma component with a property named Tab's number
2. Write a Code Connect file using figma.string("Tab's number")
3. Run figma connect publish — succeeds
4. Open the component in Figma → Code Connect panel → example does not render

Test plan

• Added SpecialCharProps.figma.tsx test fixture with apostrophes in figma.string, figma.enum (prop name + mapping key with apostrophe), figma.boolean, and double quotes in an enum mapping key
• Added corresponding SpecialCharProps.expected_template validating escaped output
• All 47 existing parser tests continue to pass
• New test validates both templateData (raw prop names preserved) and template (escaped output)

🤖 Generated with Claude Code