postcss-replace with Gulp v4

[benjclark]

I'm having trouble using your plugin because it is not clear from the docs how it should be used.

Could you simply tell me if I am doing this correctly please? It would be incredibly helpful to me.

css file (input)

.u-text-light{font-weight:100}.u-text-normal{font-weight:400}.u-text-bold{font-weight:700}.u-vh-full{min-height:100vh}
//# sourceMappingURL=main.css.map

gulpfile

const postcss = require('gulp-postcss');
const postcssReplace = require('postcss-replace');

gulp.task('simplified-example-task', () => {
    return gulp.src('*.css')
        .pipe(postcss([postcssReplace({
            data: {value: '/*# sourceMappingURL'},
            pattern: '(?:\\/\\/\\#\\ sourceMappingURL)'
        })]))
        .pipe(postcss([postcssReplace({
            data: {value: '.map */'},
            pattern: '/(?:\\.map)/'
        })]))
        .pipe(gulp.dest('.'));
});

My aim is to convert //# sourceMappingURL=main.css.map to /*# sourceMappingURL=main.css.map */ in any css file passed in to it.

[mzdr]

Hey @benjclark,

thanks for reaching out. I set up a test environment according to your test case. If I run gulp I get the following error:

Unfortunately this error comes from gulp-postcss which I think is because // is not a valid CSS comment. That’s why we get this CssSyntaxError.

If I understood your intentions correctly you are trying to convert invalid CSS comments into valid ones. If that’s the case I’m not sure if our plugin or even PostCSS in general is of any help here. I think you have to pipe your CSS through gulp-replace in order to replace the faulty comments. Maybe you can elimate the faulty generation at all before you need to replace anything?

I hope this helps.

[benjclark]

Hey @mzdr

Firstly, thank you so much for your considered reply. People like you make this community better and I really appreciate you taking the time to test this and offer me help, opposed to saying something like "this isn't a support forum" like so many tend to.

Yes, you summarised my intentions correctly. We've been using gulp-sourcemaps to load existing sourcemaps (sourcemaps generated during scss compilation) during a later file revisioning step in our build. There's a bug in gulp-sourcemaps where, when it creates css files that leverage previously generated sourcemaps, it erroneously adds sourcemaps back in to a file using javascript syntax always. The gulp-sourcemaps team are looking to deprecate the plugin as some of the functionality is now duplicated with Gulp v4. Unfortunately Gulp v4 does not provide a means to leverage previously generated sourcemaps. I have my doubts that they will fix the issue, or if they do, it may not be any time soon. Therefore I decided to try and work around the issue.

Thanks for the info - I'll try gulp-replace. When you say that PostCSS in general won't be of use, is that because PostCSS by design will only ever act upon css that has passed validation?

[mzdr]

Hey @benjclark,

thanks a lot for your kind words. This made my day. I totally see why you tried to work around the issue. In general, as far as I know, PostCSS parses CSS and turns it internally into an AST. If this step fails, because of invalid CSS, the whole process fails and therefore never reaches our plugin at all.

Good look with gulp-replace. I hope this works out for your case. Have a nice day and best regards from Zurich. ✌️