How to import CSS from dependency ?

clarkwinkelmann

Hello,

I'm building an extension to embed this emoji picker on Flarum.

Everything works fine, but I'm not sure how I should include the CSS from the plugin in my extension.

At the moment, I have this:

$event->addAssets([
    __DIR__.'/js/forum/dist/extension.js',
    __DIR__.'/less/forum/extension.less',
    __DIR__.'/js/forum/node_modules/emojionearea/dist/emojionearea.css', // TODO
]);

extension.less contains my additional CSS to make the plugin fit in the UI.

Of course, if I leave things like this, it will not work when it is installed elsewhere. Unless I push all the npm dependencies with the project, which is certainly not a good idea.

I was thinking of using gulp to copy this specific file somewhere else so I can commit it.

Should the javascript gulp file take care of that ? Should I create another gulp file just for that ?

Also, this file does not feel at home under less/forum either, because that's not a less file ! Is there a naming convention for this kind of "files coming from a dependency" ?

I tried to find another extension with the same use case, but didn't find any. I'm sure this is a common issue...

Do you have a link to an existing extension like that ? How should I do ?

luceos

If I'm not mistaken you could setup your Gulpfile to compile resources from your npm dependencies and save it somewhere in your package directory for inclusion during compilation. As the default Gulpfile leans heavily towards one specific way of working it might be quite complicating to figure out, but not impossible.

Ps my apologies for the late reply, I noticed it before but didn't know what solution would be feasible.

clarkwinkelmann

Thanks luceos

From my perspective it looks like I am the first person to ever try to import a CSS file like that in a Flarum extension... I'm such a pioneer ⛏

My extension is here: Topic / GitHub

I created a css/forum folder with a package.json and Gulpfile.js files. I used a standard Gulp rule to copy the CSS file to css/forum/dist/emojionearea.css. This particular folder is included in version control.

Of course this means that if there is a dependency update, I have to edit both package.json files, run two npm update and two gulp commands. I think that's ok for the moment but that's not optimal.

I hope there will be a clean/official way to do it in the future ?

Wint

clarkwinkelmann Hi, I imported the css file directly to my extension by adding @import (inline) "the-custom-style.css"; to the extension.less file, and it seems work.

clarkwinkelmann

Wint where is that custom file stored ?

The issue I had (and still applies) is that less files are compiled at run time, which forces you to commit the original file as well. Either by copying to a path that is whitelisted, or to whitelist the whole or part of node_modules folder, which is not optimal...

Wint

clarkwinkelmann well, I put it in the same folder with the extension.less file. And there is an issue: After clear the Flarum's cache, this file is not compiled at the first time the page was loaded, and compiled normally from the second time loaded.