title: sed regular expression to fix css minification
body: <p>I'm currently working on a minification task as post commit hook. I'm using the current version of yui-compressor for CSS-minification.</p>
  
  <p>Bad thing about the current version of yui-compressor:
  It breaks certain CSS3-rules that need whitespaces to function properly. (calc(10px + 10px))</p>
  
  <p>To fix the issue i wrote a regular expression that should replace every occurence of calc(...) after compression.</p>
  
  <p>my solution so far is the following RegEx:</p>
  
  <p>Match:    <code>/calc\((.*?)([\/\+\-\*])(.*?)\)/g</code></p>
  
  <p>Replace:  <code>calc(\1 \2 \3)</code></p>
  
  <p>I used two online tools to validate my regular expression:</p>
  
  <p><a href="https://regex101.com/" rel="nofollow noreferrer">https://regex101.com/</a></p>
  
  <p><a href="https://regexr.com/" rel="nofollow noreferrer">https://regexr.com/</a></p>
  
  <p>It also works in PHP. But as soon as i use "sed" only the last occurence per line is being replaced:</p>
  
  <p>Compressed CSS: (before replace with regular expression)</p>
  
  <pre><code>.test{width:calc(1px+1px)}.test2{left:calc(4%+140px)}.test3{width:calc(1px+1px)}
  
  .test{width:calc(1px-1px)}.test2{left:calc(4%-140px)}.test3{width:calc(1px-1px)}
  
  .test{width:calc(1px*1px)}.test2{left:calc(4%*140px)}.test3{width:calc(1px*1px)}
  
  .test{width:calc(1px/1px)}.test2{left:calc(4%/140px)}.test3{width:calc(1px/1px)}
  </code></pre>
  
  <p>CSS after regular expression: (and correct result)</p>
  
  <pre><code>.test{width:calc(1px + 1px)}.test2{left:calc(4% + 140px)}.test3{width:calc(1px + 1px)}
  
  .test{width:calc(1px - 1px)}.test2{left:calc(4% - 140px)}.test3{width:calc(1px - 1px)}
  
  .test{width:calc(1px * 1px)}.test2{left:calc(4% * 140px)}.test3{width:calc(1px * 1px)}
  
  .test{width:calc(1px / 1px)}.test2{left:calc(4% / 140px)}.test3{width:calc(1px / 1px)}
  </code></pre>
  
  <hr>
  
  <p>sed in debian 8 - (loading the same rules from a file):</p>
  
  <pre><code>sed -r "s/calc\((.*?)([\/\+\-\*])(.*?)\)/calc(\1 \2 \3)/g" style.css
  </code></pre>
  
  <p>prints the following:</p>
  
  <pre><code>.test{width:calc(1px+1px)}.test2{left:calc(4%+140px)}.test3{width:calc(1px + 1px)}
  .test{width:calc(1px-1px)}.test2{left:calc(4%-140px)}.test3{width:calc(1px-1px)}
  .test{width:calc(1px*1px)}.test2{left:calc(4%*140px)}.test3{width:calc(1px * 1px)}
  .test{width:calc(1px/1px)}.test2{left:calc(4%/140px)}.test3{width:calc(1px / 1px)}
  </code></pre>
  
  <p>It doesn't seem to work with sed. Does anyone have a clue what the heck is going on? </p>
  
  <p>Thanks in advance!</p>