Relative paths are not resolved

[sebj54]

HI,

I'm not sure if this is an issue or a PEBKAC but I can't get any configuration to resolve relative paths in my CSS.

For example, if I use a picture as a background-image, my original code will be:

.test {
    background-image: url(../img/picture.png);
}

With Pleeease, my processed CSS will be:

.test {
    background-image: url(/assets/img/picture.png);
}

With gulp-pleeease, I tried with this code and it doesn't resolve relative paths:

var gulp = require('gulp')
var concat = require('gulp-concat')
var strip = require('gulp-strip-comments')
var compressor = require('gulp-compressor')
var semi = require('gulp-semi').add
var pleeease = require('gulp-pleeease')

gulp.task('default', function() {
gulp.src([
        'assets/bootstrap/css/bootstrap.min.css',
        'assets/helpers/helpers.css',
        'assets/outdated-browser/outdatedbrowser/outdatedbrowser.min.css',
        'system/modules/custom-theme/assets/css/global.css'
        // other CSS files
    ])
        .pipe(concat('all.css'))
        .pipe(pleeease())
        .pipe(gulp.dest('assets'))
})

Am I missing something? Everything is working fine (autoprefixer, etc.) except that. I even tried to remove .pipe(concat('all.css')) but it doesn't change anything.

Thanks for your help!

[danielhusar]

Hey, I haven't used pleeease in very long time, but is pleeease expected to do that by default ? Pleeease is used pragmatically here, so I think it will ignore .pleeeaserc file and you might need to pass options explicitly .

[iamvdo]

I'm also not sure about expected result, but try the rebaseUrls option maybe ?

[sebj54]

Thanks for your help. Here is more detailed test that will help you to see what is the expected result and what I can't achieve with Gulp & Pleeease.

For this example, I created two CSS files (I have to check if concatenation works well), one with a background-image with a relative path.

css/file1.css

.file1-test {
    background-image: url(../img/test.png);
}

css/file2.css

.file2-test {
    display: block;
}

I also created a .pleeeaserc and a gulpfile.js file in order to compare the output results.

.pleeeaserc

{
  "in": ["css/file1.css", "css/file2.css"],
  "out": "all-pleeease.css"
}

gulpfile.js

var gulp = require('gulp')
var concat = require('gulp-concat')
var pleeease = require('gulp-pleeease')

gulp.task('default', function() {
    gulp.src([
        'css/file1.css',
        'css/file2.css'
    ])
        .pipe(concat('all-gulp.css'))
        .pipe(pleeease())
        .pipe(gulp.dest('.'))
})

Running pleeeease compile and gulp commands, here are the results:

all-pleeease.css

.file1-test{background-image:url(img/test.png)}.file2-test{display:block}

all-gulp.css

.file1-test{background-image:url(../img/test.png)}.file2-test{display:block}

We can see relative paths are resolved with Pleeease CLI but not with Gulp. The result is the same with rebaseUrl option set to true.