search

brunch / stylus-brunch

Adds Stylus support to Brunch
MIT License
21 stars 2 forks source link

Trying to use Data URI Image Inlining #29

Closed KATT closed 10 years ago

KATT commented 10 years ago

Trying to use Data URI Image Inlining, which enables you to include small images as inline base64 data URIs in the CSS instead of references to the image.

How can I achieve this using stylus-brunch? I know my plugins.stylus.paths-setting is correct ('./app/assets/images') as image-size() works without supplying the full path. Also tried passing all different paths to plugins.stylus.url.paths.

Is it possible to achieve? Want my 4K loading spinner to be seamlessly inlined when I use url().

es128 commented 10 years ago

What happens now? url(...) passes straight through into your compiled CSS? Or it's replaced with an incorrect value?

This is not something I've attempted to use myself. Perhaps you can provide a small test case to play with?

KATT commented 10 years ago

Secondly, I'd like not having to include the relative path of images when using url(). I.e. background-image: url('logo.png'); rather than background-image: url('../images/logo.png');. Is there a way of enabling this behaviour?

KATT commented 10 years ago

@es128, it simply outputs the path as I declared in the url(), as is. I'll make an example, hold on.

KATT commented 10 years ago

Made a repo you can play with @es128

https://github.com/KATT/stylus-brunch-issues-29

Clone and launch brunch w -s as usual to test it.

es128 commented 10 years ago

I've found a solution that appears to work without modifying the plugin. To the top of your brunch config add

stylus = require './node_modules/stylus-brunch/node_modules/stylus'

And add defines to your stylus plugin config:

    stylus:
      defines:
        url: stylus.url()
      paths: [
        './app/assets/images'
      ]

The path could also be passed to the stylus.url() function, but this way appears to work and seems cleaner.

es128 commented 10 years ago

Arguably it would be better to bake an option in to the plugin in the future to enable this more easily than doing that clunky require statement.

KATT commented 10 years ago

Great! Thanks @es128, now it's just the secondary issue that's bothering me :)

es128 commented 10 years ago

@KATT I don't see where the jade docs say they'll do that for you (enter the full path for images >30kb). You may want to open an issue with the jade project to request that as a feature.

KATT commented 10 years ago

Hm, I got that perception by reading the docs about paths, maybe it isn't the case. Closing this issue now. Thanks for the help!