Add wrap url

Author: owjs3901

src/code.ts

@@ -3,9 +3,10 @@ import { exportDevup, importDevup } from './commands/devup'
 import { exportAssets } from './commands/exportAssets'
 import { exportComponents } from './commands/exportComponents'
 
-export function registerCodegen(ctx: typeof figma = figma) {
+export function registerCodegen(ctx: typeof figma) {
   if (ctx.editorType === 'dev' && ctx.mode === 'codegen') {
-    ctx.codegen.on('generate', async ({ node, language }) => {
+    ctx.codegen.on('generate', async ({ node, language, ...rest }) => {
+      console.info(rest, node)
       switch (language) {
         case 'devup-ui': {
           const time = Date.now()
@@ -88,4 +89,6 @@ export function run(ctx: typeof figma) {
   }
 }
 
-run((globalThis as { figma?: unknown }).figma as typeof figma)
+if (typeof figma !== 'undefined') {
+  run(figma)
+}

src/codegen/Codegen.ts

@@ -9,6 +9,7 @@ import {
   getDevupComponentByNode,
   getDevupComponentByProps,
 } from './utils/get-devup-component'
+import { buildCssUrl } from './utils/wrap-url'
 
 export class Codegen {
   components: Map<
@@ -80,7 +81,7 @@ export class Codegen {
         const maskColor = await checkSameColor(node)
         if (maskColor) {
           // support mask image icon
-          props.maskImage = `url(${props.src})`
+          props.maskImage = buildCssUrl(props.src)
           props.maskRepeat = 'no-repeat'
           props.maskSize = 'contain'
           props.bg = maskColor

src/codegen/utils/__tests__/wrap-url.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, test } from 'bun:test'
+import { buildCssUrl } from '../wrap-url'
+
+describe('buildCssUrl', () => {
+  test('keeps simple paths unquoted', () => {
+    expect(buildCssUrl('/icons/logo.svg')).toBe('url(/icons/logo.svg)')
+  })
+
+  test('wraps paths with spaces', () => {
+    expect(buildCssUrl('/icons/logo icon.svg')).toBe(
+      "url('/icons/logo icon.svg')",
+    )
+  })
+
+  test('escapes single quotes inside path', () => {
+    expect(buildCssUrl("/icons/John's icon.svg")).toBe(
+      "url('/icons/John\\'s icon.svg')",
+    )
+  })
+})

src/codegen/utils/paint-to-css.ts

@@ -3,6 +3,7 @@ import { rgbaToHex } from '../../utils/rgba-to-hex'
 import { checkAssetNode } from './check-asset-node'
 import { fmtPct } from './fmtPct'
 import { solidToString } from './solid-to-string'
+import { buildCssUrl } from './wrap-url'
 
 interface Point {
   x: number
@@ -48,13 +49,13 @@ function convertImage(fill: ImagePaint): string {
 
   switch (fill.scaleMode) {
     case 'FILL':
-      return `url(/icons/${imageName}) center/cover no-repeat`
+      return `${buildCssUrl(`/icons/${imageName}`)} center/cover no-repeat`
     case 'FIT':
-      return `url(/icons/${imageName}) center/contain no-repeat`
+      return `${buildCssUrl(`/icons/${imageName}`)} center/contain no-repeat`
     case 'CROP':
-      return `url(/icons/${imageName}) center/cover no-repeat`
+      return `${buildCssUrl(`/icons/${imageName}`)} center/cover no-repeat`
     case 'TILE':
-      return `url(/icons/${imageName}) repeat`
+      return `${buildCssUrl(`/icons/${imageName}`)} repeat`
   }
 }
 
@@ -195,7 +196,8 @@ async function convertPattern(fill: PatternPaint): Promise<string> {
   const position = [horizontalPosition, verticalPosition]
     .filter(Boolean)
     .join(' ')
-  return `url(/icons/${imageName}.${imageExtension})${position ? ` ${position}` : ''} repeat`
+  const url = buildCssUrl(`/icons/${imageName}.${imageExtension}`)
+  return `${url}${position ? ` ${position}` : ''} repeat`
 }
 
 function convertPosition(

src/codegen/utils/wrap-url.ts

@@ -0,0 +1,11 @@
+/**
+ * Build a CSS url() value. If the path contains whitespace or characters
+ * that commonly require quoting, wrap it in single quotes and escape any
+ * existing single quotes.
+ */
+export function buildCssUrl(path: string): string {
+  const normalized = path.trim()
+  const needsQuotes = /[\s'"()]/.test(normalized)
+  const escaped = normalized.replace(/'/g, "\\'")
+  return `url(${needsQuotes ? `'${escaped}'` : escaped})`
+}