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

Importing with a type attribute of "css" is not supported #3792

Closed
anilkumarum opened this issue Jun 1, 2024 · 7 comments
Closed

Importing with a type attribute of "css" is not supported #3792

anilkumarum opened this issue Jun 1, 2024 · 7 comments
Labels

Comments

@anilkumarum
Copy link

Chrome v126 is removed support for assert keyword and replace by with
I import css file and run in Chrome. cssStyleSheet imported and Chrome don't throw any error

import styleCss from "./style.css" with { type: "css" };

When I try to build

esbuild style.js --bundle --minify --target=chrome123 --outfile=build/style.js --format=esm

esbuild throw error

✘ [ERROR] Importing with a type attribute of "css" is not supported

    style.js:1:48:
      1 │ import styleCss from "./style.css" with { type: "css" };

When i use with keyword to import json. esbuild import json file and doesn't throw any error.
Please fix this issue ASAP
Thanks for your efforts

@evanw
Copy link
Owner

evanw commented Jun 1, 2024

This is happening because esbuild doesn't currently implement bundling CSS imports that use the type: css import attribute (see #3384).

Did you mean to use --external:*.css to tell esbuild to not bundle these files?

@anilkumarum
Copy link
Author

when i use assert keyword to import css, --loader:.css=copy work perfectly

esbuild style.js --bundle --minify --target=chrome123 --outfile=build/style.js --format=esm --loader:.css=copy

with is just replacement of assert for iimport css files
I expect --loader:.css=copy should work.

I also use --external:*.css but esbuild throw same error

Importing with a type attribute of "css" is not supported

    style.js:1:48:
       import styleCss from "./style.css" with { type: "css" };

please add support for with keyword same as assert

@evanw
Copy link
Owner

evanw commented Jun 4, 2024

Ah ok, so this is perhaps a request for with to work with the copy loader. That makes sense.

@evanw evanw added the css label Jun 4, 2024
@mangelozzi
Copy link

I have this problem too, I used to use assert { type: "css" } but now the syntax has been deprecated for with { type: "css" }. Maybe in addition to the --supported:import-assertions=true ther should be a --supported:import-with=true flag?

@evanw
Copy link
Owner

evanw commented Jun 7, 2024

The name is import-attributes not import-with because the syntax is called import attributes. You can find the full list of feature names that can be used with --supported in esbuild's documentation: https://esbuild.github.io/api/#supported

However, enabling support for the with syntax doesn't do anything in this case. The problem is that bundling isn't supported yet, not that the syntax isn't supported.

@mangelozzi
Copy link

The name is import-attributes not import-with because the syntax is called import attributes. You can find the full list of feature names that can be used with --supported in esbuild's documentation: https://esbuild.github.io/api/#supported

However, enabling support for the with syntax doesn't do anything in this case. The problem is that bundling isn't supported yet, not that the syntax isn't supported.

Thanks for the clarification. Please would you verify I am understanding you correctly, bundling is currently supported for assert by using --supported:import-assertions=true, and in the future (not ready yet) bundling will be supported for with by using --supported:import-attributes=true ?

I am super excited and waiting for cause this cause I was forced to move to with, but now my build step is no longer working correctly. Cheers!

@evanw
Copy link
Owner

evanw commented Jun 7, 2024

Thanks for the clarification. Please would you verify I am understanding you correctly, bundling is currently supported for assert by using --supported:import-assertions=true, and in the future (not ready yet) bundling will be supported for with by using --supported:import-attributes=true ?

Yes, that's correct. The reason assert "just works" with esbuild but with doesn't is because with can affect path resolution while assert can't (you can read more about that here). So the bundler basically ignore assert as it is mostly meaningless, but it can't ignore with.

@evanw evanw closed this as completed in db1b8ca Jun 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants