Minifies url encoded svg images incorrectly in css files

[deepvision7]

For example the following css statement background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");

becomes background-image:url("data:image/svg+xml,%3csvgxmlns='http://www.w3.org/2000/svg'fill='%23fff'viewBox='0088'%3e%3cpathd='M5.250l-44441.5-1.5-2.5-2.52.5-2.5-1.5-1.5z'/%3e%3c/svg%3e")

making it <svgxmlns... instead of <svg xmlns...

[Chris2011]

Hey,

thx for the ticket, will have a look soon :)

[Chris2011]

It seems, that your CSS is broken. I can't get it working: https://codepen.io/chris2011-the-bashful/pen/BazWwXY here you can't see no result and if you try your snippet in the cssnano playground: https://cssnano.co/playground/ it breaks the whole application :D and gies some console errors.

[Chris2011]

I also unescaped your svg string. The SVG is working, when I use a separated file, but also not working on codepen (See commented code). When I use this code snippet:

div {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill="red" points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>'); 
}

codepen shows it. Anyway, I think there is smth missing in the config of cssnano. Will check this too.

[Chris2011]

Ok, my fault. I overseen the #fff :D. So ok your css is working, then there is smth missing in the cssnano.

[deepvision7]

Sorry, should have used a different colour to make it work by default. Didn't notice there was #fff

[Chris2011]

No problem, I saw it :). As I said, will check it soon. Maybe I need to update the npm packages.

[Chris2011]

Also thx for pointing this out.

[deepvision7]

Thanks for the great plugin :)

Monday, October 26, 2020, 3:14:00 PM, you wrote:

C> Also thx for pointing this out.

Best regards

Taras

[Chris2011]

Thanks goes to the initial developer @jGauravGupta

[Chris2011]

Unfortunately, I can't reproduce it. I created a tester.css file and this is my code:

body {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

and it becomes this:

body{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3E%3C/svg%3E")}

I did a right click on the css file -> Minify CSS. Output opens and the successful notification.

[Chris2011]

Which NetBeans version do you have and which version of my Plugin do you use? I need more info here to identify the problem.

[Chris2011]

@deepvision7 hey, can I please get more information from you so that I can help you? Otherwise I can't do anything here.

[deepvision7]

Hey sorry, I missed your comment :( I mainly use 8.0.2 But I also made sure that the same thing happened in the 11.2

[Chris2011]

8.0.2 is not supported anymore, please see the end of the readme and check the changelog. Also use the latest IDE (if possible) if not, 11.2 should be good but you need to use the latest Minifierbeans version which is 3.1.0. Which version of Minifierbeans do you use?

[deepvision7]

I got the latest plugin just before checking. It was 3.0.0 at the time

[Chris2011]

I need more information. What did do you exactly. Please add explicit steps to reproduce:

• Doing this
• Then this
• etc.

When I do right click on the file, everything works fine.

[deepvision7]

If it works fine with the latest version then the issue can be closed I suppose.

[Chris2011]

it should work with 3.0.0, because I switched from old YUI Compressor to CSSNano and PostCSS. So there is no change for this in 3.1.0. In 3.1.0 I changed from Google Closure Compiler java based to nodejs based. So please give me your steps that I can try to reproduce. There are more than one option to minify CSS and I need to know what you did.

[deepvision7]

If you are interested in how I tested it with the 3.0.0 at the time when it was the latest version then here is how I did it.

1. I created a test.css: div{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"); }
2. Clicked 'save' and it created the following test.min.css: div{background-image:url("data:image/svg+xml,%3csvgxmlns='http://www.w3.org/2000/svg'fill='%23fff'viewBox='0088'%3e%3cpathd='M5.250l-44441.5-1.5-2.5-2.52.5-2.5-1.5-1.5z'/%3e%3c/svg%3e")}

[Chris2011]

So you checked the option: "Minify on save", right?

[Chris2011]

This information was missing for me. So I will check that too.

[deepvision7]

Yes I did.

[deepvision7]

When I right click and choose Minify CSS it results in the same minified file. Not sure why it's not working as it should.

[Chris2011]

Does the output tab open and do you see any output when you run the action or save?

[deepvision7]

When I click save it just notifies in the status bar that "test.css saved". When I right click and "Minify CSS" it shows a popup that CSS Minified Completed Successfully, etc.

[Chris2011]

Ok, that seems for me you have an old version installed. There are no dialogs anymore since 3.0.0. So please go to Plugins and search for Mini and check whether there are two or more installed.

[deepvision7]

Strange.. There is only one listed under the User installed plugins. Version: 1.0 Source: NetBeans Plugin Portal Plugin Description MinifierBeans See the changelog for all changes and the readme for all information. Module installed: MinifierBeans

Could it be that I messed it up somehow... I can't remember now how I did it.

[Chris2011]

You can check the plugin folder in your user dir and check whether there is another one. The old one had an other name JS-CSS-HTML-Minify or smth like that. I can't remember.

[Chris2011]

This is how the options looks today:

And here is the version:

[deepvision7]

There is only org-netbeans-minify.jar And in the MANIFEST.MF it says OpenIDE-Module-Specification-Version: 2.5.1 Damn it! Sorry for causing so much trouble. :(

[Chris2011]

This is just the old one. You can try to uninstall it. And install the new one.

[Chris2011]

I think we can close this now :)