CODEWITHSUNDEEP
javascriptcssgruntjsstylus
Rob
Rob

Reputation: 11368

How to enable Stylus url() rewrites

I'm trying to get stylus urls to work. I would like to convert the url('/path/to/img.png') to convert to the base64 encoded form.

I'm trying to follow the documentation here, but it's not helping me much.

I tried adding the require bit and the example functions, importing url, but not sure how to enable this thing.

How do I get this to work?

UPDATE:

Trying to use grunt-image-embed plugin.

Here is my grunt config:

imageEmbed: {
  dist: {
    src: [ "./public/local/css/images.css" ],
    dest: "./public/prod/css/images.css",
    options: {
      deleteAfterEncoding : false
    }
  }
},

And the css contains:

#footer-social .youtube {
  width: 18px;
  background-image: url('/img/youtube-icon.png');
}

Which produces the error:

Warning: File C:\path\...\grunt-image-embed\tasks\lib\img\youtube-icon.png
does not exist Use --force to continue.

If I remove the background-image line it all works and goes through fine. I can't modify the paths in the css because on local we use the relative path to the actual image.

Upvotes: 1

Views: 1686

Answers (3)

Michael Cole
Michael Cole

Reputation: 16217

try this:

function compile(str, path) {
  return stylus(str)
            .define('url', stylus.url({
              paths : [__dirname + '/public'],
              limit : 10000
            }));
}

From here:

http://bengourley.co.uk/using-stylus

It worked for me here:

https://github.com/MichaelJCole/wintersmith-stylus/blob/master/plugin.coffee

It's coffeescript, and the interesting part is this:

      stylus(@_text, options)
      .use(nib())
      .define('url', stylus.url(
        paths : [__dirname + '/public']
        limit : locals.inlineSpriteMaxBytes || 0 ) )
      .render (err, css) ->
        if err
          callback err
        else
          callback null, new Buffer css

Upvotes: 2

Ben
Ben

Reputation: 10146

I think you'll find this grunt plugin to be exactly what you need; grunt image embed. Works for both images and fonts. From the docs:

grunt.initConfig({
  imageEmbed: {
    dist: {
      src: [ "css/styles.css" ],
      dest: "css/output.css",
      options: {
        deleteAfterEncoding : false
      }
    }
  }
});

Upvotes: 0

Yury Matuhin
Yury Matuhin

Reputation: 1

I do not know how it makes no a stylus, but you can use this [1]: http://docs.emmet.io/actions/base64/

Upvotes: 0

Related Questions