search

filamentgroup / grunt-criticalcss

Grunt wrapper for criticalcss
MIT License
530 stars 27 forks source link

Inline SVG background image breaks criticalcss workflow #57

Closed cjholowatyj closed 1 year ago

cjholowatyj commented 4 years ago

Hey everyone, I have a SVG icon that is being inlined into the background-image property of a css rule and it's breaking my criticalcss workflow... The specific css rule with the problem svg is as follows:

background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1797.1 1864.9'%3e%3cdefs%3e%3cstyle%3e.cls-1%7bfill:url(%23linear-gradient);%7d.cls-2%7bopacity:0.15;isolation:isolate;%7d.cls-3%7bfill:url(%23linear-gradient-2);%7d.cls-4%7bfill:url(%23linear-gradient-3);%7d.cls-5%7bfill:url(%23linear-gradient-4);%7d%3c/style%3e%3clinearGradient id='linear-gradient' x1='-170.4429' y1='-325.2993' x2='-171.0945' y2='-326.0254' gradientTransform='translate(175363.897 194278.2402) scale(1019.2484 595.6411)' gradientUnits='userSpaceOnUse'%3e%3cstop offset='0' stop-color='%2380c3e6'/%3e%3cstop offset='1' stop-color='%233380c2'/%3e%3c/linearGradient%3e%3clinearGradient id='linear-gradient-2' x1='-170.0279' y1='-324.0137' x2='-170.8561' y2='-324.3363' gradientTransform='translate(103678.3423 330781.0342) scale(599.4398 1016.2092)' gradientUnits='userSpaceOnUse'%3e%3cstop offset='0' stop-color='%23f38649'/%3e%3cstop offset='0.1849' stop-color='%23f28147'/%3e%3cstop offset='0.4091' stop-color='%23ef7242'/%3e%3cstop offset='0.6537' stop-color='%23ea5a3a'/%3e%3cstop offset='0.911' stop-color='%23e4382e'/%3e%3cstop offset='1' stop-color='%23e12a29'/%3e%3c/linearGradient%3e%3clinearGradient id='linear-gradient-3' x1='-171.3452' y1='-323.8776' x2='-170.5824' y2='-324.4617' gradientTransform='translate(213490.8682 329942.4446) scale(1245.2634 1016.2094)' gradientUnits='userSpaceOnUse'%3e%3cstop offset='0' stop-color='%2342ab4a'/%3e%3cstop offset='1' stop-color='%23add155'/%3e%3c/linearGradient%3e%3clinearGradient id='linear-gradient-4' x1='-171.079' y1='-323.8036' x2='-170.5348' y2='-325.2896' gradientTransform='translate(243030.7075 271120.8525) scale(1418.6571 831.5027)' xlink:href='%23linear-gradient-3'/%3e%3c/defs%3e%3ctitle%3emodx-logo-svg-vector%3c/title%3e%3cpath class='cls-1' d='M1419.8,780l372.3-595.6H896.6L772.9,382.9,1419.8,780Z'/%3e%3cpath class='cls-2' d='M772.9,382.9,836.3,281l583.6,499-647-397.1Z'/%3e%3cpath class='cls-3' d='M1616.8,1859.9V964.5L1423.6,843.7l-406.2,641.7,599.4,374.5Z'/%3e%3cpath class='cls-2' d='M1017.3,1485.4l100.3,62.7,305.9-704.3-406.2,641.6Z'/%3e%3cpath class='cls-4' d='M174.4,5.2V900.7l207.2,120.7L1419.7,779.9Z'/%3e%3cpath class='cls-5' d='M377.3,1089.7,5,1675.2H900.5l523.2-831.5Z'/%3e%3c/svg%3e");

it produces the following error:

[CriticalCSS] Error thrown in criticalcss.findCritical while processing original.css: Error: undefined:719:395: missing '}'

Any thoughts/help on how to resolve this? I'm running grunt-criticalcss in a production workflow (it runs in the background when a page request is made and the next page call that is executed after the critical css is generated calls the result). This issue is cropping up as part of my cronjob that routinely compresses the CSS in cached webpages on my server...