[#24144] - [4.0] SCSS Build script strange behavior
- Closed
- 11 Mar 2019
- Medium
- Build: staging
- # 24144
Steps to reproduce the issue
When tinkering around with #24110 I got one strange behavior:
I moved the media_source/plg_editors_tinymce/css/tinymce-builder.css to media_source/plg_editors_tinymce/scss/tinymce-builder.scss and want to benefit from the automatic build tool.
To my surprise the file is never converted to media/plg_editors_tinymce/css/tinymce-builder.css
So I looked into compilecss.es6.js and (at least for me) are some logical flaws in this file:
Overview
I understand this file, that it loops through the media_source folder (+ subfolder) and collects all files which are not in the blacklist (I think we should add here *.gif and *.html, too).
CSS
If the file is a CSS file, it will be copied to the media folder, minified etc. => works well
SCSS
Problem 1
If the file is a SCSS file and not starts with an underscore (_) the file will be added to a collection files. Here is the first bug: the test should be:
if (file.match(/\.scss$/) && !file.match(/(\/|\\)_[^\/\\]+$/)) {
because in file is the whole path and not the filename only. So we should check for / or \ followed by an _ and then no / or \ until the end to get wrong filenames.
Problem 2
The next problem here is, that the SCSS compiling is in the folder loop, so the added files will be executed again and again (if we have more folders), it should be moved one line down, outside of the loop.
Problem 3
No let's assume, the SCSS compiling works (it does not reliable, see Problem 4), then we have the following scenario: The SCSS and CSS files will be collected, looped and SCSS compiles + CSS copied. But SCSS files has to be copied, too, when they are converted to CSS files (at least the new CSS files has to). But the moment, SCSS are compiled to the new CSS files, they never appear in the copy area, because they're not in the collection.
So the solution would be, to first collect all SCSS files, compile them and then collect the CSS files + copy them.
Problem 4
In theory the SCSS files get collected and then compiled to CSS, but when I executed npm imy SCSS files (and others like client.scss) was not compiled. So I added some console-debug-outputs and was very surprised, that the CompileScss.compile(...) function was called before the collection of the SCSS files.
So only the predefined files are compiled.
My assumption would be, that the crawling of the folder structure takes much longer than the other stuff and if I remember correctly, different calls are not executed in a sequence (if not enforeced by something like "sequence").
So it calls the Recursefunction and continues in the script, while in the background the folders are crawled. So the compileSCSS will executed before the crawling is finished.
GIST
Here is a first GIST which solves 1+2+3 but still fails on problem 4, but perhaps it helps?
joomla-cms-bot
- | Labels |
Added:
?
|
||
franz-wohlkoenig
- | Status | New | ⇒ | Discussion |
Thank you @dgrammatiko for your answer.
My assumption would be, that the crawling of the folder structure takes much longer than the other stuff
Nope, Javascript is asynchronous so the recurse fn should have a
.thento execute the scss compilation
Yep, that's the reason why there is a race at all. The execution of the task needs an enforeced sequence, if this is possible with .then(...) then it's ok.
So the solution would be, to first collect all SCSS files, compile them and then collect the CSS files + copy them.
I don't think that scss files were ever meant to be distributed, thus the code doesn't copy them. It's not a bug it's a design decision
I think I was a bit inaccurate here: Ofc only the (generated) CSS files should be copied, but they never will, because when they're generated, the Recurse file collection is already done, so they will not appear in the list of to copy files. (I could be wrong here, it's mostly theory, because the compilation does not work because of problem 4)
because when they're generated, the Recurse file collection is already done, so they will not appear in the list of to copy files.
Ok, there is a misunderstanding here, the 2 different approaches (css and scss) don't share some code. Eg the css files just get copied and minified in the new folder but the scss get compiled to .css and .min.css by another function. There is no chained operation here...
FWIW my plan/idea was to convert all the css to scss and all the scripts to either es6 or webcomponents so there won't be a need for multiple cases, but I don't see me chasing that plan anymore...
because when they're generated, the Recurse file collection is already done, so they will not appear in the list of to copy files.
Ok, there is a misunderstanding here, the 2 different approaches (css and scss) don't share some code. Eg the css files just get copied and minified in the new folder but the scss get compiled to .css and .min.css by another function. There is no chained operation here...
Ok, I checked the code and yes there is some semi-dependency but at the end of the day they are separated. I have to run, but I will put in some thoughts and perhaps have an idea for a fix (if you're not faster ;) )
FWIW my plan/idea was to convert all the css to scss and all the scripts to either es6 or webcomponents so there won't be a need for multiple cases, but I don't see me chasing that plan anymore...
I also thought, that was the plan...
| Status | Discussion | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-03-11 21:57:24 |
| Closed_By | ⇒ | bembelimen |
Nope, Javascript is asynchronous so the recurse fn should have a
.thento execute the scss compilationI don't think that scss files were ever meant to be distributed, thus the code doesn't copy them. It's not a bug it's a design decision
Probably true
This is fine