rollup-plugin-styles icon indicating copy to clipboard operation
rollup-plugin-styles copied to clipboard

Bug: Plugin hangs indefinitely on "protocol-relative URLs" (url("//example.com/...")) in CSS on Windows

Open theArina opened this issue 1 year ago • 1 comments

This issue appears only on Windows, likely due to the way the plugin //example.com/... as a local file path instead of an external resource. The plugin then tries to resolve and read the URL as if it were a file, causing Rollup to freeze indefinitely.

🛠 Steps to Reproduce: Add the following to a CSS file:

@font-face {
    font-family: 'Open Sans';
    src: url("//example.com/fonts/open-sans.woff") format("woff");
}

Use rollup-plugin-styles in rollup.config.js:

import styles from 'rollup-plugin-styles'; // 4.0.0

export default {
  input: 'index.js',
  output: { file: 'dist/bundle.js', format: 'es' },
  plugins: [styles()]
};

package.json

...
"scripts": {
  "dev": "rollup -c"
}

✅ Expected Behavior: The plugin should not attempt to resolve //example.com/... as a local file. It should leave the URL unchanged in CSS.

As far as I debugged this, it happens here: https://github.com/Anidetrix/rollup-plugin-styles/blob/ca9879deca6de34da52a1f90cd25fc52d77f1985/src/loaders/index.ts#L66 when a name equals to postcss. You may just set a breakpoint at that exact line and see for yourself. After this it will just hang indefinitely.

theArina avatar Feb 07 '25 18:02 theArina

Alright, I figured out a simple fix but I'm not sure how to contribute. So, basically you just need to handle these urls the same way as any other web url, so in here https://github.com/Anidetrix/rollup-plugin-styles/blob/main/src/loaders/postcss/url/index.ts#L113 as well as in here https://github.com/Anidetrix/rollup-plugin-styles/blob/main/src/loaders/postcss/import/index.ts#L100 you may add this to the previous lines:

  // Skip protocol-relative Web URLs
  if (/^\/\//.test(url)) {
    return;
  }

theArina avatar Feb 19 '25 17:02 theArina