postcss-url not generating base64 url

Question

I am building a library which is used as a package in a Next.js app. I have a variable in my .scss file which uses an url('./some-file.png') and I want this to generate a base64 url in order to be used in my other app easily.

When I build the project, after adding postcss-url, the generated url has not changed...there is no base64 url generated.

rollup.config.js:

import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from '@rollup/plugin-typescript'
import postcss from 'rollup-plugin-postcss'
import copy from 'rollup-plugin-copy'
import svgr from '@svgr/rollup'
import dts from 'rollup-plugin-dts'
import del from 'rollup-plugin-delete'
import analyze from 'rollup-plugin-analyzer'
import { terser } from 'rollup-plugin-terser'
import json from '@rollup/plugin-json'
import graphql from '@rollup/plugin-graphql'
import fs from 'fs'
import url from 'postcss-url'
import path from 'path'

import * as packageJson from './package.json'

const tsConfig = JSON.parse(fs.readFileSync(__dirname + '/tsconfig.json', 'utf8'))

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: true
      },
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true
      }
    ],
    plugins: [
      peerDepsExternal(),
      copy({
        targets: [
          {
            src: [
              'src/ui/styles/palette.scss',
              'src/ui/styles/themes.scss',
              'src/ui/styles/urls.scss',
              'src/ui/styles/_exports.module.scss'
            ],
            dest: 'lib/scss'
          },
          { src: 'src/assets/images', dest: 'lib/assets' }
        ],
        verbose: true
      }),
      svgr({ dimensions: false }),
      resolve({ preferBuiltins: true, mainFields: ['browser'] }),
      postcss({
        plugins: [
          url({
            url: "inline"
          }),          
        ],
        extract: path.resolve('lib/styles.scss'),
      
      }),      
      commonjs(),
      json(),
      typescript({ tsconfig: './tsconfig.json' }),
      graphql(),
      terser(),
      analyze({ summaryOnly: true })
    ]
  },
  {
    input: 'lib/types/src/index.d.ts',
    output: [{ file: 'lib/index.d.ts', format: 'esm' }],
    external: [/\.scss$/],
    plugins: [
      dts({
        compilerOptions: {
          baseUrl: '.',
          paths: tsConfig.compilerOptions.paths
        }
      }),
      del({ hook: 'buildEnd', targets: './lib/types' })
    ]
  }
]

button.scss

@import '../../styles/themes.scss';

.background-color-header {
  background: themed('header-background');
}



    

themes.scss

@import './urls.scss';

header-background: url($light-url) no-repeat #{','} $gradient-light-background-header,

and finally : urls.scss

$light-url: '/assets/images/my-image.png';

styles.scss which is the result of the build:

.background-color-header {
  background: url("/assets/images/my-image.png") no-repeat , transparent linear-gradient(180deg, #faf8f4 0%, white 100%) 0% 0% no-repeat    padding-box;
}

So, you can see that the url is not base64 ... Any advice?