RockFrontend Wiki: The new minify feature and how to handle asset loading

[Stefanowitsch]

A big shout-out and thank-you to @bernhard for keeping on improving the RockFronend. (and the whole Rock-EcoSystem) continuously. I asked for a minify-feature and here it is!

I am using RockFrontend in every project now as it combines some must-have features for frontend development (IMHO!).

Today a new feature was added (or lets say improved as auto-minify was included before)

The Minify Feature (for Styles and Scripts!)

See the Wiki entry here

 

Lets start simple: How do I include stylesheets with RockFrontend in the first place?

RockFrontend always had the feature to bundle stylesheets via the styles() function.

For example I am loading some LESS partials into my header like this. You don't have to use LESS files, regular CSS files work the same.

Note: Since RockFrontend offers LESS support you can add those files directly, no need to compile them and add the CSS files. For this you have to install the ProcessWire Less module.

 <? $rockfrontend->styles()
  ->add($config->urls->templates . 'styles/less/uikit/_custom-import.less') // add single LESS or CSS file
  ->addAll($config->urls->templates . 'styles/less/project') // point to folder to include files automatically
  ->addAll($config->urls->templates . 'styles/less/custom')
?>

The result in this case is a single compiled CSS file that will be included in your head automatically.

RockFrontend is very smart. You don't have to include tons of partial LESS project files here. Just use the addAll() function and point to a folder where your assets are saved and the module does the import for you.
This is how my folder structure looks like. If I create new LESS files in there, they will be added and compiled automatically at runtime.

How to minify

For debugging and development purposes I don't use the minify feature. Instead I use it on the staging server exclusively.

To generate a minified version of your stylesheet just add minify(true)

<? $rockfrontend->styles()
  ->add($config->urls->templates . 'styles/less/uikit/_custom-import.less')
  ->addAll($config->urls->templates . 'styles/less/project')
  ->addAll($config->urls->templates . 'styles/less/custom')
  ->minify(true);
?>

If you want to chain the minify function it to your debug-mode state you can do it like this (my preferred solution).

 <? $rockfrontend->styles()
  ->add($config->urls->templates . 'styles/less/uikit/_custom-import.less')
  ->addAll($config->urls->templates . 'styles/less/project')
  ->addAll($config->urls->templates . 'styles/less/custom')
  ->minify(!$config->debug);
?>

That's it!

Does minify work with Scrips?

Yes, exactly the same. But you make use of the scripts() function in this case.

<? $rockfrontend->scripts()
  ->add($config->urls->templates . 'scripts/script1.js')
  ->add($config->urls->templates . 'scripts/script2.js')
  ->add($config->urls->templates . 'scripts/script3.js')
  ->minify(!$config->debug);
?>

Note that these script files are not bundled (even if you chose minify false). Instead they all come out as minified versions separately.

I find that this workflow I straight forward and it combines some of the best features that RockFrontend offers! If you combine this with the awesome autorefresh feature, frontend development becomes a breeze!

[bernhard]

Thx for the great writeup!! ? Also thx for the great feedback over the last few weeks!

I've added a link to this tutorial to the wiki! ?

[bernhard]

On 2/28/2023 at 10:46 PM, Stefanowitsch said:

 <? $rockfrontend->styles()
  ->add($config->urls->templates . 'styles/less/uikit/_custom-import.less') // add single LESS or CSS file
  ->addAll($config->urls->templates . 'styles/less/project') // point to folder to include files automatically
  ->addAll($config->urls->templates . 'styles/less/custom')
?>

Thx again for the great post! Just realised that you are using old-school paths, this would also work (I call it smart paths):

<?php
$rockfrontend->styles()
  ->add('styles/less/uikit/_custom-import.less') // add single LESS or CSS file
  ->addAll('styles/less/project') // point to folder to include files automatically
  ->addAll('styles/less/custom')

// or this would also work (even if pw lives in a sub-folder!)
$rockfrontend->styles()
  ->add('/site/templates/styles/less/uikit/_custom-import.less') // add single LESS or CSS file
  ->addAll('/site/templates/styles/less/project') // point to folder to include files automatically
  ->addAll('/site/templates/styles/less/custom')

 

[wbmnfktr]

Are all these details you talk about here (and in some other threads) documented somewhere?

I looked up, read and tried everything from Github (README, Wiki), YouTube (which gave me the final "Try it now!"), the Forums, all threads... but somehow I feel various parts are missing - at least for me. I really try to use RockMigrations in one or another real project... but for now only SUPER simplified.

Then... in some other threads (like this) people are super happy, like @Stefanowitsch and @dotnetic.

Did I miss something? Is there a doc/guide/howto about all those classes/functions/hooks/methods/options/younameit... OR did you all read through the module to find out what's probably possible in some way?

 

(Please don't ask what I am missing in the docs. The answer would be: "Almost everything! B'cause I'm stupid. ?")

[bernhard]

Thx for the feedback @wbmnfktr I'm a little confused - are we talking about RockMigrations or RockFrontend? Or both?

I know that the docs can be improved in most of the modules. The problem is that it's really not an easy task for me. Any help like this great post by @Stefanowitsch is very welcome. The problem that I have with the github readme is that it get's too long for modules like RF and RM. That's why I started using github wikis - but I'm not really happy with them. They are not part of the version controlled files and so they are not connected with specific releases of the module. But I already have a plan to improve that ? 

Maybe you can share your experience a little more detailed? What is your goal? Why do the modules look interesting? What parts do you want to use? How did you try that? Where exactly did you fail?

[Stefanowitsch]

11 hours ago, wbmnfktr said:

Are all these details you talk about here (and in some other threads) documented somewhere?

I looked up, read and tried everything from Github (README, Wiki), YouTube (which gave me the final "Try it now!"), the Forums, all threads... but somehow I feel various parts are missing - at least for me. I really try to use RockMigrations in one or another real project... but for now only SUPER simplified.

Then... in some other threads (like this) people are super happy, like @Stefanowitsch and @dotnetic.

Did I miss something? Is there a doc/guide/howto about all those classes/functions/hooks/methods/options/younameit... OR did you all read through the module to find out what's probably possible in some way?

(Please don't ask what I am missing in the docs. The answer would be: "Almost everything! B'cause I'm stupid. ?")

My interest in in RockFrontend was initiated as the module was launched last year:

At first only because of the auto-refresh feature. Being tired of hitting F5 all the time that feature alone (!) made development far more enjoyable for me.

Even back then RF offered many many features, most of them I still don't use today (shame on me!). Plus - @bernhard is constantly adding new features to this module and I have to say that it's hard to keep track sometimes. 

For example I just learned "by accident" about the new rf-scrollclass feature ?

So simultaneously you have to keep 3 different places up-to-date when new changes arrive:
- Github
- The PW module page entry
- The module thread in the PW forum

oh and also Youtube ?

Therefore I can agree - I find myself from time to time looking for "that one thing that I read" and I don't find it anymore. In that case I ask Bernhard personally via PM like "how do I do this and that?". If it's something that is not supported by RF yet but would be useful it is not unlike that Bernhard will include it in a new version.

I think people have to see RockFrontend as a big toolbox. You don't need everything in it. You only grab the tools you need for your current task.
 

 

[nurkka]

On 2/28/2023 at 10:46 PM, Stefanowitsch said:

The result in this case is a single compiled CSS file that will be included in your head automatically.

@bernhard Hi Bernhard,

I found this info from @Stefanowitsch here, but it seems to be outdated. I set up a new website with all new versions of RockSuite today, and my added scripts and styles are not compiled into one JS or one CSS file. RockFrontend keeps them as single script and style files.
Is it possible to minify and concatenate scripts and styles to compile them into one single script file and one single styles file?

Additionally, I would want to prevent RockPageBuilder.min.css and RockFrontend.min.js from being loaded in the Frontend when debug mode is off and the site is not accessed by a superuser or frontend editor user.
Is that possible?

[bernhard]

Hey @nurkka thx for your questions!

5 minutes ago, nurkka said:

I set up a new website with all new versions of RockSuite today,

What do you mean exactly? Which modules did you install?

5 minutes ago, nurkka said:

and my added scripts and styles are not compiled into one JS or one CSS file.

This is expected. RockFrontend will only compile all .less files to one.css file. All other files will stay single files. This is because on some pages we might need some scripts, on others not. If all were compiled to one single file we'd have different files on different pages or we'd keep recreating this file over and over again when viewing different pages.

7 minutes ago, nurkka said:

Is it possible to minify and concatenate scripts and styles to compile them into one single script file and one single styles file?

At the moment no, for the mentioned reason. I thought about adding such a feature, but I think it would cause trouble.

8 minutes ago, nurkka said:

Additionally, I would want to prevent RockPageBuilder.min.css and RockFrontend.min.js from being loaded in the Frontend when debug mode is off and the site is not accessed by a superuser or frontend editor user.
Is that possible?

RF/RPB try to be as unopinionated about the frontend as possible, but some things need to be there to make it work. Can you please show me the content of these files?

[nurkka]

Hi @bernhard, thanks for your reply!

1 hour ago, bernhard said:

Which modules did you install?

RockFrontend, RockPageBuilder, AdminStyleRock, RockShell, RockAdminTweaks and RockMigrations.

59 minutes ago, bernhard said:

This is expected. RockFrontend will only compile all .less files to one.css file.

Thanks for the info – then I misunderstood the feature. In most cases, I am still working with one css and one js file per website. I assume that RockPageBuilder only adds the block specific styles and scripts when they are really needed on a specific page, so concatenating and compiling everything into single files wouldn't work.

1 hour ago, bernhard said:

RF/RPB try to be as unopinionated about the frontend as possible, but some things need to be there to make it work. Can you please show me the content of these files?

Currently I only have them locally within a DDEV container and I would not copy them into the forum, so for the moment only have the full paths of those 2 files. But I assume they must be the same as in your GitHub repos, so perhaps the info is ok:
/site/modules/RockFields/assets/RockPageBuilder.min.css
/site/modules/RockFrontend/RockFrontend.min.js

I had a closer look: RockFrontend.min.js has code to handle the consent manager and scrollclass features. RockPageBuilder.min.css has styles for handling margins, paddings, alignment etc. I assume these are styles which are needed for the Frontend Editor. I currently believe that I would not need both of the files in my frontend, when it's visited by guest users, as I am not using the mentioned features.

Would it be possible via a hook to check if debug mode is off and the current request comes from a guest user, and remove the files from the scripts and styles arrays before they are rendered?

[bernhard]

22 hours ago, nurkka said:

Thanks for the info – then I misunderstood the feature. In most cases, I am still working with one css and one js file per website. I assume that RockPageBuilder only adds the block specific styles and scripts when they are really needed on a specific page, so concatenating and compiling everything into single files wouldn't work.

To be honest I'm not 100% happy with this feature either, but it is used on all of my websites and that would mean a lot of refactoring. There are several reasons why I built it like this (for example I advertised the module as "zero setup", so it needs to work without prior hunting through docs and adding scripts here and there), but there are also some problems that I didn't think of upfront. For example the current implementation does not work with template cache.

22 hours ago, nurkka said:

I had a closer look: RockFrontend.min.js has code to handle the consent manager and scrollclass features. RockPageBuilder.min.css has styles for handling margins, paddings, alignment etc. I assume these are styles which are needed for the Frontend Editor. I currently believe that I would not need both of the files in my frontend, when it's visited by guest users, as I am not using the mentioned features.

RockFrontend has a setting for this in the module settings and now RockPageBuilder also has one. Please download v5.7.0 😎

[nurkka]

2 hours ago, bernhard said:

RockFrontend has a setting for this in the module settings and now RockPageBuilder also has one. Please download v5.7.0 😎

Thanks @bernhard , this works perfectly!

[nurkka]

On 3/10/2023 at 8:48 PM, bernhard said:

<?php
$rockfrontend->styles()
  ->add('styles/less/uikit/_custom-import.less') // add single LESS or CSS file
  ->addAll('styles/less/project') // point to folder to include files automatically
  ->addAll('styles/less/custom')

// or this would also work (even if pw lives in a sub-folder!)
$rockfrontend->styles()
  ->add('/site/templates/styles/less/uikit/_custom-import.less') // add single LESS or CSS file
  ->addAll('/site/templates/styles/less/project') // point to folder to include files automatically
  ->addAll('/site/templates/styles/less/custom')

Today, I noticed that when you are using LESS with subfolders nested deeper than 2 levels, the LESS parser does not parse changed files in that deeper nested folders. You have to use addAll() instead of add() to tell the LESS parser to also consider these files. And you have to set the recursion depth to the depth you need.

I compared the resulting CSS files and found no other differences between using add('/src/less/myproject.less') and addAll('/src/less'), i.e. addAll() does not add the nested LESS files twice, even if they are imported in the main LESS entrypoint file via @import.

Example:

<?php
$rockfrontend->styles()
  ->addAll('/src/less', '', 4) 

 

[nurkka]

I also had to switch from LESS to SASS now. That was possible this way:

1.) Install bernhard's SASS module: https://processwire.com/modules/scss/

2.) Change asset loading to the following:

$rockfrontend->styles()
	// add tailwindcss provided by RockFrontend
	->add('/site/templates/bundle/tailwind.css')
	// add custom styles
	->add('/site/templates/src/scss/custom.scss')
	// minify on production // note: this does not concatenate the files
	->minify( $config->debug ? false : true )
;

Note that the SCSS entrypoint file is loaded with add(). With the SCSS parser, one doesn't have to load the whole SCSS-folder with addAll() as described above regarding LESS. And it also works recursively without setting the recursion depth. I tested it until 3 levels deep.

3.) If you want to use UIKit, add this to your SCSS entry point file (example):

// 1. Your custom variables and variable overwrites.
$global-link-color: #DA7D02;

// 2. Import default variables and available mixins.
@import '../../uikit/src/scss/variables-theme.scss';
@import '../../uikit/src/scss/mixins-theme.scss';

// 3. Your custom mixin overwrites.
@mixin hook-card() { color: #000; }

// 4. Import UIkit.
@import '../../uikit/src/scss/uikit-theme';

Note that the example is taken from https://getuikit.com/docs/sass . I tested this, and it works. Please adjust the file paths according to where your SCSS entry point file is placed.

Also note that the SASS module uses https://github.com/scssphp/scssphp . This library does not support for example @use . I had to change all my "math.div()" back to "/". But the SCSSPHP team announced that they will support newer SCSS features with the upcoming 2.0 release. So it's just a matter of time.