bleemis42 / parcel-plugin-css-url-loader

A plugin for parcel to convert css/less/scss images url into base64.

parcel-plugin-css-url-loader

A plugin for parcel to convert css/less/scss url into base64

Install

yarn add parcel-plugin-css-url-loader --dev # or
npm install parcel-plugin-css-url-loader --save-dev

Usage

// .parcelrc
{
  "css-url-loader": {
    "exts": ["png", "svg", "jpg", "gif"],
    "limit": 1000    //kb
  }
}

parcel-plugin-css-url-loader's Issues

Checking and removing query params and URL hash (#)

Hey!
I used this plugin and it works well. But I have a little bug with it.

I used the service IcoMoon for creating a font icon. And IcoMoon automatically created me a file with CSS and fonts. This file looks like:

@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.woff?en5820') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

I set up plugin .parcelrc

{
  "css-url-loader": {
    "exts": ["woff"],
    "limit": 10000
  }
}

The plugin works well and return me a base64 with correctly meme type

@font-face {
    font-family: icons;
    src: url(data:font/woff;base64,d09GR ... AAA?en5820) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display:block
}

But in the end, keeps the query parameters ?en5820 and as a result I have invalid base64.

I removed query param in the source and the plugin builds valid base64.

I guess it will be useful added checking and removing query params and URL hash too.

If you let me I can fix it.

I will be grateful for any answer.
Thanks!

Doesn't work with @import in less files

I'm using UIKit and I need a url loader that will bring in the SVG the node_module refers to. Unfortunately this doesn't work with import.