stylus / nib

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

image() mixin breaks full URL:s #255

Open ghost opened 10 years ago

ghost commented 10 years ago

Image() mixin breaks full image url:s with nib 1.0.2

For example:

.logo
  image: url(http://cdn.service.com/logo.png) 200px 200px

Output:

.logo {
  background-image: url("https://cdn.service.com/logo.png");
  width: 200px;
  height: 200px;
}
@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
   background-image: url("https:/cdn.service.com/logo.png");
   -webkit-background-size: 200px 200px;
    -moz-background-size: 200px 200px;
    background-size: 200px 200px;
}

Second slash is missing after http: in the high resolution image url.

oOthkOo commented 9 years ago

This is a easy fix :+1: @tj

image(path, w = auto, h = auto, min_pixel_ratio = 1.5)
  background-image: url(path)

  s = 'all and (-webkit-min-device-pixel-ratio:' + min_pixel_ratio + '),'
  s = s + '(min--moz-device-pixel-ratio:' + min_pixel_ratio + '),'
  s = s + '(-o-min-device-pixel-ratio:' + min_pixel_ratio + '/1),'
  s = s + '(min-device-pixel-ratio:' + min_pixel_ratio + '),'
  s = s + '(min-resolution:' + unit(min_pixel_ratio*92, dpi) + '),'
  s = s + '(min-resolution:' + unit(min_pixel_ratio, dppx) + ')'

  @media s
    ext = extname(path)
    path = dirname(path) + '/' + basename(path, ext) + '@2x' + ext
    //p('final: ' + path) // uncomment this line to view url result
    background-image: url(path)
    if w in (cover contain) and h == auto
        h = null
    background-size: w h
notslang commented 9 years ago

@oOthkOo - wanna make a PR?

oOthkOo commented 9 years ago

@slang800 How I can do that ? I am a solid beginner on Github ;-)