[#32457] - [4.0] Cassiopeia fails to compile SCSS, other questionable sources
- Closed
- 20 Feb 2021
- Medium
- Build: staging
- # 32457
What needs to be fixed
Minicolors
I'm using own SCSS compile plugin and the [re]compilation for Cassiopeia (This also apply to Atum admin template) fails because the template.scss file attempts to import a file that cannot be found:
@import "../../../build/media_source/system/scss/jquery-minicolors";This part in particular is interesting since we already have a cassiopeia/scss/vendor/_minicolors.scss which is not imported anywhere.
Another issue
There are a series of SCSS sources imported into the files of the cassiopeia/scss/ folder that do not exist anywhere inside the entire JOOMLA, take for instance:
// cassiopeia/scss/vendor/fontawesome-free/fontawesome.scss
@import "../../../../../build/media_source/system/scss/icomoon";// cassiopeia/scss/vendor/choicesjs/choices.scss
@import "../../../../../node_modules/choices.js/src/styles/choices";This case is strange because node_modules again doesn't exist inside the Joomla folders.
// cassiopeia/scss/vendor/joomla-custom-elements/joomla-alert.scss
@import "../../../../../node_modules/joomla-ui-custom-elements/dist/css/joomla-alert";... and other similar cases.
Why this should be fixed
Blocks user customization because (probably internally too), third party SCSS compilers fail to compile.
How would you fix it
Minicolors issue
Replacing the above with this line in both cassiopeia/scss/template.scss and atum/scss/temlate.scss and their RTL variations seems to solve the problem.
@import "../../../media/system/scss/jquery-minicolors";The other issue
I would suggest double checking the assets and make sure the SCSS sources are "developer friendly".
Side Effects expected
Templates are impossible to customize.
joomla-cms-bot
- | Labels |
Added:
?
|
||
Maybe @dgrammatiko can have a look on this issue and check if there is something wrong or missing?
Maybe @dgrammatiko can have a look on this issue and check if there is something wrong or missing?
We need to move the scss files to media (eg what the child templates are doing) but even then I think we have different directory depths (the media_source is one directory deeper than the media and this is some inconsistency introduced because some production members didn;t want the media_source in the root). Good times...
@dgrammatiko please let me know if you need any help, I'm here to help.
On another note regarding SCSS, I've put the compile via JS to rest, probably for good, without Node.js and stuff like rollup/gulp there's nothing to work, not even your own example, you just can't write .css files or any time soon via JavaScript, thanks to the "super heavy duty security" implemented in Chromium by default. Maybe we have any way to interact with Node.js via Joomla administration, but that's probably day dreaming.
Also, for minicolors, isn't there any jQuery free alternative? Why would we load jQuery just for that?
Cheers.
without Node.js there's nothing to work, not even your own example, you just can't write .css files or any time soon via JavaScript
That's not true, there are few implementations out there that disagree with this comment: https://www.sassmeister.com
That's Node.js powered app man. Can you hook into that in any way?
I can setup a Node.js based compile anytime, but most users won't use it since it requires some "special" knowledge, but I will deliver this option to my users as well. I can also provide a plugin ScssPhp based solution, which they can uninstall on the production server once they complete development/customization work.
@dgrammatiko that is nice and dandy, can we hook into that in Joomla?
I can also provide a plugin ScssPhp based solution
Please don't, PHP Scss is totally crap, it doesn't support many parts of the language and also since you can't plugin things like autoprefix it shouldn't even consider a toy. Just don't. Front end REQUIRES nodejs these days. If you don't wanna go this way provide a wasm tool
@dgrammatiko that is nice and dandy, can we hook into that in Joomla?
It was declined
Unfortunately Joomla doesn't offer me much, I have no other way. Too bad it was declined. I don't know how to code a wasm and have no idea if it can help with customization work on the USER side of things. I don't even know how this wasm works tbh.
@dgrammatiko will your child-theme feature support wasm?
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-02-20 11:45:16 |
| Closed_By | ⇒ | thednp |
As you can see all those files do exist
https://github.com/joomla/joomla-cms/tree/4.0-dev/build/media_source/system/scss
But only in the git repo and not in the distributed package. (You even edited one yourself in a pr) ;)
The problem as you correctly point out is that they are not in the release package.
(Only explaining what is happening not commenting on the build system)