No css in npm package?

[brokeboiflex]

Describe the bug WTF there is no styling in npm package

Are you able to reproduce the bug in the demo site No.

To Reproduce Steps to reproduce the behavior:

1. Install NPM package
2. Go to debugger and see there is no styling for any of glightbox components.

Expected behavior Plug and play.

[tacman]

I also noticed this, and hope it can be added.

[gingerchew]

https://www.npmjs.com/package/glightbox?activeTab=code Looking at the package on npm it is there, are you adding the css as a link tag to the head of your page?

[tacman]

When I install flag-icons (https://www.jsdelivr.com/package/npm/flag-icons) my installer (Symfony's AssetManager) automatically installs the js and css files.

But when I install glightbox, only the js is installed. I have some recollection of seeing this in another package, where some key in package.json needed to be set to include the css.

So while it is in the package in the /dist directory, something that could be automatic isn't. Alas, I barely understand packages, but I use them in the most basic way.

[tacman]

There's a files key in the flags package:

https://github.com/lipis/flag-icons/blob/main/package.json#L11C2-L16C5

but perhaps my example isn't very good because flags is primarily css. But other packages do the same, multiple files are "installed" -- in my case, installed means put into a list for importmap to use.

[tacman]

Eventually I got it installed with

req glightbox/dist/css/glightbox.min.css

 [OK] Package "glightbox/dist/css/glightbox.min.css" added to importmap.php.                                            

      Use the new package normally by importing "glightbox/dist/css/glightbox.min.css".                                 

so indeed the css file is in the package. So at least for my application it's now working, it'd be a bonus if I didn't have to do that second installation though.

[tacman]

Maybe the files key is worth adding:

From https://stackoverflow.com/questions/37857149/is-the-files-property-necessary-in-package-json

You can think of the files property in package.json as an allowlist of all files that should be included in a npm release and .npmignore as a denylist of all files that should not be included.

As a rule of thumb, for my own projects I usually use:

files when my project has lots of auxiliary files like build scripts, config files, etc., that do not need to be included in a npm release .npmignore when there are only a few such auxiliary files

[brokeboiflex]

https://www.npmjs.com/package/glightbox?activeTab=code Looking at the package on npm it is there, are you adding the css as a link tag to the head of your page?

I don't think that anybody using npm daily includes content of any package in the head tag. It's heuristic that you install a package, import everything that was in documentation and everything works just fine. Update the docs at least not to confuse anybody else.

[gingerchew]

The documentations clearly shows that you need to include the CSS from the dist/ folder in a link tag.

[benjaminkohl]

For those that run into this issue, I imported the CSS from main.ts. I use Vite if anyone is curious.

import 'glightbox/dist/css/glightbox.min.css'