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

What is the recommended way to import css bundled in js libraries #80

Closed
jean-francois-labbe opened this issue Dec 3, 2021 · 9 comments

Comments

@jean-francois-labbe
Copy link

When trying to use glide.js with importmap.
Glide.js provides a js and a css file.

importmap-rails provides a way to vendor the js.

➜ bin/importmap pin @glidejs/glide --download
Pinning "@glidejs/glide" to vendor/javascript/@glidejs/glide.js via download from https://ga.jspm.io/npm:@glidejs/glide@3.5.2/dist/glide.esm.js

We don't know what is the best way to include the css.
We found a way to include the css by using the package.json.
The problem is that the glide.js dependency version is in 2 places that must be kept in sync.

Downloading vendor files from the JavaScript CDN
package.json

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@glidejs/glide": "^3.5.2",
  }
}

I'm wondering if it could be useful to automatically/optionnaly vendor the css when downloading the js ?

bin/importmap pin @glidejs/glide --download --download-css
@dhh
Copy link
Member

dhh commented Dec 3, 2021

Yeah, you'll have to do this by hand. We don't have an API that could figure out what assets might be needed in addition to the main JS file. There may well be more than one. There may well be images. I don't see a path of us programmatically figuring this out.

@dhh dhh closed this as completed Dec 3, 2021
@buncis
Copy link

buncis commented May 17, 2023

to do it manually meaning is to do these steps

  1. download the css file manually
  2. put it on your vendor directory
  3. then require the file to your app/assets/stylesheets/application.css

@dacook
Copy link

dacook commented May 18, 2023

It seems really weird to me that the importmap solution doesn't cover css. It's like it only does half the job and leaves you to wonder about the rest (a google search shows lots of people scratching their heads and generally reverting to bundling).

When trying to migrate to import maps, the first thing I expected to see is extra options like this:

pin "tom-select", to: "https://ga.jspm.io/npm:tom-select@2.2.2", preload: true,
  javascript: "/dist/js/tom-select.complete.js",
  css: "/dist/css/tom-select.css"

(but I probably haven't figured out how this all works yet)

@jclusso
Copy link

jclusso commented May 21, 2023

@dacook ironically running into the same exact thing. what did you settle on?

@dacook
Copy link

dacook commented May 23, 2023

I wasn't able to find a solution, so for the interim I've just been using HTML tags directly in a partial:

<!-- Load tom-select from CDN -->
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.min.css" rel="stylesheet">

To me, this seems superior because the package config is all in one place (name, version and entry point).

@buncis
Copy link

buncis commented May 23, 2023

did you render the partial on <head> or <body>?

@dacook
Copy link

dacook commented May 23, 2023

I'm rendering it at the foot of <body>, although it could/should probably be placed elsewhere.
This partial is rendered on all pages in my application (which is ok because it's used on most).

@buncis

This comment was marked as outdated.

@dacook

This comment was marked as resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants