Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
taozhou-glean opened this issue Aug 6, 2024 · 3 comments
Open
2 tasks done
Labels
needs reproduction This issue does not yet have a reproduction webpack Issue related to webpack

Comments

@taozhou-glean
Copy link

taozhou-glean commented Aug 6, 2024

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
Copy link
Author

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
          },
        },
      ],
    },

@taozhou-glean taozhou-glean changed the title url() not working with webpack plugin can we disable url() resolving in vanilla-extract-webpack plugin ? Aug 6, 2024
@askoufis
Copy link
Contributor

askoufis commented Aug 17, 2024

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.

@askoufis askoufis added question Further information is requested needs reproduction This issue does not yet have a reproduction webpack Issue related to webpack and removed pending triage question Further information is requested labels Aug 17, 2024
@taozhou-glean
Copy link
Author

oh i wonder if its because we are using relative path and it tries to resolve that compared to full absolute path 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs reproduction This issue does not yet have a reproduction webpack Issue related to webpack
Projects
None yet
Development

No branches or pull requests

2 participants