Best solution for import library with js + css

[MeterSoft]

Is solution haw i can pin some library from npm that has js and css files? Ex:

https://ga.jspm.io/npm:flatpickr@4.6.11/dist/esm/index.js
https://ga.jspm.io/npm:flatpickr@4.6.11/dist/flatpickr.min.css

Some libraries have groped file (js + css) like this

https://ga.jspm.io/npm:@fortawesome/fontawesome-free@5.15.4/js/all.js

[dhh]

Import maps are only intended for JS. You'll need to manually download any associated CSS. Or if this is something you use a bunch, then switch to jsbundling-rails.

[rromanchuk]

@MeterSoft i use import maps + cssbundling, if i'm feeling lazy and don't want to vendor them myself i will yarn add flatpickr, (offload versioning to yarn) then @import 'flatpickr/dist/flatpickr'; On deploy, it's just sass running there is no js transpiling.

@import 'highlight.js/scss/github-dark-dimmed';
@import "video.js/dist/video-js";
@import 'bootstrap/scss/bootstrap';

The only frontend

#!/usr/bin/env bash

./node_modules/sass/sass.js \
  ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css \
  ./app/assets/stylesheets/three.sass.scss:./app/assets/builds/three.css \
  --no-source-map \
  --load-path=node_modules \
  $@

Not what you're asking but just FYI, FA actually works fine standalone.

pin '@fortawesome/free-brands-svg-icons', to: '@fortawesome--free-brands-svg-icons.js', preload: true # @6.1.2
pin '@fortawesome/fontawesome-svg-core', to: '@fortawesome--fontawesome-svg-core.js', preload: true # @6.1.2
pin '@fortawesome/free-solid-svg-icons', to: '@fortawesome--free-solid-svg-icons.js', preload: true # @6.1.2

// app/javascript/initialize/fa.js
import { config, library, dom } from '@fortawesome/fontawesome-svg-core'
import { faLinkedin, faStackOverflow, faGithub } from '@fortawesome/free-brands-svg-icons'
import { faKey, faCode, faCirclePlay, faPersonThroughWindow, faFaceSadCry } from '@fortawesome/free-solid-svg-icons'

const fontAwesomeInit = () => {
  config.mutateApproach = 'sync'
  library.add(faLinkedin, faStackOverflow, faGithub, faKey, faCode, faCirclePlay, faPersonThroughWindow, faFaceSadCry)
  dom.watch()
}

export { fontAwesomeInit }

`