search

Anidetrix / rollup-plugin-styles

🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
https://anidetrix.github.io/rollup-plugin-styles
MIT License
243 stars 43 forks source link

PostCSS relative urls for npm installed dependencies not resolving. #132

Closed CxRes closed 3 years ago

CxRes commented 4 years ago

I am including @mdi/fonts (installed from npm) like so:

import '@mdi/font/css/materialdesignicons.css';

This file contains the following @font-face declaration

@font-face {
  font-family: "Material Design Icons";
  src: url("../fonts/materialdesignicons-webfont.eot?v=5.3.45");
  src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=5.3.45") format("embedded-opentype"), url("../fonts/materialdesignicons-webfont.woff2?v=5.3.45") format("woff2"), url("../fonts/materialdesignicons-webfont.woff?v=5.3.45") format("woff"), url("../fonts/materialdesignicons-webfont.ttf?v=5.3.45") format("truetype");
  font-weight: normal;
  font-style: normal;
}

I get the following error when bundling:

Unresolved URL `../fonts/materialdesignicons-webfont.eot?v=5.3.45` in `src: url("../fonts/materialdesignicons-webfont.eot?v=5.3.45")`
Unresolved URL `../fonts/materialdesignicons-webfont.eot?#iefix&v=5.3.45` in `src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=5.3.45") format("embedded-opentype"), url("../fonts/materialdesignicons-webfont.woff2?v=5.3.45") format("woff2"), url("../fonts/materialdesignicons-webfont.woff?v=5.3.45") format("woff"), url("../fonts/materialdesignicons-webfont.ttf?v=5.3.45") format("truetype")`
Unresolved URL `../fonts/materialdesignicons-webfont.woff2?v=5.3.45` in `src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=5.3.45") format("embedded-opentype"), url("../fonts/materialdesignicons-webfont.woff2?v=5.3.45") format("woff2"), url("../fonts/materialdesignicons-webfont.woff?v=5.3.45") format("woff"), url("../fonts/materialdesignicons-webfont.ttf?v=5.3.45") format("truetype")`
Unresolved URL `../fonts/materialdesignicons-webfont.woff?v=5.3.45` in `src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=5.3.45") format("embedded-opentype"), url("../fonts/materialdesignicons-webfont.woff2?v=5.3.45") format("woff2"), url("../fonts/materialdesignicons-webfont.woff?v=5.3.45") format("woff"), url("../fonts/materialdesignicons-webfont.ttf?v=5.3.45") format("truetype")`Unresolved URL `../fonts/materialdesignicons-webfont.ttf?v=5.3.45` in `src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=5.3.45") format("embedded-opentype"), url("../fonts/materialdesignicons-webfont.woff2?v=5.3.45") format("woff2"), url("../fonts/materialdesignicons-webfont.woff?v=5.3.45") format("woff"), url("../fonts/materialdesignicons-webfont.ttf?v=5.3.45") format("truetype")`

Now, I do not get an error for other asset files that I include directly from node_modules in my css. Something like src: url('fontsource-roboto/files/roboto-latin-400-normal.woff2') format('woff2') is bundled just fine.

I presume this is occurring because all relative paths are being resolved from '.' and not /node_modules/@mdi/font.

Anidetrix commented 4 years ago

Hi @CxRes,

Seems like a querystring issue, will fix.