drublic / gulp-css-background-remove

Remove `background-image` from CSS file to load asynchron
MIT License
5 stars 1 forks source link

Appears to remove entire rulesets instead of just the background-image rules #4

Open JacobDB opened 7 years ago

JacobDB commented 7 years ago

This module is working pretty well, but it appears that it's remove an entire ruleset instead of just removing the background-image rules. For example, I have this code:

.swiper-slide {
    background-position: center center;
    background-repeat: no-repeat;;
    background-size: cover;
    flex-grow: 1;
    height: auto;
    margin: 0;
    position: relative;
}

That entire rule is getting removed because of the background-position, background-repeat, and background-size rules. I need the flex-grow, height, margin, and position rules all to remain for my critical CSS.

JacobDB commented 7 years ago

I realize this could be complicated, but it'd be fantastic if you could even parse a combined background rule and remove everything except the color. For example:

.example {
    background: url("../media/some-background.jpg") center center / cover no-repeat #ff0000;
    // or
    background: url("../media/some-background.jpg") center center / cover no-repeat rgb(255,0,0);
    // or
    background: url("../media/some-background.jpg") center center / cover no-repeat red;
    // etc...
}

// becomes 

.example {
    background: #ff0000;
    // or
    background: rgb(255,0,0);
    // or
    background: red;
    // etc...
}