We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.

Assets Minification does not work properly

Hello, I am currently experimenting with Phalcon and have some issues regarding asset minification.

$this->assets->collection("appJs")
->setTargetPath("js/app.js")
->setTargetUri("js/app.js")
->addInlineJs("var user = " . json_encode($user) . ";")
->addJs("js/nouislider.js")
->addJs("js/materialize.js")
->addJs("js/edit.js")
->join(true)
->addFilter(new Jsmin())
;

$this->assets->collection("appCss")
->setTargetPath("css/app.css")
->setTargetUri("css/app.css")
->addCss("css/normalize.css")
->addCss("css/nouislider.css")
->addCss("css/shuttle.css")
->join(true)
->addFilter(new Cssmin())        
;

When I tried opening the page, the minified files are generated and loaded successfully but the styles does not appear as expected, am I missing something or doing something incorrectly? Looking forward to your pointers and guidance



43.9k

Hi,

is there anything in app.css ?

Do you have tried to remove the minification filters ?

do you get any HTTP error like 404 not found or 500 server error? Is there anything in webserver log ?

are you sure that you've got the right appCss call in your view ?

Have you syntax checked the generated files? There might be a runtime error which gets outputted into the minified files...

I'vehad some problems with setTargetPath and setTargetUri, but if the files get generated with content, than that's not the issue here.

Hi @le51 thanks for replying,

Nothing seems out of the ordinary in app.css and removing the minification filters resulted in separate, non-concatenated files. HTTP response all green and nothing on webserver log and yes I've checked that the view calls the correct appCss :S

Hi,

is there anything in app.css ?

Do you have tried to remove the minification filters ?

do you get any HTTP error like 404 not found or 500 server error? Is there anything in webserver log ?

are you sure that you've got the right appCss call in your view ?

Hi @LajosBencz thanks for replying,

The generated files seems normal, no runtime error got written, any other possible cause?

Have you syntax checked the generated files? There might be a runtime error which gets outputted into the minified files...

I'vehad some problems with setTargetPath and setTargetUri, but if the files get generated with content, than that's not the issue here.



43.9k
edited Jan '17

okay.

Did you try some kind of webdeveloper/debug toolbar to see how styles are applied to your html tags ?

I've looked at it previously too and the first thing I noticed is that the styles seem to overlap and negate each other. Do I need some kind of namespacing for my own styles?

okay.

Did you try some kind of webdeveloper/debug toolbar to see how styles are applied to your html tags ?



43.9k

the first thing I noticed is that the styles seem to overlap and negate each other

it looks like a problem from the stylesheet itself. Maybe try to load just normalize.css -> see what happens, then, if ok, add nouislider.css and so on ...

Me and my UI engineer friend has been examining the problem more closely and we think we found the problem: the lines and styles after a comment is not written to the output file

For example, given the current style

.mystyle { color: red; /* comment */}

The output file after the Cssmin filter is as follows

.mystyle{color: red;

Notice the missing closing curly bracket, which ultimately breaks the whole file

If I use https://cssminifier.com/ to minify the style, the output is as follows

.mystyle{color:red}

As a workaround, we had to adjust the whole styling to remove comments or ensure there is no styling statements after comments. Any fix or solution that can be done besides that? I think this should be fixed from the phalcon side. Thanks!



43.9k
Accepted
answer

You can open an issue in phalcon github repo about that bug

Will do, thanks @le51!

You can open an issue in phalcon github repo about that bug