Code Connect v1.3.12

Author: figma-bot

CHANGELOG.md

@@ -1,7 +1,10 @@
-# Code Connect v1.3.12 (TBD)
+# Code Connect v1.3.12
 
 ## Fixed
 
+- Fixed a problem with path alias imports incorrectly importing index files
+- Fixed parsing failure for Compose in Windows.
+
 ### General
 
 # Code Connect v1.3.11 (26th November 2025)

cli/npm_catalog.toml

@@ -165,7 +165,6 @@
 "@stylexjs/stylex" = "0.16.2"
 "@stylexjs/babel-plugin" = "0.16.2"
 "@stylexjs/eslint-plugin" = "0.16.2"
-"@stylextras/stylex-include" = "0.1.1"
 "@tailwindcss/oxide" = "4.1.3"
 "@tailwindcss/postcss" = "4.1.3"
 "@tailwindcss/vite" = "4.1.3"
@@ -183,6 +182,7 @@
 "@figma/plugin-typings" = "1.121.0"
 "@figma/widget-typings" = "1.12.1"
 "@modelcontextprotocol/sdk" = "1.18.0"
+"@sentry/cli" = "2.58.2"
 "@types/mocha" = "10.0.10"
 "@types/node" = "22.17.2"
 "@types/react" = "18.0.26"

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@figma/code-connect",
-  "version": "1.3.11",
+  "version": "1.3.12",
   "description": "A tool for connecting your design system components in code with your design system in Figma",
   "keywords": [],
   "author": "Figma",

cli/src/connect/__test__/project.test.ts

@@ -1,4 +1,9 @@
-import { CodeConnectReactConfig, getRemoteFileUrl, mapImportPath } from '../project'
+import {
+  CodeConnectReactConfig,
+  getRemoteFileUrl,
+  mapImportPath,
+  mapImportSpecifier,
+} from '../project'
 
 describe('Project helper functions', () => {
   function getConfig(importPaths: {}): CodeConnectReactConfig {
@@ -72,6 +77,95 @@ describe('Project helper functions', () => {
       )
       expect(mapped).toEqual('@ui/icons')
     })
+
+    it('Uses filename for index files (use mapImportSpecifier for better results)', () => {
+      // Note: mapImportPath uses the resolved file path, so index.ts files return 'index'.
+      // For better handling of path aliases, use mapImportSpecifier with the original specifier.
+      const mapped = mapImportPath(
+        '/Users/test/app/src/AlertTitle/index.ts',
+        getConfig({ importPaths: { 'src/*': '@acme/package/*' } }),
+      )
+      expect(mapped).toEqual('@acme/package/index')
+    })
+
+    it('Uses filename for nested index files', () => {
+      const mapped = mapImportPath(
+        '/Users/test/app/src/components/Button/index.tsx',
+        getConfig({ importPaths: { 'src/*': '@ui/*' } }),
+      )
+      expect(mapped).toEqual('@ui/index')
+    })
+
+    it('Uses filename when file is not an index file', () => {
+      const mapped = mapImportPath(
+        '/Users/test/app/src/AlertTitle/AlertTitle.tsx',
+        getConfig({ importPaths: { 'src/*': '@acme/package/*' } }),
+      )
+      expect(mapped).toEqual('@acme/package/AlertTitle')
+    })
+  })
+
+  describe('importSpecifier mappings', () => {
+    it('Transforms path alias with wildcard to package path', () => {
+      const mapped = mapImportSpecifier(
+        '@/AlertTitle',
+        getConfig({ importPaths: { '@/*': '@acme/package/*' } }),
+      )
+      expect(mapped).toEqual('@acme/package/AlertTitle')
+    })
+
+    it('Transforms nested path alias to package path', () => {
+      const mapped = mapImportSpecifier(
+        '@/components/Button',
+        getConfig({ importPaths: { '@/*': '@ui/*' } }),
+      )
+      expect(mapped).toEqual('@ui/components/Button')
+    })
+
+    it('Handles exact match without wildcard', () => {
+      const mapped = mapImportSpecifier(
+        '@/Button',
+        getConfig({ importPaths: { '@/Button': '@acme/Button' } }),
+      )
+      expect(mapped).toEqual('@acme/Button')
+    })
+
+    it('Handles wildcard replacement without output wildcard', () => {
+      const mapped = mapImportSpecifier(
+        '@/components/Button',
+        getConfig({ importPaths: { '@/*': '@ui' } }),
+      )
+      expect(mapped).toEqual('@ui')
+    })
+
+    it('Returns null for non-matching specifiers', () => {
+      const mapped = mapImportSpecifier(
+        './Button',
+        getConfig({ importPaths: { '@/*': '@acme/package/*' } }),
+      )
+      expect(mapped).toBeNull()
+    })
+
+    it('Matches first pattern when multiple patterns could match', () => {
+      const mapped = mapImportSpecifier(
+        '@/icons/icon',
+        getConfig({ importPaths: { '@/icons/*': '@ui/icons/*', '@/*': '@ui/*' } }),
+      )
+      expect(mapped).toEqual('@ui/icons/icon')
+    })
+
+    it('Returns null when no importPaths configured', () => {
+      const mapped = mapImportSpecifier('@/Button', getConfig({}))
+      expect(mapped).toBeNull()
+    })
+
+    it('Handles special regex characters in pattern', () => {
+      const mapped = mapImportSpecifier(
+        '@scope/package/Button',
+        getConfig({ importPaths: { '@scope/package/*': '@acme/*' } }),
+      )
+      expect(mapped).toEqual('@acme/Button')
+    })
   })
 
   describe('getRemoteFileUrl', () => {

cli/src/connect/project.ts

@@ -826,11 +826,50 @@ export function mapImportPath(filePath: string, config: CodeConnectReactConfig):
     }
 
     // If the mapped path ends with a wildcard we want to keep the filename in
-    // the final path (for non-index imports)
+    // the final path
     if (isMatch(patternParts, pathParts)) {
-      return value.endsWith('*') ? `${value.slice(0, -1)}${pathParts[0].split('.')[0]}` : value
+      if (value.endsWith('*')) {
+        const filename = pathParts[0].split('.')[0]
+        return `${value.slice(0, -1)}${filename}`
+      }
+      return value
     }
   }
 
   return null
 }
+
+/**
+ * Transform an import specifier (the path in the import statement) using importPaths config.
+ * This works directly on the module specifier from the source code, preserving the user's intent.
+ *
+ * E.g., '@/AlertTitle' with config { "@/*": "@acme/package/*" } → '@acme/package/AlertTitle'
+ *
+ * @param specifier The original import specifier from the source file (e.g., '@/AlertTitle', './Button')
+ * @param config The Code Connect config containing importPaths
+ * @returns The transformed import path, or null if no mapping matched
+ */
+export function mapImportSpecifier(
+  specifier: string,
+  config: CodeConnectReactConfig,
+): string | null {
+  for (const [pattern, replacement] of Object.entries(config.importPaths || {})) {
+    // Convert glob pattern to regex: @/* → ^@/(.*)$
+    // First escape special regex chars, then convert * to capture group
+    const regexPattern = pattern
+      .replace(/[.+?^${}()|[\]\\]/g, '\\$&') // Escape special chars except *
+      .replace(/\*/g, '(.*)') // Convert * to capture group
+    const regex = new RegExp(`^${regexPattern}$`)
+    const match = specifier.match(regex)
+
+    if (match) {
+      // Replace * in replacement with captured group
+      let result = replacement
+      if (match[1] !== undefined) {
+        result = replacement.replace('*', match[1])
+      }
+      return result
+    }
+  }
+  return null
+}