Ser-Gen / postcss-data-packer

PostCSS plugin to move an embedded data to separate file
MIT License
20 stars 2 forks source link

Allow dest path and map to be functions returning a string #13

Closed cuth closed 8 years ago

cuth commented 8 years ago

Thank you for writing this plugin! It is a very important to move data to a separate file for performance.

Here is my situation. I am running PostCSS with multiple files at a time with Gulp:

gulp.task('css', function () {
    var postcss = require('gulp-postcss');
    var url = require('postcss-url');
    var packer = require('postcss-data-packer');

    var processors = [
        url({
            url: 'inline'
        }),
        packer({
            dataFile: false,
            dest: 'main-data.css'
        })
    ];

    return gulp.src(['build/css/**/*.css', '!main-data.css'])
        .pipe(postcss(processors))
        .pipe(gulp.dest('build/css'));
});

There are two problems with this code. First, every data file is named the same thing, main-data.css, so only the last file processed does not get overwritten. Second, this plugin writes empty files if there is no data in the CSS. I'm running this on the same directory, so the next time this gets called, I overwrite my main-data.css file with nothing.

This pull-request allows you to use functions as values for dest.path and dest.map so that you can dynamically build the filename based on the file being processed. It also prevents any blank files from being created.

Now I'm able to write my gulpfile like this:

gulp.task('css', function () {
    var postcss = require('gulp-postcss');
    var url = require('postcss-url');
    var packer = require('postcss-data-packer');

    var processors = [
        url({
            url: 'inline'
        }),
        packer({
            dataFile: false,
            dest: {
                path: function (opts) {
                    return path.join('build/css', path.basename(opts.from, '.css') + '.data.css');
                }
            }
        })
    ];

    return gulp.src(['build/css/**/*.css', '!**/*.data.css'])
        .pipe(postcss(processors))
        .pipe(gulp.dest('build/css'));
});

Благодарим Вас за это, ура!

Ser-Gen commented 8 years ago

Thank you for making my plugin better! By the way, dest option makes dataFile: false unnecessary.

cuth commented 8 years ago

Awesome, thank you!