search

mikaelvesavuori / figmagic

Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.
https://docs.figmagic.com
MIT License
813 stars 73 forks source link

Design token paths aren't updated in Element CSS imports #99

Closed maharielrosario closed 3 years ago

maharielrosario commented 3 years ago

Describe the bug If you have a directory set for the outputFolderTokens key in .figmagicrc and have syncElements set to true, the design token import root paths for your element's CSS will be tokens/ instead of the directory set in outputFolderTokens.

To Reproduce Steps to reproduce the behavior:

  1. Go to .figmagicrc in your project
  2. Set outputFolderTokens to a custom location (I tried .figmagic/tokens)
  3. Set syncElements to true
  4. Go to the elements directory and open an element CSS file
  5. Observe that the import path for design tokens is tokens/

Bug Example

In my .figmagicrc, I have "outputFolderTokens": ".figmagic/tokens" but for my CheckboxCSS.ts, import colors from 'tokens/colors' was generated.

Expected behavior If a outputFolderTokens value is set, the design token imports for the element CSS should use the outputFolderTokens value as its root path and if null, use tokens as the root path.

Solution Example

In my .figmagicrc, if I have "outputFolderTokens": ".figmagic/tokens", my CheckboxCSS.ts should show import colors from '.figmagic/tokens/colors'.

mikaelvesavuori commented 3 years ago

Hey @MasterMahariel!

This is now fixed in version 4.0.14. Please close this issue if you find it resolves your problem.

maharielrosario commented 3 years ago

Hi @mikaelvesavuori! Thanks for the update. I had updated and received version 4.0.15 and found that the paths look correct but I am getting an error about the import paths.

Here's an example: Cannot find module '.figmagic/tokens/colors' or its corresponding type declarations.ts(2307)

Upon typing in an absolute path, it starts in my C drive rather than the root of the project.

Is it possible that a baseUrl or something similar to that hasn't been set to the project root?

mikaelvesavuori commented 3 years ago

That has to do with how Node and your project setup resolves paths, and is not technically a Figmagic issue. Could you try /.figmagic/tokens/colors and see if that works for you?

maharielrosario commented 3 years ago

It did not work for me. I'll take a look at my project setup. Thanks for your help.

maharielrosario commented 3 years ago

Sorry to resurrect this issue but today I am noticing that my figmagicFolder, outputFolderTokens, and outputFolderElements are being ignored. It was working fine yesterday. Was there a change?

mikaelvesavuori commented 3 years ago

I am not seeing this issue... See image and how it creates folders and files as needed.

figmagic-generation
maharielrosario commented 3 years ago

Here is an example.

Screenshot (25)

It was working a few minutes ago but then it stopped.

maharielrosario commented 3 years ago

After looking into this more, there seems to be an issue with where the setting is placed.

https://user-images.githubusercontent.com/12755283/113092288-b9613700-91bb-11eb-9211-936c0f86e42a.mp4

mikaelvesavuori commented 3 years ago

Hi again @MasterMahariel !

Very good reproducible videos. The error is because the document (or just the last item...?) becomes invalid when you have the last comma on "syncElements": true, and all other such test cases you show.

Removing the last comma rectifies the issue. I will close this, and will add a backlog item to see if I can support JSON documents as well, since something like VS Code will usually clean any such messes up (which will not happen with the current non-standard figmagicrc file).

maharielrosario commented 3 years ago

Hi again @MasterMahariel !

Very good reproducible videos. The error is because the document (or just the last item...?) becomes invalid when you have the last semicolon on "syncElements": true, and all other such test cases you show.

Removing the last semicolon rectifies the issue. I will close this, and will add a backlog item to see if I can support JSON documents as well, since something like VS Code will usually clean any such messes up (which will not happen with the current non-standard figmagicrc file).

Thanks for pointing that out. Wow, not sure if I'm happy or mad about it being just a comma issue. At least i'm not going becoming more crazy. I ended up just associating the .figmagicrc file as a JSON file in the VSCode settings which will take care of validation.