@swift-ws/gulp-kit/gulp/tasks/styles.js

A starter kit for automating frontend development using Gulp.js.

import {gulp, sass, gulpAutoprefixer, gulpCleanCss, groupCssMediaQueries, rename} from '../plugins.js';
import {applyReplacements} from '../helpers/applyReplacements.js';

export const compileStyles = async () => {
    const {config} = await import('../config.js');

    let stream = gulp.src([
        config.src + config.tasks.style.patternSource,
        '!' + config.src + config.tasks.style.patternIgnore
    ]).pipe(sass({includePaths: ['node_modules']}).on('error', sass.logError));

    stream = stream.pipe(gulpAutoprefixer());

    stream = stream.pipe(groupCssMediaQueries());

    stream = applyReplacements(config, stream);

    stream = stream.pipe(gulp.dest(config.dest));

    stream = stream.pipe(gulpCleanCss({
        compatibility: {
            selectors: {
                mergeablePseudoClasses: [':root'],
            },
        },
        level: {
            2: {
                restructureRules: true,
            }
        }
    }));

    stream = stream.pipe(rename({suffix: '.min'}));

    return stream.pipe(gulp.dest(config.dest));
};

export const watchStyles = async () => {
    const {config} = await import('../config.js');
    gulp.watch(config.src + config.tasks.style.patternSource, compileStyles);
};