@charcoal-ui/icons-cli 5.9.0-beta.0 → 5.9.0-beta.1

package/src/v2/transformCSS.test.ts

@@ -0,0 +1,113 @@
+import { mkdtemp, readFile, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
+import fs from 'fs-extra'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+async function waitForFile(filePath: string) {
+  for (let i = 0; i < 100; i += 1) {
+    if (await fs.pathExists(filePath)) {
+      return
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 10))
+  }
+
+  throw new Error(`timed out waiting for ${filePath}`)
+}
+
+async function runTransformCss(
+  sourceDir: string,
+  outputDir: string,
+  version: 'v1' | 'v2',
+) {
+  const previousVersion = process.env.VERSION
+  const previousSourceRootDir = process.env.SOURCE_ROOT_DIR
+  const previousOutputRootDir = process.env.OUTPUT_ROOT_DIR
+
+  process.env.VERSION = version
+  process.env.SOURCE_ROOT_DIR = path.relative(import.meta.dirname, sourceDir)
+  process.env.OUTPUT_ROOT_DIR = outputDir
+
+  try {
+    vi.resetModules()
+    await import('./transformCSS')
+    await waitForFile(path.join(outputDir, 'index.story.tsx'))
+  } finally {
+    if (previousVersion === undefined) {
+      delete process.env.VERSION
+    } else {
+      process.env.VERSION = previousVersion
+    }
+
+    if (previousSourceRootDir === undefined) {
+      delete process.env.SOURCE_ROOT_DIR
+    } else {
+      process.env.SOURCE_ROOT_DIR = previousSourceRootDir
+    }
+
+    if (previousOutputRootDir === undefined) {
+      delete process.env.OUTPUT_ROOT_DIR
+    } else {
+      process.env.OUTPUT_ROOT_DIR = previousOutputRootDir
+    }
+  }
+}
+
+describe('transformCSS regression', () => {
+  let workDir: string
+
+  beforeEach(async () => {
+    workDir = await mkdtemp(path.join(tmpdir(), 'icons-cli-transform-css-'))
+  })
+
+  afterEach(async () => {
+    await fs.remove(workDir)
+  })
+
+  it('通常のv2アイコン名では既存のclass名を維持する', async () => {
+    const sourceDir = path.join(workDir, 'input')
+    const outputDir = path.join(workDir, 'output')
+
+    await fs.ensureDir(path.join(sourceDir, '24', 'regular'))
+    await writeFile(
+      path.join(sourceDir, '24', 'regular', 'Add.Circle.svg'),
+      '<svg />',
+    )
+
+    await runTransformCss(sourceDir, outputDir, 'v2')
+
+    const css = await readFile(path.join(outputDir, 'index.css'), 'utf8')
+
+    expect(css).toContain('.charcoal-icon-v2-add-circle')
+  })
+
+  it('危険な文字を含むv2ファイル名でも安全なclass名だけを生成する', async () => {
+    const sourceDir = path.join(workDir, 'input')
+    const outputDir = path.join(workDir, 'output')
+    const safeClassName = 'charcoal-icon-v2-bad-name-16'
+
+    await fs.ensureDir(path.join(sourceDir, '16', 'regular'))
+    await writeFile(
+      path.join(sourceDir, '16', 'regular', 'Bad "Name"..svg'),
+      '<svg />',
+    )
+
+    await runTransformCss(sourceDir, outputDir, 'v2')
+
+    const css = await readFile(path.join(outputDir, 'index.css'), 'utf8')
+    const html = await readFile(path.join(outputDir, 'index.html'), 'utf8')
+    const story = await readFile(
+      path.join(outputDir, 'index.story.tsx'),
+      'utf8',
+    )
+
+    expect(css).toContain(`.${safeClassName}`)
+    expect(html).toContain(`class="${safeClassName}"`)
+    expect(story).toContain(`className="${safeClassName}"`)
+
+    expect(css).not.toContain('Bad "Name"')
+    expect(html).not.toContain('Bad "Name"')
+    expect(story).not.toContain('Bad "Name"')
+  })
+})

package/src/v2/transformCSS.ts

@@ -2,14 +2,51 @@ import { mustBeDefined } from '../utils'
 import { glob, readFile, writeFile } from 'fs/promises'
 import { ensureDir } from 'fs-extra'
 import path from 'path'
-import { encodeSvgAsDataUri } from '../utils'
+import {
+  createCssClassNameSegment,
+  createSvgDataUri,
+  serializeJavaScriptValue,
+} from '../codegen'
+
+const previewStyles = `:root {
+  font-size: 24px;
+}
+.icons {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fill, 300px);
+}
+.icons div {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+}
+code {
+  font-size: 14px;
+}`
+
+function createPreviewItems(
+  classNames: string[],
+  classAttributeName: 'class' | 'className',
+) {
+  return classNames
+    .map(
+      (icon) => `
+  <div>
+    <div ${classAttributeName}="${icon}" aria-label=".${icon}" role="img"></div>
+    <code>.${icon}</code>
+  </div>`,
+    )
+    .join('\n')
+}
 
 async function transformV2(filePath: string, fileName: string) {
   const content = await readFile(filePath, 'utf-8')
   const [size, variant, name] = fileName.split('/')
+  const dataUri = createSvgDataUri(content)
   const cssName = [
     'charcoal-icon-v2',
-    name.toLowerCase().replace('.svg', '').replaceAll('.', '-'),
+    createCssClassNameSegment(name),
     ...(variant === 'regular' ? [] : [variant]),
     ...(size === '24' ? [] : [size]),
   ].join('-')
@@ -19,9 +56,7 @@ async function transformV2(filePath: string, fileName: string) {
   display: inline-block;
   width: 1em;
   height: 1em;
-  background: url('data:image/svg+xml;utf8,${encodeSvgAsDataUri(
-    content,
-  ).replace("'", "\\'")}');
+  background: url("${dataUri}");
   aspect-ratio: 1/1;
 }`
     : `
@@ -29,9 +64,7 @@ async function transformV2(filePath: string, fileName: string) {
   display: inline-block;
   width: 1em;
   height: 1em;
-  mask-image: url('data:image/svg+xml;utf8,${encodeSvgAsDataUri(
-    content,
-  ).replace("'", "\\'")}');
+  mask-image: url("${dataUri}");
   mask-size: 100% 100%;
   background: currentColor;
   aspect-ratio: 1/1;
@@ -47,9 +80,10 @@ async function transformV2(filePath: string, fileName: string) {
 async function transformV1(filePath: string, fileName: string) {
   const content = await readFile(filePath, 'utf-8')
   const [size, name] = fileName.split('/')
+  const dataUri = createSvgDataUri(content)
   const cssName = [
     'charcoal-icon-v1',
-    name.toLowerCase().replace('.svg', '').replaceAll('.', '-'),
+    createCssClassNameSegment(name),
     ...(size === '24' ? [] : [size]),
   ].join('-')
   const css = content.includes('<def')
@@ -58,9 +92,7 @@ async function transformV1(filePath: string, fileName: string) {
   display: inline-block;
   width: 1em;
   height: 1em;
-  background: url('data:image/svg+xml;utf8,${encodeSvgAsDataUri(
-    content,
-  ).replace("'", "\\'")}');
+  background: url("${dataUri}");
   aspect-ratio: 1/1;
 }`
     : `
@@ -68,9 +100,7 @@ async function transformV1(filePath: string, fileName: string) {
   display: inline-block;
   width: 1em;
   height: 1em;
-  mask-image: url('data:image/svg+xml;utf8,${encodeSvgAsDataUri(
-    content,
-  ).replace("'", "\\'")}');
+  mask-image: url("${dataUri}");
   mask-size: 100% 100%;
   background: currentColor;
   aspect-ratio: 1/1;
@@ -125,38 +155,12 @@ async function main() {
   classNames = classNames.sort()
   const html = `
 <div class="icons">
-${classNames
-  .map(
-    (icon) => `
-  <div>
-    <div class="${icon}" aria-label=".${icon}" role="img" />
-    <code>.${icon}</code>
-  </div>
-`,
-  )
-  .join('\n')}
+${createPreviewItems(classNames, 'class')}
 </div>`
 
   await writeFile(
     path.join(outDir, 'index.html'),
-    `<link rel="stylesheet" href="./index.css"><style>
-  :root {
-    font-size: 24px;
-  }
-  .icons {
-    display: grid;
-    gap: 8px;
-    grid-template-columns: repeat(auto-fill, 300px);
-  }
-  .icons div {
-    display: inline-flex;
-    gap: 8px;
-    align-items: center;
-  }
-  code {
-    font-size: 14px;
-  }
-</style>${html}`,
+    `<link rel="stylesheet" href="./index.css"><style>${previewStyles}</style>${html}`,
   )
   await writeFile(
     path.join(outDir, 'index.story.tsx'),
@@ -175,26 +179,11 @@ export default {
   render(): JSX.Element {
     return (
       <>
-       <style>{\`${cssContent}\`}</style>
-       <style>
-  {\`:root {
-    font-size: 24px;
-  }
-  .icons {
-    display: grid;
-    gap: 8px;
-    grid-template-columns: repeat(auto-fill, 300px);
-  }
-  .icons div {
-    display: inline-flex;
-    gap: 8px;
-    align-items: center;
-  }
-  code {
-    font-size: 14px;
-  }\`}
-</style>
-       ${html.replaceAll('class', 'className')}
+       <style>{${serializeJavaScriptValue(cssContent)}}</style>
+       <style>{${serializeJavaScriptValue(previewStyles)}}</style>
+       <div className="icons">
+${createPreviewItems(classNames, 'className')}
+       </div>
       </>
     )
   },

package/src/v2/transformDataUri.test.ts

@@ -0,0 +1,97 @@
+import { mkdtemp, readFile, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
+import vm from 'node:vm'
+import fs from 'fs-extra'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+async function waitForFile(filePath: string) {
+  for (let i = 0; i < 100; i += 1) {
+    if (await fs.pathExists(filePath)) {
+      return
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 10))
+  }
+
+  throw new Error(`timed out waiting for ${filePath}`)
+}
+
+async function runTransformDataUri(sourceDir: string, outputDir: string) {
+  const previousSourceRootDir = process.env.SOURCE_ROOT_DIR
+  const previousOutputRootDir = process.env.OUTPUT_ROOT_DIR
+
+  process.env.SOURCE_ROOT_DIR = path.relative(import.meta.dirname, sourceDir)
+  process.env.OUTPUT_ROOT_DIR = outputDir
+
+  try {
+    vi.resetModules()
+    await import('./transformDataUri')
+    await waitForFile(path.join(outputDir, 'index.d.ts'))
+  } finally {
+    if (previousSourceRootDir === undefined) {
+      delete process.env.SOURCE_ROOT_DIR
+    } else {
+      process.env.SOURCE_ROOT_DIR = previousSourceRootDir
+    }
+
+    if (previousOutputRootDir === undefined) {
+      delete process.env.OUTPUT_ROOT_DIR
+    } else {
+      process.env.OUTPUT_ROOT_DIR = previousOutputRootDir
+    }
+  }
+}
+
+describe('transformDataUri regression', () => {
+  let workDir: string
+
+  beforeEach(async () => {
+    workDir = await mkdtemp(
+      path.join(tmpdir(), 'icons-cli-transform-data-uri-'),
+    )
+  })
+
+  afterEach(async () => {
+    await fs.remove(workDir)
+  })
+
+  it('危険なキー名を含んでもCJS出力が壊れない', async () => {
+    const sourceDir = path.join(workDir, 'input')
+    const outputDir = path.join(workDir, 'output')
+    const iconName = String.raw`16/Bad'"Name\Icon`
+
+    await fs.ensureDir(path.join(sourceDir, '16'))
+    await writeFile(path.join(sourceDir, `${iconName}.svg`), '<svg />')
+
+    await runTransformDataUri(sourceDir, outputDir)
+
+    const cjs = await readFile(path.join(outputDir, 'index.cjs'), 'utf8')
+    const context = {
+      module: { exports: {} as Record<string, unknown> },
+    }
+
+    const script = new vm.Script(cjs)
+    script.runInNewContext(context)
+
+    expect(Object.keys(context.module.exports)).toEqual([iconName])
+  })
+
+  it('危険なSVG文字列でもdata URIを生で埋め込まない', async () => {
+    const sourceDir = path.join(workDir, 'input')
+    const outputDir = path.join(workDir, 'output')
+    const svgContent =
+      '<svg><text></style><script>alert("xss")</script></text></svg>'
+
+    await fs.ensureDir(path.join(sourceDir, '16'))
+    await writeFile(path.join(sourceDir, '16', 'Add.svg'), svgContent)
+
+    await runTransformDataUri(sourceDir, outputDir)
+
+    const mjs = await readFile(path.join(outputDir, 'index.mjs'), 'utf8')
+
+    expect(mjs).not.toContain('</style>')
+    expect(mjs).not.toContain('<script>')
+    expect(mjs).toContain('%3Csvg%3E')
+  })
+})

package/src/v2/transformDataUri.ts

@@ -1,7 +1,8 @@
 import { glob, readFile, writeFile } from 'fs/promises'
 import { ensureDir } from 'fs-extra'
 import path from 'path'
-import { encodeSvgAsDataUri, mustBeDefined } from '../utils'
+import { createSvgDataUri, serializeJavaScriptValue } from '../codegen'
+import { mustBeDefined } from '../utils'
 
 async function main() {
   mustBeDefined(process.env.SOURCE_ROOT_DIR, 'SOURCE_ROOT_DIR')
@@ -20,48 +21,39 @@ async function main() {
 
       return {
         iconName: fileName.replace('.svg', ''),
-        uri: `data:image/svg+xml;utf8,${encodeSvgAsDataUri(content).replace(
-          "'",
-          "\\'",
-        )}`,
+        uri: createSvgDataUri(content),
         isSetCurrentcolor: !content.includes('<def'),
       }
     }),
   )
 
-  const js = `/** This file is auto generated. DO NOT EDIT BY HAND. */
-  
-export default {
-${dataUris
-  .map(
-    (it) =>
-      `'${it.iconName}': {uri: '${it.uri}', isSetCurrentcolor: ${
-        it.isSetCurrentcolor ? 'true' : 'false'
-      }}`,
+  const dataUriMap = Object.fromEntries(
+    dataUris.map(({ iconName, uri, isSetCurrentcolor }) => [
+      iconName,
+      { uri, isSetCurrentcolor },
+    ]),
   )
-  .join(',\n')}
-}`
+
+  const js = `/** This file is auto generated. DO NOT EDIT BY HAND. */
+
+export default ${serializeJavaScriptValue(dataUriMap)}
+`
   await writeFile(path.join(outDir, 'index.mjs'), js)
 
   const cjs = `/** This file is auto generated. DO NOT EDIT BY HAND. */
-  
-module.exports = {
-${dataUris
-  .map(
-    (it) =>
-      `'${it.iconName}': {uri: '${it.uri}', isSetCurrentcolor: ${
-        it.isSetCurrentcolor ? 'true' : 'false'
-      }}`,
-  )
-  .join(',\n')}
-}`
+
+module.exports = ${serializeJavaScriptValue(dataUriMap)}
+`
   await writeFile(path.join(outDir, 'index.cjs'), cjs)
 
   const dts = `/** This file is auto generated. DO NOT EDIT BY HAND. */
   
 declare var _default: {
 ${dataUris
-  .map((it) => `'${it.iconName}': { uri: string, isSetCurrentcolor: boolean }`)
+  .map(
+    (it) =>
+      `${serializeJavaScriptValue(it.iconName)}: { uri: string, isSetCurrentcolor: boolean }`,
+  )
   .join(';\n')}}
 export default _default;
 `