Stylus url is a function, and it sets its own quote style

[michaek]

Version info

Milligram:

1.3.0

Test case

Example stylus svg background

Steps to reproduce

Compile milligram-stylus.

Expected behavior

Arrows should be present in select elements. (Ideally, the color variable should be interpolated in the SVG string.)

Actual behavior

No arrows in select elements, because quotes are nested incorrectly.

[michaek]

It appears something like this might be desirable:

select
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='14' viewBox='0 0 29 14' width='29'><path fill='" + color-quaternary + "' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/></svg>") center right no-repeat
	padding-right: 3.0rem

	&:focus
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='14' viewBox='0 0 29 14' width='29'><path fill='" + color-primary + "' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/></svg>")

In the form styles

[cjpatoilo]

Today, the select element has these properties.

select
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23' + str-slice(inspect($color-quaternary), 2) + '" d="M0,0l6,8l6-8"/></svg>') center right no-repeat
  padding-right: 3.0rem

  &:focus
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23' + str-slice(inspect($color-primary), 2) + '" d="M0,0l6,8l6-8"/></svg>')

  &[multiple]
    background: none
    height: auto

[michaek]

@cjpatoilo It does not appear anything has changed in the Form.styl source since I filed this bug. Are you seeing that the quote behavior from the Stylus library has changed?

[michaek]

@cjpatoilo I see the changes that you've made now, but the problem is still present, and results from the presence of double quotes in the SVG image. See an updated example and look at the quote nesting in background-image (double quotes nested in double quotes). The workaround I suggested was to swap the quotes, but escaping the quotes would probably work.

[cjpatoilo]

@michaek Maybe I didn't understand you. Can you help Milligram to fix it?

[michaek]

Is the code you use to generate the Stylus version public? I've already given the example of how to fix it in the Stylus version, but if that's going to get overwritten every time there's an update it seems like the wrong place for a fix. :)

[michaek]

I'm willing to help, once it's clear where to make the fix. This issue should be reopened in the meantime.

[cjpatoilo]

@michaek Please, review this example.

[michaek]

Hi, @cjpatoilo. The example you provided contains the same issue: url("...<svg xmlns=" nested double quotes. To resolve it, I believe you either need to use only single quotes in the SVG, or escape any quotes in the SVG (though I haven't tested the latter).

[michaek]

Found this report on Stylus: stylus/stylus#2243 A maintainer marked it as a bug, but it doesn't look like it's going anywhere. Since you're handling just a small number of known cases, I would just swap the SVG quotes with single quotes - that's what I've done where I use milligram-stylus.

[michaek]

You might use https://github.com/tigt/mini-svg-data-uri (source) to encode the SVGs for all language destinations, though I'm not sure what browsers, if any, are impacted by not url encoding angle brackets.

[cjpatoilo]

Hi, @cjpatoilo. The example you provided contains the same issue: url("...<svg xmlns=" nested double quotes. To resolve it, I believe you either need to use only single quotes in the SVG, or escape any quotes in the SVG (though I haven't tested the latter).

For me work okay. Let me show you:

[cjpatoilo]

For now, I decided to launch milligram-stylus using # instead of %23
https://github.com/milligram/milligram-stylus/releases

Please, let me know if you find one way to print the variable color-quaternary and color-primary without the first character or changing it for %23

[michaek]

@cjpatoilo The image above doesn't show the quote style of the SVGs, so it's hard to know whether you're reproducing the issue or not. At the very least, I can see that Stylus has turned your url(' into url(", which is the underlying cause of this issue.

It looks like the most recent release (1.4.1) is still nesting double quotation marks (in the SVG) within single quotation marks (in the url(), which will create the issue I originally reported - double quotation marks included within double quotation marks, and an invalid background property.