TheComputerM / svelte-materialify

A Material UI Design Component library for Svelte heavily inspired by vuetify.
https://svelte-materialify.vercel.app
MIT License
623 stars 85 forks source link

Possible error in map-deep-merge function #262

Open Danacus opened 2 years ago

Danacus commented 2 years ago

The function call to non-destructive-map-merge might have to be a recursive call to map-deep-merge.

https://github.com/TheComputerM/svelte-materialify/blob/f30b6aa31f869968a9eb2f13e083334a64ee4e55/packages/svelte-materialify/src/styles/tools/_functions.scss#L23-L31

I believe this is why I can't create a custom dark theme if I try to edit one of the nested maps, like this for example:

$material-dark-theme: (
    'surface': #1d753a,
    'text': (
      'primary': material-color('shades', 'white'),
      'secondary': rgba(material-color('shades', 'white'), 0.7),
      'disabled': rgba(material-color('shades', 'white'), 0.5),
      'link': material-color('blue', 'accent-1'),
    ),
);

which results into the following error:

("primary": #ffffff, "secondary": rgba(255, 255, 255, 0.7), "disabled": rgba(255, 255, 255, 0.5), "link": #82b1ff) isn't a valid CSS value.
   ╷
27 │           $key: non-destructive-map-merge(map-get($result, $key), $value),
   │                                           ^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/svelte-materialify/src/styles/tools/_functions.scss 27:43  map-deep-merge()
  node_modules/svelte-materialify/src/styles/_variables.scss 329:23       @import
  src/routes/__layout.svelte 2:11                                         root stylesheet
Danacus commented 2 years ago

I can confirm that this is indeed the problem and changing the recursive call to the correct function name fixes the issue I was having.