Feature/fix responsive overrides #17

[tdhooper]

Fixes #17

[simonsmith]

@tdhooper Sorry for my delay here. Will review this today or tomorrow. Thanks for your help again!

[simonsmith]

Do we need to check if match could be null here?

[tdhooper]

Good spot!

[simonsmith]

Great stuff. Cheers

[simonsmith]

@tdhooper Curious about the intention of this function. Could the same not be achieved with return value.split(',')?

[tdhooper]

That was my initial approach, but it returns separate parts for the linear-gradient syntax. Then again, the rest of the code should cope fine with that now.

…

On 5 Jul 2017, at 10:04 pm, Simon Smith ***@***.***> wrote: @simonsmith commented on this pull request. In lib/index.js: > + +function splitMultipleBackgrounds(value) { + const backgrounds = []; + let opened = 0; + value.split(',').forEach((part) => { + if (opened > 0) { + backgrounds[backgrounds.length - 1] += `,${part}`; + } else { + backgrounds.push(part); + } + const open = count(part, '('); + const close = count(part, ')'); + opened += open - close; + }); + return backgrounds; +} @tdhooper Curious about the intention of this function. Could the same not be achieved with return value.split(',')? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[tdhooper]

Looking at this a bit more, for the given css:

.multi {
  background: url(http://example.com/image.png),
                    linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
                    green,
                    url(/public/images/cool.png) at-2x;
}

I don't think we should repeat green in the background-image rule we create, as it's not a valid image.

Instead, none makes more sense:

.multi {
  background-image: url(http://example.com/image.png),
                    linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
                    none,
                    url(/public/images/cool@2x.png);
}