Resolving links that start with "#" (e.g. url(#abc) )

[MorisR]

Hey,
It's my first time using rollup as a bundler and I'm facing a strange bug when it comes to handling css "url()" values

I'm importing a less file with the following css class in it

.test{
  fill: url("#abc");
}

Expected:
the code snippet to stay the same

Reality:
the following asset file is getting generated

and is being referenced in the output css file, like so

.test {
  fill: url("./index-bd52cf7f.js#abc");
}

This is the rollup config file for reference

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import styles from 'rollup-plugin-styles';
import path from 'path';
import { RollupOptions } from 'rollup';
import pkg from './package.json';

const extensions = ['.ts', '.tsx', '.js', '.jsx', '.json'];

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        dir: pkg.module,
        format: 'es',
        preserveModules: true,
        preserveModulesRoot: path.resolve(__dirname, 'src'),
        esModule: true,
        assetFileNames: '[name][extname]',
      },
    ],
    plugins: [
      peerDepsExternal({
        includeDependencies: true,
      }),
      resolve({
        extensions,
      }),
      commonjs(),
      styles({
        config: true,
        mode: ['extract', 'index.css'],
        less: {
          javascriptEnabled: true,
        },
        autoModules: true,
      }),
      typescript({
        // useTsconfigDeclarationDir: true,
      }),
    ],
  },
] as RollupOptions[];

[diego-antonelli]

I am also having the same issue when my css uses the ID of an SVG

.ant-empty-img-default-path-2 {
  fill: url(#linearGradient-1);
}

Error:

(styles plugin) Error: Unresolved URL `#linearGradient-1` in `fill: url(#linearGradient-1)`