[fatal] can't import config

[misha-erm]

Hi,

just installed the plugin in Figma Desktop.

When I try to import config I can see next error in console:

Thanks in advance for any help!

[ecklf]

Hey there,

can you share the config you tried uploading?

[misha-erm]

Oops, sorry.

here is the config:

module.exports = {
    theme: {
        colors: {
            // dark = 10% darker
            transparent: 'transparent',
            codGray: '#0C0C0C',
            wildSand: '#F6F6F6',
            white: '#FFFFFF',
            pumpkin: {
                default: '#0C0C0C',
                dark: '#E05100',
            },
            yellow: {
                default: '#FFC414',
                dark: '#E0A800',
            },
            teal: {
                default: '#0FD780',
                dark: '#0CA764',
            },
            gray: {
                default: '#DDDDDD',
                dark: '#C4C4C4',
            },
        },
        spacing: {
            xs: '4px',
            s: '8px',
            m: '16px',
            l: '24px',
            xl: '32px',
        },
        fontSize: {
            xs: '1rem',
            s: '1.125rem',
            sm: '1.25rem',
            m: '1.5rem',
            l: '1.875rem',
            xl: '2.25rem',
            '2xl': '3rem',
            '3xl': '4rem',
            '4xl': '5rem',
        },
        fontFamily: {
            extraLight: ['Geometria-ExtraLight'],
            light: ['Geometria-Light'],
            regular: ['Geometria'],
            medium: ['Geometria-Medium'],
            bold: ['Geometria-Bold'],
        },
        boxShadow: (theme) => ({
            panel: `5px 5px 20px rgba(12, 12, 12, 0.1)`, // codGray
            button: `0px 4px 4px rgba(12, 12, 12, 0.25)`, // codGray
            avatar: `0px 4px 15px rgba(12, 12, 12, 0.2)`, // codGray
        }),
        extend: {
            width: {
                avatar: '88px',
            },
            height: {
                avatar: '88px',
            },
        },
    },
    variants: {},
    plugins: [
        function extend({ addBase, addComponents, theme }) {
            addBase([
                {
                    h1: {
                        fontSize: theme('fontSize.4xl'),
                        fontFamily: theme('fontFamily.bold'),
                    },
                    h2: {
                        fontSize: theme('fontSize.3xl'),
                        fontFamily: theme('fontFamily.bold'),
                    },
                    h3: {
                        fontSize: theme('fontSize.2xl'),
                        fontFamily: theme('fontFamily.bold'),
                    },
                    h4: {
                        fontSize: theme('fontSize.xl'),
                        fontFamily: theme('fontFamily.bold'),
                    },
                    h5: {
                        fontSize: theme('fontSize.m'),
                        fontFamily: theme('fontFamily.bold'),
                    },
                    h6: {
                        fontSize: theme('fontSize.s'),
                        fontFamily: theme('fontFamily.bold'),
                    },
                },
            ]);

            addComponents({
                '.link': {
                    fontSize: theme('fontSize.m'),
                    fontFamily: theme('fontFamily.extraLight'),

                    '&:hover': {
                        textDecoration: 'underline',
                    },
                    '&:active': {
                        fontFamily: theme('fontFamily.regular'),
                    },
                },
                '.link-active': {
                    fontFamily: theme('fontFamily.regular'),
                },
            });
        },
    ],
};

[ecklf]

Yeah there are two things the plugin is having problems with when evaluating the config file.

1) Does not filter out the comment

// dark = 10% darker

2) Does not know what theme is

boxShadow: (theme) => ({
    panel: `5px 5px 20px rgba(12, 12, 12, 0.1)`, // codGray
    button: `0px 4px 4px rgba(12, 12, 12, 0.25)`, // codGray
    avatar: `0px 4px 15px rgba(12, 12, 12, 0.2)`, // codGray
}),

The way the plugin reads the config file is quite hacky since it needs to evaluate the JavaScript to access the config's values.

On one side there is the benefit that people can directly drag their config in without formatting it to something like JSON, but on the other there can also be resulting issues like this.

Both of the points mentioned are fixable but will require some more work regarding filtering / replacing contents of the read config's string. It might be even better to read the config line by line to resolve the comment issue which is hard to filter out since only the left hand side can be determined.

Until are fix is out this should work:

module.exports = {
  theme: {
    colors: {
      transparent: "transparent",
      codGray: "#0C0C0C",
      wildSand: "#F6F6F6",
      white: "#FFFFFF",
      pumpkin: {
        default: "#0C0C0C",
        dark: "#E05100"
      },
      yellow: {
        default: "#FFC414",
        dark: "#E0A800"
      },
      teal: {
        default: "#0FD780",
        dark: "#0CA764"
      },
      gray: {
        default: "#DDDDDD",
        dark: "#C4C4C4"
      }
    }
  },
  spacing: {
    xs: "4px",
    s: "8px",
    m: "16px",
    l: "24px",
    xl: "32px"
  },
  fontSize: {
    xs: "1rem",
    s: "1.125rem",
    sm: "1.25rem",
    m: "1.5rem",
    l: "1.875rem",
    xl: "2.25rem",
    "2xl": "3rem",
    "3xl": "4rem",
    "4xl": "5rem"
  },
  fontFamily: {
    extraLight: ["Geometria-ExtraLight"],
    light: ["Geometria-Light"],
    regular: ["Geometria"],
    medium: ["Geometria-Medium"],
    bold: ["Geometria-Bold"]
  },
  extend: {
    width: {
      avatar: "88px"
    },
    height: {
      avatar: "88px"
    }
  },
  variants: {},
  plugins: [
    function extend({ addBase, addComponents, theme }) {
      addBase([
        {
          h1: {
            fontSize: theme("fontSize.4xl"),
            fontFamily: theme("fontFamily.bold")
          },
          h2: {
            fontSize: theme("fontSize.3xl"),
            fontFamily: theme("fontFamily.bold")
          },
          h3: {
            fontSize: theme("fontSize.2xl"),
            fontFamily: theme("fontFamily.bold")
          },
          h4: {
            fontSize: theme("fontSize.xl"),
            fontFamily: theme("fontFamily.bold")
          },
          h5: {
            fontSize: theme("fontSize.m"),
            fontFamily: theme("fontFamily.bold")
          },
          h6: {
            fontSize: theme("fontSize.s"),
            fontFamily: theme("fontFamily.bold")
          }
        }
      ]);

      addComponents({
        ".link": {
          fontSize: theme("fontSize.m"),
          fontFamily: theme("fontFamily.extraLight"),

          "&:hover": {
            textDecoration: "underline"
          },
          "&:active": {
            fontFamily: theme("fontFamily.regular")
          }
        },
        ".link-active": {
          fontFamily: theme("fontFamily.regular")
        }
      });
    }
  ]
};

[misha-erm]

thanks for the fast reply

[misha-erm]

One more note:

You probably know about it but still

Previously I had my base colors defined in separate variable as

const colors = {
    black: '#000'
}

and used 'polished' library to create colors in theme out of base ones like so:

theme: {
    colors: {
        black: colors.black,
        black-dark: darken(black, 0.1)
    }
}

And it wasn't able to parse it

[ecklf]

and used 'polished' library

The plugin will only work with hsl(a), rgb(a) or hex values. It fails parsing since it has no clue where those values / methods come from.