?
avatar thednp
thednp
14 Oct 2020

Problem identified

I've looked into the default J4 template Cassiopeia and I didn't find any options to change colors or anything regarding styling, instead I found some SCSS files to push customized style and variables into Bootstrap.

I don't think this is the right approach to end-user "ease to use" promise.

Open questions

  • What/how is the SCSS compiled in Joomla 4? Is it php/js?
  • How can we push custom SCSS variables, mixins or styling from template style administration panel?
  • Is this a temporary/permanent state or an "under development" feature? (to be fair, it doesn't make sense to have color picker form field if we don't actually use it)
avatar thednp thednp - open - 14 Oct 2020
avatar joomla-cms-bot joomla-cms-bot - change - 14 Oct 2020
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 14 Oct 2020
avatar thednp thednp - change - 14 Oct 2020
The description was changed
avatar thednp thednp - edited - 14 Oct 2020
avatar ReLater
ReLater - comment - 14 Oct 2020

What/how is the SCSS compiled in Joomla 4? Is it php/js?

I´t's compiled during the build process of an installable Joomla 4 package. It's JS using npm/node.

See the /buid/ directory. For example https://github.com/joomla/joomla-cms/blob/4.0-dev/build/build-modules-js/compilecss.es6.js

How can we push custom SCSS variables, mixins or styling from template style administration panel?

No way to do that with an installed core package. There is no on-the-fly SCSS compilation from Joomla core.

Is this a temporary/permanent state or an "under development" feature?

It's the current state ;-)

(to be fair, it doesn't make sense to have color picker form field if we don't actually use it)

It makes sense if the selected colors are inserted as CSS.

At the moment I'm testing the Astroid framework. It's available already for Joomla 4: https://github.com/joomdev/astroid-framework

It comes with a PHP SCCS compiler. Maybe that's something for you?

avatar thednp
thednp - comment - 14 Oct 2020

Yes and no. We need something that works with Joomla code and consistent with its features, correct? Why should I use a framework?

avatar Bakual
Bakual - comment - 15 Oct 2020

I've asked in the maintainer chat. The files are there for people who want to make an own template based on Cassiopeia or Atum. This way they can work from the SCSS files if they want.
Obviously, they need to have their own tooling for compiling their own custom template then. Chances are high that people dealing with SCSS files already have that tooling anyway.

avatar SharkyKZ
SharkyKZ - comment - 15 Oct 2020

That doesn't work because some SCSS files are missing.

avatar Bakual
Bakual - comment - 15 Oct 2020

Which ones are missing?
Just found, you mean the ones in the build folder I guess. That looks wrong indeed.

avatar SharkyKZ
SharkyKZ - comment - 15 Oct 2020

Any SCSS in build/media_source. I guess we can just copy them to to media directory when compiling CSS.

avatar Bakual
Bakual - comment - 15 Oct 2020

Can you do a PR for that? Sounds like a plan to me 👍

avatar thednp
thednp - comment - 15 Oct 2020

@ReLater how do you secure your ScssPhp files? they need to be secured right?

Later edit: you don't do any die on any of the ScssPhp files, how do you secure these files? Also why don't you use JLoader::registerNamespace? Isn't that a safer bet?

avatar SharkyKZ
SharkyKZ - comment - 15 Oct 2020

@Bakual Nevermind, that won't work. References to these files would need to be updated in any existing files. That's too much trouble for users. Instead, without overcomplicating things, SCSS could be moved to media folder and stay there for good.

@thednp scssphp is not a good way of compiling SCSS files. I don't think there's a good way to do in PHP alone. Most people use JS for this.

avatar thednp
thednp - comment - 15 Oct 2020

@SharkyKZ I have another idea: how about we make use of the WebAssetManager to push template user defined colors and other settings into SCSS compiler?

I now understand ScssPhp is not the safest way to get this done.

avatar dgrammatiko
dgrammatiko - comment - 15 Oct 2020

@thednp Long, long time ago I did an RFC for utilising web assembly for the scss to css compilation ( https://github.com/dgrammatiko/scss-wasm-compile ). Most people weren't in favour so I left it there. You're welcome to re try...

Edit: PHP has no trustworthy tooling for CSS, JS, SASS or anything meaningful for the front end devs. These are all Javascript land tools

avatar thednp
thednp - comment - 15 Oct 2020

@dgrammatiko whatever it is, we have to have the most secure tools for our end-users to customize stuff, I'm in if you need a hand in the development and or testing stuff.

avatar ReLater
ReLater - comment - 16 Oct 2020

@thednp
Sorry, I don't understand this question:

how do you secure your ScssPhp files? they need to be secured right?

I'm using my own tools (node, PHP, Prepros), just sometimes https://extensions.joomla.org/extension/scss-compiler/ , and set up my SCSS directories on my own from scratch.

The mentioned framework is not mine but I saw how bad and confusing the idea is to bomb the users with mio of SCSS color settings via template styles ;-) Amd I saw how frustrating it is when a framework (or Joomla) dictates the Bootstrap version (the mentioned framework has changed that with their last release (not sure)) or if the compiler is not up-to-date and fails with newer SCSS possibilities.

The only point where I agree in this discussion is that the core templates should contain all SCSS files after build so that you can run a SCSS compiler without issues over them. I've mentioned that already years ago when the first J4 release came out but closed the issue frustrated ;-)

From my point of view the SCSS files should be inside the template folders and not in /media/ because we would have then again a restricitive core binding to version x.outdated.2

AND: This discussion is again a mixture of professors and users needs ;-) PHP compiling is fine for most users if the compiler is well maintained. I only see conflicts when, for example, one compiler doesn't resolve paths like the other one. In this case node-sass is the "bad guy" ;-)

we have to have the most secure tools for our end-users to customize stuff

I still don't understand the security argument. It's the same thing with any other vendor library in Joomla.

BUT: I don't care which solution will win as long as I can disable it easily ;-)

avatar thednp
thednp - comment - 16 Oct 2020

@thednp
Sorry, I don't understand this question:

how do you secure your ScssPhp files? they need to be secured right?

I mean limit access to the files themselves via defined(_JEXEC) or die; or via .htaccess. But I checked that framework you linked and it doesn't, which makes it very vulnerable, and ScssPhp devs are well aware.

I agree with your reply mostly, it's up the the core devs to decide on this.

avatar bembelimen
bembelimen - comment - 18 Oct 2020

A missing defined(_JEXEC) or die; per se does not make anything vulnerable, otherwise nearly the whole internet would be vulnerable. It depends if something is called or if the file contains only a class.

I guess scssphp is just a bunch of files containing class declarations, so you can't execute anything by calling the file directly.

avatar dgrammatiko
dgrammatiko - comment - 24 Oct 2020

@thednp one last comment on this issue from me. There are 2 possible solution here:

Both have their own constrains/limitations:

  • The FFI approach requires libsass installed on the server and doesn't support popular tools like postcss plugins like Autoprefix. Also FFI AFAIR is available to PHP > 7.4 and J4 supports PHP > 7.2...

  • The implementation might be harder as it requires GUI, php endpoints, etc, and the dependency for the wasm module is not from the node-sass (yet)

avatar HLeithner HLeithner - change - 24 Oct 2020
Status New Closed
Closed_Date 0000-00-00 00:00:00 2020-10-24 09:32:30
Closed_By HLeithner
avatar HLeithner HLeithner - close - 24 Oct 2020
avatar HLeithner
HLeithner - comment - 24 Oct 2020

On the FFI approach, I'm pretty sure that this is disabled on most shared hosts.
So the WASM stuff looks the only real possible way (beside we create webservice for this^^) but as you mentioned in another issue their isn't a usable implementation.

I'm closing this as it's not fix able now. If someone has a wasm solution that is proper maintained we can reopen this.

thanks

avatar thednp
thednp - comment - 24 Oct 2020

@dgrammatiko @SharkyKZ @Bakual @HLeithner and anybody interested/invested into this topic: I'm deeply concerned about this issue. I think we should all be more concerned and frankly more focused on the topic. A lot of the Joomla new users come from Joomla template developers like myself.

Questions:

  • Are you guys trying to tell me that Joomla works best with default templates and they are the only ones that can make use of the SCSS compiler as of today's Joomla 4 state? This to me sounds like "go ahead and use any template framework you like, implementing SCSS compiler for third party templates is not a priority".
  • Are there really no plans/intent to implement template development related tools to benefit third party developers?

I really need to know some answers before I go any further.

avatar HLeithner
HLeithner - comment - 24 Oct 2020

Joomla is not a template builder, a template is normally not build inside the cms. The template editing views in Joomla are of doing some changes to an existing template but not creating a new one.

If you want to create a template you should the tools you like to use. It's not hard to create a simple template, just some php, css,image files and one xml. And you can use any template you wan't.

avatar thednp
thednp - comment - 24 Oct 2020

@HLeithner then what is the field type="Color" for then? Making Facebook colors blue?

avatar dgrammatiko
dgrammatiko - comment - 24 Oct 2020

Are there really no plans/intent to implement template development related tools to benefit third party developers?

I think the default tools that exist already in the repo are fine for developing templates. You can transpile JS from ES2015+ to ES5 (this needs an update, I'm not happy with the current code) and also transpile any SCSS files to CSS. Check the commands:

* For dedicated tasks, please run:
* node build.js --build-pages === will create the error pages (for incomplete repo build PHP+NPM)
* node build.js --copy-assets === will clean the media/vendor folder and then will populate the folder from node_modules
* node build.js --compile-js === will transpile ES6 files and also uglify the ES6,ES5 files
* node build.js --compile-css === will compile all the scss defined files and also create a minified version of the css

EDIT: The tools right now, for the SCSS part work fine only for the new template mode (#30192). We (basically me) need to do finish the work pending in this case: #30359

avatar thednp
thednp - comment - 24 Oct 2020

@dgrammatiko child templates isn't something I'm a big fan of. Instead of developing simple and intuitive solutions for the end user, we're basically following a terrible lead of Wordpress in the wrong direction giving the user a lot more confusing and unnecessarily complicated solutions.

In my many years of development I came to the conclusion that the best user experience should come from a simple template with some basic customization options completely independent from third party frameworks/extensions, keeping security in check of course. So what's the takeaway from this chaos after all?

avatar dgrammatiko
dgrammatiko - comment - 24 Oct 2020

Instead of developing simple and intuitive solutions for the end user, we're basically following a terrible lead of Wordpress in the wrong direction giving the user a lot more confusing and unnecessarily complicated solutions.

I'm sorry but you're way wrong here. Child templates ALLOW anyone that creates and distributes templates to have a safe way to override any core files (the layout overrides and all the assets like css,js,fonts,images ) and also give the end user (consumer of the template) the ability to apply minor changes without loosing them on the next update.

Anyways #31221 should cover any DEV that wants to create their own template...

avatar Orgoth
Orgoth - comment - 30 Mar 2021

Hello and please excuse me for bringing the ticket up again.
What would be the argument against using a pure PHP implementation of the SCSS compiler?
For example: https://github.com/scssphp/scssphp
This only requires php 5.6 as a minimum requirement.
https://github.com/scssphp/scssphp/blob/master/composer.json

For version 3.x I wrote myself a plugin which reads the current template and compiles the files of the folder "scss".
The plugin uses the PHP compiler mentioned above.

avatar dgrammatiko
dgrammatiko - comment - 30 Mar 2021

What would be the argument against using a pure PHP implementation of the SCSS compiler?

Personally speaking, I wouldn't ever use an NON spec-compliant compiler: https://github.com/scssphp/scssphp/issues?q=is%3Aissue+is%3Aopen+label%3A%22spec+compliance%22

avatar Orgoth
Orgoth - comment - 30 Mar 2021

Thank you for the very quick reply.
That makes sense of course, that the compiler should then also comply with the spec.
At least it would be theoretically an option if the compiler would fully comply with the spec.

Have a nice week.

Add a Comment

Login with GitHub to post a comment