ReReplacer

Can I use re-replacer to convert the CSS inclusion lines with INLINE CSS

1 year 7 months ago #74622

Bob Pit's Avatar Bob Pit

Hello

How can I use re-replacer to convert the CSS inclusion lines with the actual CSS. ie make it INLINE?

I want to replace this:

<link href="/t3-assets/css/css-c8fc0-22395.css" rel="stylesheet" type="text/css"/>
with this:
<style type="text/css" media="all">
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]).................
</style>

Is it possible? Maybe through another component?

1 year 7 months ago #74624

Peter van Westen's Avatar Peter van Westen Admin

Yes, and you can do that with the free version of ReReplacer.
However, searching for html that contains urls can be a bit unpredictable, as Joomla adjusts urls at the last stage (after ReReplacer gets to look at the output).

So searching with Regular Expressions should work:

<link href="[^"]*t3-assets/css/css-c8fc0-22395\.css" rel="stylesheet" type="text/css"/>
If the name of that css file is dynamic, you can do:
<link href="[^"]*t3-assets/css/css-[^"]*.css" rel="stylesheet" type="text/css"/>

Make sure the Regular Expressions option is on, and the Search Area is set to 'Head'.

1 year 7 months ago #74628

Bob Pit's Avatar Bob Pit

ok, I will try it.

Any chance that I can make re-replacer READ the /t3-assets/css/css-c8fc0-22395\.css file and insert the code?

Unfortunately there are 2-4 css files and each joomla page does not have all or the same files. I guess I have to create search rules for all the files and then re-replacer will make the replacements only for the ones it finds.

Considering that each css file can be 20-120KB, could this be a problem? I mean the way re-replacer will handle it? Because I made it manually and there was no problem.

1 year 7 months ago #74630

Peter van Westen's Avatar Peter van Westen Admin

Any chance that I can make re-replacer READ the /t3-assets/css/css-c8fc0-22395\.css file and insert the code?
You could do that with the PHP option in ReReplacer Pro.
Then you could pass the url and read the file in php. But that requires some php code and knowledge.

1 year 7 months ago #74633

Bob Pit's Avatar Bob Pit

Hi

I made some tests. There seems to be a 63 Kb limit in the Replace [ + ][ - ] field. Some of my css files are 135 Kb.

Do you see any solution to this?

1 year 7 months ago #74635

Peter van Westen's Avatar Peter van Westen Admin

Can I ask why you are trying to inline so much css? What is it you think you gain with that?

1 year 7 months ago #74637

Bob Pit's Avatar Bob Pit

I made a test and google pagedpeed for mobiles jumped about 14 points. I find it silly, but I do not want to argue with google.

1 year 7 months ago #74638

Peter van Westen's Avatar Peter van Westen Admin

There are Joomla plugins out there aimed specifically at inlining css.

However, with https 2, there are no advantages in trying to inline stuff.
You can try following the pagespeed and Yslow and all the other conflicting rules.
But best is to simply do your own speed tests.

1 year 7 months ago #74639

Bob Pit's Avatar Bob Pit

Hi

I did search but I could not find any. Could you please name a couple of them?

Another idea might be to load the CSS code of each CSS file in different custom HTML modules. Then have re-replacer replace the CSS link with those modules, wherever it finds the. Maybe this way I can overcome the 63kb limit.

Can I do this?

1 year 7 months ago #74640

Peter van Westen's Avatar Peter van Westen Admin

1 year 7 months ago #74658

Bob Pit's Avatar Bob Pit

Hi

They just replied to me that their extension does not do it. Any other ideas?

How about my question:
"Another idea might be to load the CSS code of each CSS file in different custom HTML modules. Then have re-replacer replace the CSS link with those modules, wherever it finds them. Maybe this way I can overcome the 63kb limit."

Also, would you consider raising the limit of the 63KB in re-replacer?

1 year 7 months ago #74660

Peter van Westen's Avatar Peter van Westen Admin

The limit will not be raised, as I believe what you are doing s counter-productive. You shouldn't be using it this way.

You can go the php route I described earlier, but you'll need the Pro version.

1 year 7 months ago #74665

Bob Pit's Avatar Bob Pit

Hi

I am still trying to find a solution, through the joomla forum.

If I did go the pro/php route. Would you help me (provide me) the code? I do not know php.

1 year 7 months ago #74666

Peter van Westen's Avatar Peter van Westen Admin

Search:

<link href="[^"]*(t3-assets/css/css-[^"]*\.css)" rel="stylesheet" type="text/css"/>
Replace:
<?php
if ( ! file_exists(JPATH_SITE . '/\1') ) {
   return;
}

$css = file_get_contents(JPATH_SITE . '/\1');
echo '<style type="text/css" media="all">' . $css . '</style>';
?>

1 year 7 months ago #74752

Bob Pit's Avatar Bob Pit

Hi

I am using this tool ( regexr.com/ ) to test the regular expression:
<link href="[^"]*(t3-assets/css/css-[^"]*.css)" rel="stylesheet" type="text/css"/>

It returns an error, but I hope to get there.

1 year 7 months ago #74753

Peter van Westen's Avatar Peter van Westen Admin

That website requires you to also escape the forward slashes like:

\/
You can also try:
www.phpliveregex.com/

1 year 7 months ago #74754

Bob Pit's Avatar Bob Pit

Hi

I prefer the interface of regexr.com, even if it is more strict. I came up with this, which does find the pattern I want:
<link href=\"\/(t3-assets\/css\/css-[^"]*.css)\" rel=\"stylesheet\" type=\"text\/css\"\/>

I assume that the contents of this parenthesis are loaded into the variable JPATH_SITE ?
(t3-assets\/css\/css-[^"]*.css)

1 year 7 months ago #74755

Peter van Westen's Avatar Peter van Westen Admin

The path is grouped in the search.
In the replacement field you reference that group via \1 (group 1).

Please read the documentation:
www.regularlabs.com/extensions/rereplace...#regular-expressions