Prevent breaking maps with list-like CSS values

[chriskirknielsen]

Problem

A JSON value for a font-family value can contain commas that currently, when output in Sass, break the map, e.g.:

{
    "fonts": {
        "serif": "Georgia, 'Times New Roman', serif",
        "sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
    }
}

…outputs…

$data: (
    fonts: (
        serif: Georgia, 'Times New Roman', serif,
        sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
        mono: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace
    )
)

Proposed solution

This proposed change wraps list-like strings in parentheses so that the contents don't break the map:

$data: (
    fonts: (
        serif: (Georgia, 'Times New Roman', serif),
        sans: (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif),
        mono: (Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace)
    )
)

And Sass will convert the list to a normal CSS-valid list without parentheses when used, like so:

$fonts: map-get($data, 'fonts');
$fonts-sans: map-get($fonts, 'sans');
body { font-family: $fonts-sans; }

…becomes…

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

Note

A value like rgb(255,255,255) contains commas, so technically this fix would also wrap any CSS function with multiple arguments in parentheses, but Sass is forgiving enough that this will output safely.