parcel-optimizer-css-url

🌀 Parcel 2 plugin that allows you to use a custom url CSS function to prevent Parcel to process relative-path images in CSS/Stylus files.

Installation

# Installs the plugin and saves it as a development dependency
npm i parcel-optimizer-css-url -D

Configuration

Create a .parcelrc configuration file and add the plugin to optimizers like this:

{
    "extends": "@parcel/config-default",
    "optimizers": {
        "*.css": ["parcel-optimizer-css-url"]
    }
}

Usage

Sometimes, some of our images are not available at build time or we simply don't want Parcel to process them, specifically using the CSS url function in styles files.

.my-background {
    background: url('../public/images/my-asset.jpg') no-repeat;
}

To prevent Parcel resolving this image just replace url directive to _url.

CSS

.my-background {
    background: _url('../public/images/my-asset.jpg') no-repeat;
}

Stylus

.my-background
    background _url('../public/images/my-asset.jpg') no-repeat