The use case is that I have created an email template in SFMC, and I am including the CSS via %%=ContentBlockByID('xxxxxx')=%%

I would like to use RegEx to minify the CSS at the point which it is rendered in the email.

This allows me to work on the CSS independently of any emails, yet always have the most up-to-date and minified CSS.

I have tried this a number of ways without success.

I initially tried to remove all white space and carriage returns, but could not get that working:

SET @String  = @ContentBlockByID('261242')
SET @Pattern = "/\s+/g"
SET @Match   = RegExMatch(@String, @RegEx, 0, "IgnoreCase", "Multiline")
SET @Output  = REPLACE(@String,@Match,"")

I then flipped tactics to attempt to classify all characters that should be allowed to remain, stripping everything else.


set @string = '/* comment */ .desktop_h:hover p::after .style:nth-child(1+n) { width: 0 ; max-height: 0; display: none; overflow: hidden; font-size: 0; line-height: 0; padding: 0; margin: 0; mso-hide: all !important; }  '

for @i = 1 to length(@string) do
  set @char = substring(@string,@i,1)
  set @regex = CONCAT('[a-zA-Z0-9\:\;\{\}\-\',Char(39),'\"\[\]\*\^\~\#\.\+\&\%\=\@\>\s\\\/\<\(\)\s*+ ; \s*+ ( } ) \s*]')
  set @result = iif(empty(regexmatch(@char,@regex,0)),concat(@result,''),concat(@result,@char)) 
next @i


I had some promising results using the second method, but I realised quite quickly that what I am trying to do is beyond my limited understanding of RegEx.

I was also only able to get it working when using a string, and could not get it to apply to the ContentBlockByID.

When I looked at this guy's solution in PHP: https://stackoverflow.com/questions/15195750/minify-compress-css-with-regex ...it made me aware that there are a lot more steps/characters/scenarios that my RegEx needs to cater for.

I have googled it quite a bit, but not been able to find a resource for this. I can get it working up to a point, but when it stops working it's not clear why, as the error reporting is lacking.

Can anyone explain the same steps required to create an effective CSS minimiser using Ampscript and RegEx?

Thanks :)

  • My two cents... Using AMPScript and regular expressions would impose overhead on the rendering of the content that'd likely be more significant than the lift you'd get from downloading unminified CSS to the client. What's the point of this exercise? CloudPages run slowly enough, the performance lift from minification shaving a few milliseconds from a three second page load wouldn't be perceptible. Could you not just develop your code unminified and then minify the CSS manually outside of SFMC in preparation for production? It feels like a solution in search of a problem.
    – Macca
    Dec 9 '20 at 23:19
  • @Macca - completely reasonable comment, but I am still interested in the methods that would be used here. I'd like to improve my understanding, even if ultimately I do not end up using it in the way described above.
    – mr_reamer
    Dec 10 '20 at 11:08
  • You could use something like this API cssminifier.com/api to make a post containing the output of your ContentBlockByID and encapsulate it in a TreatAsContentArea, so you only use the minifier API for the first subscriber in the send.
    – Macca
    Dec 19 '20 at 6:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.