CSS/Sass Module :- attr doesn't work inside url

Question

I have a Scss Code like this:

.section-features {
  padding: 20rem 0;
  background-size: cover;
  background-position: center;
  margin-top: 6rem;
  transform: skewY(-5deg);
  &::before {
    content: attr(data-src);
  }
  background-image: url(attr(data-src));
  /* background-image: linear-gradient(
      to right bottom,
      rgba(126, 213, 111, 0.8),
      rgba(40, 180, 133, 0.8)
    ),
    url($default-image-features-section-bg); */
  & > * {
    transform: skewY(5deg);
  }
}

You can see that when I use attr property with content it works as expected. However when I do the same with url property:

.section-features {
  padding: 20rem 0;
  background-size: cover;
  background-position: center;
  margin-top: 6rem;
  transform: skewY(-5deg);
  &::before {
    content: attr(data-src);
  }
  background-image: url(attr(data-src));
  /* background-image: linear-gradient(
      to right bottom,
      rgba(126, 213, 111, 0.8),
      rgba(40, 180, 133, 0.8)
    ),
    url(attr(data-src,$default-image-features-section-bg)); */
  & > * {
    transform: skewY(5deg);
  }
}

It throws me following error:

./components/MainSection/Main.module.scss:4:0
Module not found: Can't resolve './attr(data-src'

Import trace for requested module:
./components/MainSection/Main.module.scss
./components/MainSection/index.tsx
./components/index.tsx
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found

I am using "sass": "^1.53.0" can someone help me sort this out? I am running it as a sass module in NEXT JS.

Even if I tried the same in a normal CSS module it won't work there as well.