[4.0] Fix the vendor css for the template

[dgrammatiko]

Pull Request for Issue # .

Joomla has a very well established pattern for overridding CSS and JS assets. You place the override file in the template specific folder and magic happens.

For some reason, instead of promoting modularity and the core functionality we end up making the css of the template a huge garbage bin, where anyone can append some css.

This should stop as the produced css is not maintainable and is spaggetti code that nobody could figure out where could be the source of a bug (cascading is already hard let's not make it even harder). Not to mention that performance also has a negative impact but that's minor in this case...

Summary of Changes

All the files that are loaded through an HTMLHelper should NOT be overridden with code internally to the template. This PR reverts it for the following external resources (vendor folder):

• awesomplete
• choicesjs
• font awesome
• minicolors
• joomla-alert
• joomla-tab

Testing Instructions

Check if anything is broken in the backend
(it shouldn't be as I'm still importing the original css, I know but then this PR is becoming a major refactor...)

Expected result

Actual result

Documentation Changes Required

PS there should be some QA for the scss of the template, the code is nowhere near beta state, just saying

[ghost]

Please resolve conflicting files so this PR can get tested at Worldwide Pizza, Bugs & Fun, October 19th

[Quy]

FontAwesome icons don't appear.

[dgrammatiko]

@Quy do you have the css file administrator/templates/atum/css/vendor/fontawesome-free/fontawesome.min.css ? If so do you also get the actual font?

[Quy]

Installed your branch. There is no vendor directory.

[C-Lodder]

@Quy Did you run npm i?

[Quy]

Yes, both npm i and npm ci. Still no go.

[dgrammatiko]

@Quy what's your OS?

[Quy]

Testing locally with XAMPP on Windows 10 Home.

[dgrammatiko]

@Quy thanks, I'll check why the build tools are failing to generate the css for winDOS

[dgrammatiko]

@Quy can you give it another try?

[Quy]

Almost there. Here are a few more that don't appear.

[dgrammatiko]

@Quy thank you, should fine now

[Quy]

They show up but don't display properly.

[dgrammatiko]

There are still two instances of choices.css loaded.

I know! The problem is that the original is loaded with webAssets, that for some reason doesn't pick up the override. If I try to override the css then the JS ends up not loading. I think @Fedik already has a PR that gives more granular access but till that PR is merged the original (from media) css file is also loaded here.

[Fedik]

well, it sounds like it better to allow to override vendor files in "old way" also, for j4
I try to update that PR some time later, or I will do another one, will see

[dgrammatiko]

@wilsonge is there any interest on this one or should I move on?

[SharkyKZ]

I have tested this item ✅ successfully on ab05717

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/26077.}

[Quy]

I have tested this item ✅ successfully on ab05717

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/26077.}

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/26077.}

[wilsonge]

Thanks!

[infograf768]

@dgrammatiko
Looks like atum specific choice.css is not loaded in com_associations.

[dgrammatiko]

@infograf768 are the tags ok in that page?

[infograf768]

Same.

[dgrammatiko]

@infograf768 in the atum/component.php
add
after line 17

$wa    = $this->getWebAssetManager();

and after line 30

// Enable assets
$wa->enableAsset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'));
$wa->enableAsset('fontawesome-free');

// TODO: remove the following line whenever the assets are fixed to respect the ovverides
HTMLHelper::_('stylesheet', 'vendor/choicesjs/choices.css', array('version' => 'auto', 'relative' => true));

On a more serious note the assets for the iframes need some attention (eg the component.php needs to reflect the index.php)

[dgrammatiko]

@infograf768 check #27187

[Fedik]

$wa->enableAsset('fontawesome-free');

all you need:

$wa->enableAsset('fontawesome-free')->enableAsset('choices');

[dgrammatiko]

@Fedik this didn't work as it expects me to override both the css and the javascript. I wanted only the css from the choices to be overriden