avaly / gulp-group-css-media-queries

Gulp wrapper for group-css-media-queries
MIT License
45 stars 8 forks source link

Add sourcemap support #19

Closed codebymikey closed 5 years ago

codebymikey commented 5 years ago

Given that https://github.com/SE7ENSKY/group-css-media-queries is no longer receiving updates.

I would suggest migrating the code into this repo as its fairly simple.

The css-stringify package it uses internally supports passing additional options to enable sourcemap generations.

I believe the change should be as simple as changing the module.exports = (css) -> line to module.exports = (css, opts) -> and passing opts over to the stringifyCss function.

I believe that's the only thing stopping us from adding sourcemap support.

Bug fixes that can be implemented into the repo: https://github.com/n-langle/group-css-media-queries/commit/363f7061255a17ed3c8ff135cfad18a32df8473a https://github.com/axryp/group-css-media-queries/commit/5a654d893fba0f6d85b09143f2a2d03b5dc266b0 https://github.com/Badalik/group-css-media-queries/commit/3283c2c3bf9eb91132436e5a15fad4517a5064a4

edit: https://www.npmjs.com/package/gulp-pleeease supports media query merge with sourcemaps.

avaly commented 5 years ago

I'm not actively using this package any more. But I'm happy to accept PRs and even add a maintainer to this project.

Alecto commented 5 years ago

the same ploblem. this plugin doesnt support gulp-sourcemaps and with it a sourcemap is constructed incorrectly.

avaly, why? This is the most necessary plugin, maybe there are its analogues for gulp?

codebymikey commented 5 years ago

@Alecto I think this plugin has been superseded by css-mqpacker and gulp-postcss, post-css appears to be the future in terms of css manipulation.

This pseudo-code should be enough to get you up and running:

var gulp = require('gulp');
var postcss = require('gulp-postcss');

gulp.task('css', function () {
    var plugins = [
        require('autoprefixer')({browsers: ['last 1 version']}),
        require('cssnano')(),
        require('css-mqpacker')()
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./dest'));
});

@avaly, if this project is no longer being maintained, I think it might be worth adding postcss and css-mqpacker as alternatives in the README.

css-mqpacker currently requires Node 8.x though.

Alecto commented 5 years ago

codebymikey

Thank you very much! you saved me! if I find a csscomb plugin that works with a map, I will be happy.