vanilla-extract-css / vanilla-extract

Zero-runtime Stylesheets-in-TypeScript
https://vanilla-extract.style
MIT License
9.5k stars 287 forks source link

can we disable `url()` resolving in vanilla-extract-webpack plugin ? #1456

Open taozhou-glean opened 1 month ago

taozhou-glean commented 1 month ago

Describe the bug

Can't resolve '/images/some-image.svg' in 'node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.11_@types+node@20.14.13_babel-plugin-macros@3.1.0_less@4.2.0_webpack@5.93.0/node_modules/@vanilla-extract/webpack-plugin'

Reproduction

we serve all our image assets in a public CDN, so the path set in the url is not the relative path to resolve the image file locally, and we don't want them to be resolved, but instead, just use the raw value, so would be nice if we have the option just like css-loader to disable the url resolving

System Info

command not working
macos - vanilla-extract webpack plugin 2.3.11

Used Package Manager

pnpm

Logs

No response

Validations

taozhou-glean commented 1 month ago

we already have url:false BTW

 {
      test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: require.resolve('css-loader'),
          options: {
            url: false, // Required as image imports should be handled via JS/TS import statements
          },
        },
      ],
    },
askoufis commented 3 weeks ago

Vanilla Extract doesn't perform any URL resolution. That's entirely up to your bundler configuration. In a test repo, I've set url: false on css-loader, and the following style works as expected:

export const urlTest = style({
  backgroundImage:
    'url(https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&w=800)',
  width: '800px',
  height: '800px',
});

If you could provide a minimal reproduction, that would help narrow down the issue.