Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

base64 string is broken with v1.8.4 #1535

Closed
rivancic opened this issue Sep 5, 2018 · 2 comments
Closed

base64 string is broken with v1.8.4 #1535

rivancic opened this issue Sep 5, 2018 · 2 comments

Comments

@rivancic
Copy link

rivancic commented Sep 5, 2018

Description

I wrote build script with gulp. One of the steps was to prettify the scss code. I used [email protected]
which has a dependency on js-beautify.
When the build process runs with the [email protected] sass processor does not throw any issues in next step. But with the update of the dependency to [email protected] the sass procesor step is broken. I was not using any settings for js-beautify lib. But per default previous version was working. Is it neccessary to provide now additional settings?

Error message is as following:

[10:39:48] Starting 'sass'...
Error in plugin 'sass'
Message:
    assets/scss/сomponents/_sorting.scss
Error: Invalid CSS after "...round: url(data": expected expression (e.g. 1px, bold), was ":image/gif;"
        on line 16 of assets/scss/сomponents/_sorting.scss
        from line 19 of assets/scss/style.scss
>>   background: url(data:image/gif;

   ------------------^
[10:39:51] Finished 'sass' after 3.3 s

I compared the output of both versions for the specific _sorting.scss file

Input

background: url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=);

Expected Output

Output of [email protected] 👍

background: url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=);

Actual Output

Output of [email protected]

 background: url(data:image/gif;
  base64, R0lGODlhCwALAJEAAAAAAP ///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=);

Now the sass processor is broken because of the spaces in the base64 string representation

Steps to Reproduce

Environment

OS: Linux

Settings

I was using default settings.

@bitwiseman
Copy link
Member

bitwiseman commented Sep 5, 2018

The problem is in the logic here: https://github.com/beautify-web/js-beautify/blob/master/js/src/css/beautifier.js#L373

Tests for the uri format inside url(<uri>) don't sufficiently cover this format to ensure it doesn't break.

Format details can be found here:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
https://css-tricks.com/data-uris/

bitwiseman added a commit to bitwiseman/js-beautify that referenced this issue Sep 8, 2018
bitwiseman added a commit to bitwiseman/js-beautify that referenced this issue Sep 8, 2018
@bitwiseman bitwiseman modified the milestones: v1.8.x, v1.8.5 Sep 10, 2018
@rivancic
Copy link
Author

Thanks @bitwiseman for the fixing the issue in such a short time. Respect!
I upgraded version to 1.8.6 and I can confirm now the formatting is correct. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants