Add other css files to the compressed actinic.css

[graphicz]

Sellerdeck now has an excellent way of compressing the css, either manually adding the code:

https://community.sellerdeck.com/for...ss-compression

or using the widget

https://community.sellerdeck.com/forum/knowledge-base/content-management/extensions/widgets/553015-widget-css-compression

If you have other css files that you would like to add to the compressed actinic.css here is a way to do it.

Firstly add the compression the the actinic stylesheet:

The following code should be added at the very start of the stylesheet layout:

<actinic:block php="true">
$sCSS = <<<'CSSDefinition'

And the following code at the very end:

CSSDefinition;
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCompressionEnabled%22%20%2f%3e">
// Clean up CSS
$sCSS = preg_replace('/\
|\
/', ' ', $sCSS); // eliminate newlines
$sCSS = preg_replace('/\s+/', ' ', $sCSS); // convert all multiple tabs and spaces to a single space
$sCSS = preg_replace('/\/\*.*?\*\//', '', $sCSS); // remove all comments
$sCSS = preg_replace('/\s*(\{|\}|:|;|,|>|\/)\s*/', '${1}', $sCSS); // eliminate spaces either side of { } : ; , > /
$sCSS = preg_replace('/([^0-9])0px/', '${1}0', $sCSS); // convert 0px to 0
$sCSS = preg_replace('/^\s*/', '', $sCSS); // remove spaces remaining at start of CSS
$sCSS = preg_replace('/([^\'])#([0-9a-fA-F])\2([0-9a-fA-F])\3([0-9a-fA-F])\4/', '${1}#${2}${3}${4}', $sCSS); // convert colours like #aabbcc to #abc
$sCSS = preg_replace('/(padding|margin):([0-9]+(?:px|%)+) \2;/', '${1}:${2};', $sCSS); // convert margin:0 0; to margin:0;
$sCSS = preg_replace('/(padding|margin):([0-9]+(?:px|%)+) \2 \2 \2;/', '${1}:${2};', $sCSS); // convert margin:0 0 0 0; to margin:0;
$sCSS = str_replace(' !important', '!important', $sCSS); // remove space before !important
$sCSS = str_replace(';}', '}', $sCSS); // get rid of trailing ; in rules
</actinic:block>
echo $sCSS;
</actinic:block>

Then make a couple of new lines before the second instance of CSSDefinition; and add the following:

<actinic:block php="true">
array_map( function ($a) { return include($a); }, array('xx.css','yy.css','zz.css'));
</actinic:block>

where 'xx.css','yy.css' and 'zz.css' are your other css files.

It didn't seem logical to have a 'php block' within a 'php block' but it needs this to work

I am assuming you will need to add the following expression to the bottom of the outer layout to get the css files added to the snapshot, perhaps someone can correct me if I am wrong?

<script>
// src="xx.css" // - adds file to snapshot
// src="yy.css" // - adds file to snapshot
// src="zz.css" // - adds file to snapshot
</script>

PS: In the KB article on manually adding the css compression the PHP tag

<actinic:block php="true">

is omitted from the beginning and

echo $sCSS;
</actinic:block>

is omitted from the end
and it won't work without them.
https://community.sellerdeck.com/forum/knowledge-base/content-management/extensions/widgets/553015-widget-css-compression



Thank you