Extract "above the fold" styles

Install

npm i gulp-above-the-fold --save-dev

Basic Usage

Extract content, that is wrapped between two CSS-Comments into a different file that's named [filename].above-the-fold.css. The new file will be pushed to the stream, where it can be edited and modified by possible further gulp tasks

Here's an example on how to setup the gulp task:

'use strict';

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    extract = require('gulp-above-the-fold');

gulp.task('sass', function () {
  return gulp.src('./scss/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(extract())
    .pipe(gulp.dest('./css'));
});

Example

Input

Filename: Styles.css

/* ###ABOVE_THE_FOLD_START### */
.btn {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: .5em 2em;
}
/* ###ABOVE_THE_FOLD_END### */

.btn {
    position: relative;
    transition: all 0.2s ease-out;
}

.btn:hover,
.btn:focus {
    background: #fff;
    color: #000;
}

.btn:active {
    animation: jump-around 0.5s linear 0s infinite;
}

Output

Filename: Styles.above-the-fold.css

.btn {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: .5em 2em;
}

Filename: Styles.css

.btn {
    position: relative;
    transition: all 0.2s ease-out;
}

.btn:hover,
.btn:focus {
    background: #fff;
    color: #000;
}

.btn:active {
    animation: jump-around 0.5s linear 0s infinite;
}

Tip

To make it easier to enclose your styles within the comments, you can use a Scss mixin like in the following example

@mixin above-the-fold() {
    @at-root {
        /* ###ABOVE_THE_FOLD_START### */
        @if & {
            & {
                @content;
            }
        } @else {
            @content;
        }
        /* ###ABOVE_THE_FOLD_END### */
    }
}

.btn {
    @include above-the-fold() {
        display: inline-block;
        background: #000;
        color: #fff;
        padding: .5em 2em;
    }
    
    position: relative;
    transition: all 0.2s ease-out;
    
    &:hover,
    &:focus {
        background: #fff;
        color: #000;
    }
    
    &:active {
        animation: jump-around 0.5s linear 0s infinite;
    }
}

Any questions or improvements?

Write us an email.