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

[Bug]: dist CSS is not mapped in package.json #771

Closed
Jean85 opened this issue Sep 2, 2024 · 4 comments
Closed

[Bug]: dist CSS is not mapped in package.json #771

Jean85 opened this issue Sep 2, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@Jean85
Copy link

Jean85 commented Sep 2, 2024

Bug description

I'm trying to use this package with the Symfony Asset Mapper, which leverages ESM loading to avoid Node/npm as a requirement. This seems to work well with your package, except for the fact that the CSS dist file is not mapped in the package.json, so ESM does not see that.

Expected behavior

CSS is included in the package, so that CDNs like jsDelivr will consider it and add to the needed files.

Steps to reproduce

  1. Go to jsDelivr
  2. Click on ESM mode button
  3. See that only the JS file is imported:
<script type="module"> 
    import tomSelect from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
</script>

Additional context

The Symfony docs refer to the package.json configuration file as a way to fix this; we probably need to add keys like sass or style to the root of the package.json, like Bootstrap does: https://github.com/twbs/bootstrap/blob/e3e00b5002139adb0d5dadd6002e15b7b6cd371f/package.json#L40

@Jean85 Jean85 added the bug Something isn't working label Sep 2, 2024
@nwalters512
Copy link
Contributor

I'm not understanding the relationship between jsDelivr and Symphony Asset Mapper. Can you explain more?

You cite Bootstrap as an example of something that's working correctly. However, the ESM "type" on jsDeliver (https://www.jsdelivr.com/package/npm/bootstrap) also doesn't include any CSS:

Screenshot 2024-11-18 at 14 05 45

I'm happy to add a "style" property to package.json if you think that'll fix things.

@Jean85
Copy link
Author

Jean85 commented Nov 19, 2024

The Symfony Asset Mapper uses jsDelivr to download precompiled ESM assets, hence avoiding the need for NodeJS locally.

For Bootstrap, there's no explicit CSS import, but I can add it manually into the Symfony Asset Manager configuration, importing dist/css/bootstrap.min.css, which is present inside the compiled package. For your package, you have the SCSS inside src/scss, but since it's not exposed in the package.json, is not compiled by jsDelivr.

As of now, I'm using your package without CSS, but if I would want to add it, I would need it; I don't know how to handle the different versions though...

@nwalters512
Copy link
Contributor

If manually adding a path is an option, have you tried that with tom-select? They're all available on jsDelivr, there's no need for jsDelivr to "compile" them on its own: https://www.jsdelivr.com/package/npm/tom-select?path=dist%2Fcss&tab=files

@nwalters512
Copy link
Contributor

nwalters512 commented Nov 21, 2024

Given that we added a style property to package.json in #810 as requested above, I'm going to close this issue. Feel free to comment if something is still not working quite right!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants