stylus / nib

Stylus mixins, utilities, components, and gradient image generation
http://stylus.github.io/nib
MIT License
1.9k stars 250 forks source link

iteration variable `i` leaked into background image url. #74

Open asuth opened 12 years ago

asuth commented 12 years ago

When I use a file path that includes /i/, nib replaces that /i/ with /0/ in the vendor-prefixed gradients.

a
    background-image url(/i/providence/plus.png) linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0.07))

produces

a {
  background-image: url("/0/providence/plus.png") -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.25)), color-stop(1, rgba(0,0,0,0.07)));
  background-image: url("/0/providence/plus.png") -webkit-linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.07) 100%);
  background-image: url("/0/providence/plus.png") -moz-linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.07) 100%);
  background-image: url("/i/providence/plus.png") linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.07) 100%);
}
kizu commented 12 years ago

There are two workarounds for this:

  1. Enclose the url in quotes, like url('/i/providence/plus.png').
  2. Escape the i, like url(/\i/providence/plus.png).

In those cases the i won't be replaced.

asuth commented 12 years ago

hm, fair enough, but should be fixed!

tregagnon commented 12 years ago

Just met this bug. I enclosed the URL in quotes to avoid it, but I would prefer to use the simpler and valid CSS syntax with no quotes.

tj commented 12 years ago

blah yeah that is no good, we need to get on mandatory $ var prefixes. CSS url() syntax is a disaster, why they didn't force quotes is beyond me but it's extremely lame