postcss / postcss-url

PostCSS plugin to rebase url(), inline or copy asset.
MIT License
377 stars 59 forks source link

Filter regex (default maxSize not working) [docs] #118

Closed armpogart closed 6 years ago

armpogart commented 6 years ago

Hello and thanks for this great plugin. Unfortunately I have a problem with it, I'm using it to inline assets in css with following config:

filter: /^.*\.(svg|png)$/,
url: 'inline',

So that I'm inlining only svg and png assets with default maxSize settings which following documentation is 14kb. Strangely it also inlines bootstrap font icon for example url("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") which is 107KB on disk and outputs following warning during the process:

Image type is svg and link contains #. Postcss-url cant handle svg fragments. SVG file fully inlined. PATH\gulp-test\src\fonts\bootstrap\glyphicons-halflings-regular.svg

Any way I can ignore all the fonts? I was actually trying to ignore all the assets from fonts folder, but couldn't as JS doesn't support negative lookbehind in regex, so I though it will naturally ignore them as they're more than maxSize.

sergcen commented 6 years ago

Hi @armpogart This is documentation problem. Try to set maxSize manually. And you can use function in filter which accepts asset object.

{ 
  filter: (asset) => {
    // or some other code
    return /^.*\.(svg|png)$/.test(asset.relativePath)
  },
  url: 'inline',
}

I'll update the documentation. Thanks for feedback :)

armpogart commented 6 years ago

Ok, I see, thanks, will update the title to point the issue more correctly for your future reference.

sergcen commented 6 years ago

https://github.com/postcss/postcss-url/commit/c92a07611fc65b62eb1a5df6f87befbd4f270572