se-panfilov / mini-toastr

Small non-blocking notification library. No dependencies
https://se-panfilov.github.io/mini-toastr/
MIT License
96 stars 18 forks source link

[Solution Included] CSS Parsed Incorrectly #168

Open noalbalint opened 1 year ago

noalbalint commented 1 year ago

Hello @se-panfilov, thanks for creating this package.

I noticed that your makeCss function has a small bug that causes it to incorrectly parse the value of multi-word css rules.

For example, if I provide this message style override in the config object:

'.mini-toastr-notification__message': {
      display: 'inline-block',
      'vertical-align': 'middle',
      width: '240px',
      'white-space': 'pre-wrap',
    },

it will be parsed like so:

Screenshot 2023-10-12 at 14 02 12

the problem is this line:

.replace(/(\w*-?\w*): ([\w\d .#]*),?/g, '$1: $2;')

it needs to also look for - chars. ie, it should be changed to:

.replace(/(\w*-?\w*): ([\w\d .#-]*),?/g, '$1: $2;')

then the css is parsed as expected:

Screenshot 2023-10-12 at 14 04 19

Happy to open a PR for this but it looks like I don't have permission 🙏