Class prefix and variable option

[dhenriet]

Is it possible to add a variable option and a class prefix like this plugin https://github.com/ceee/grunt-datauri ? Sometimes we don't need to get all the getCss of https://github.com/heldr/datauri, just want to have its content. In my case I made a sass function to replace compass inline-image helper and need a class prefix and a variable option.

//== _mixins.scss
@function inline-image($name) {
    @return url('#{$name}');
}

I need to generate a _datauri.scss,

//== _datauri.scss
$data-bg_pre_2: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";
$data-bg_pre_3: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";

import it in the main.scss and use the datauri like that :

//== main.scss
@import 'mixins, datauri';

.bg-pre-3 {
    background: #fff 50% 0 inline-image($data-bg_pre_3) no-repeat fixed;
}

This actually works nice with a modification in gulp-image-data-uri index.js

//== gulpfile.js
gulp.task('datauri', function() {
    gulp.src([paths.styles.img +'/bg/bg_pre_2.jpg', paths.styles.img +'/bg/bg_pre_3.jpg'])
        .pipe(imageDataURI())
        .pipe(concat('_datauri.scss'))
        .pipe(gulp.dest(paths.styles.src +'/base/'));
});

//== gulp-image-data-uri index.js

file.contents = new Buffer('$data-'+ className + ': "'+ dataURI.content +'";');
//file.contents = new Buffer(dataURI.getCss(className));

[adam-lynch]

Sorry for taking so long on this, I've been crazy busy. I think you've solved your problem already?

I'm thinking about how this should be done anyway (if I was to do it). Maybe I'd have one function to gather the info and others to output it. Like:

gulp.task('datauri', function() {
    gulp.src([paths.styles.img +'/bg/bg_pre_2.jpg', paths.styles.img +'/bg/bg_pre_3.jpg'])
        .pipe(imageDataURI())
        .pipe(imageDataURI.toVariables({'_datauri.scss'})
        .pipe(gulp.dest(paths.styles.src +'/base/'));
});

You could then technically use toVariables and the default way (let's say toClasses()) as many times as you want with different options if you'd like.

I think there aren't enough gulp plugins to do with variables in general though. It would be cool if some plugins (for example this plugin or a plugin for extracting variables from a SASS file, etc) added a file.data.cssVariables object or something. Then there could be other plugins which manipulate these and or generate files from them. Another use case I have for this is where I'd like to know some of my LESS variables in my CoffeeScript, especially transition durations.

Just thinking out loud here :smile:.