No Code Attached Yet
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: No Code Attached Yet
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.

Add a Comment

Login with GitHub to post a comment