Exporting Graphics to React on unix fails because of case sensitive file names

[mcastiello]

I was trying to set up a GitHub pipeline following this example and using the default template.

this is my currect figmagic.json

{
  "outputFormatTokens": "json",
  "outputFormatStorybook": "mdx",
  "outputFolderElements": "./src/elements",
  "outputFolderGraphics": "./src/graphics",
  "outputFolderTokens": "./src/tokens",
  "syncElements": true,
  "syncGraphics": true,
  "syncTokens": true,
  "refreshType": "hard",
  "templates": {
    "templatePathReact": "./templates/react",
    "templatePathGraphic": "./templates/graphic",
    "templatePathStyled": "./templates/styled"
  },
  "tokensRelativeImportPrefix": "../../../",
  "outputGraphicElements": true,
  "overwrite": {
    "css": true,
    "description": true,
    "graphic": true,
    "react": true,
    "storybook": true,
    "styled": true
  }
}

This is the output I get from GitHub:

This process works flawless on my local windows machine, so I've added a few extra steps to see if the Graphics where generated:

I've started debugging the code and I've noticed that this is the piece of code that it is throwing the error in bin/usecases/interactors/elements/writeElements.ts:

      if (type === 'graphic') {
        const SVG_DATA = getSvgFileData(`${config.outputFolderGraphics}/${config.name}.svg`);
        return cleanSvgData(SVG_DATA);
      }

And config.name is defined like this:

const name = toPascalCase(element.name);

so, basically, it is looking for ./src/graphics/Check.svg instead of ./src/graphics/check.svg.\ This works fine on a windows machine, but it won't work on unix.

Desktop:

• OS: ubuntu-latest
• Node: 14.x
• Version: 4.3.3

I guess exporting the actual SVG using Pascal Case notation would potentially fix the issue.

[mikaelvesavuori]

Hi! I will look into this after the other ongoing issues. This issue shouldn't happen and was supposed to be covered by other recent work, though.... :/

[mcastiello]

Thanks, your work is very much appreciated. For now I just wrote a temporary script that reads the graphics path and generate the react components.

[mcastiello]

Lol, sorry, I hit the wrong button and closed the issue accidentally

[mikaelvesavuori]

I was starting work on this last night and it is related to another current issue.

One way to deal with this is by simply not using transforms like toPascalCase() on anything. Probably that will be my ”solution”, thus exactly representing whatever names one might use in Figma.

[mikaelvesavuori]

I am trying to push out 4.3.5 now which should fix this.

This release changes the previous behaviour of using pascal case or camelcase to adjust names that are passed through. The new behaviour is that names are taken "as-is".

The change should fix your exhibited issue.