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

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 the generated asset

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[];

Anidetrix / rollup-plugin-styles

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