Widget: CSS Compression

[G.W.Green]

This widget applies a more robust compression to your stylesheet than the Sellerdeck default. It will improve the initial load time of your web pages, and enhance your score with Google Pagespeed Insights and similar analytical tools.

The extension cannot compress any external stylesheet files that you may use. These should be compressed separately before uploading.

Note: You must have "Compact HTML/CGI/JS" selected in the Design > Design Options dialog to enable both this extension, and the other forms of compression that can be applied by Sellerdeck Desktop on uploading.




Installation and Use

Install the widget as described in ‘Finding and Installing a Widget’.

After installing, check that compression is enabled as described above. Then Refresh or Publish to Web to upload with the stylesheet compressed.

Disabling and Removing the Widget

To disable the widget, and all other compressions that can be applied by Sellerdeck Desktop on uploading, untick "Compact HTML/CGI/JS" selected in the Design -> Design Options dialog.
To remove the widget and restore the original behaviour:

1. Find the entry for the widget in the ‘Widgets’ tab, and click the ‘Installed’ button.
2. Click ‘Download Backup’ and save the backup file.
3. Import the backup file using the same method as installing a widget. This will restore the modified ‘Standard MOTO Form’ layout to the state it was in before you installed the widget.

Code Changes

The widget adds code to the beginning and end of your current stylesheet layout.

If the widget fails to install for any reason, you can simply open the layout by clicking the 'Current Stylesheet' button in the Design tab in Sellerdeck Desktop, and paste the code in by hand.

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

/* sd.widget.CSS Compression Widget.1.2:BEGIN */ $sCSS = <<<'CSSDefinition' /* sd.widget.CSS Compression Widget.1.2:END */

And the following code at the very end:

/* sd.widget.CSS Compression Widget.1.2:BEGIN */ CSSDefinition; // 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 echo $sCSS; /* sd.widget.CSS Compression Widget.1.2:END */