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

Allow to enforce applying optimisations to custom property values #453

Open
ygoe opened this issue May 7, 2022 · 8 comments
Open

Allow to enforce applying optimisations to custom property values #453

ygoe opened this issue May 7, 2022 · 8 comments

Comments

@ygoe
Copy link

ygoe commented May 7, 2022

When a CSS declaration contains multiple spaces/tabs or even a line break, all of those is preserved in a function context (like calc()). I believe these could be reduced to a single space (if not removed entirely, I'm not sure about that, sometimes CSS requires spaces between operators/parameters).

Usually the minified file contains only a single line, but with such source code (writted for readability), all the line breaks in the functions are kept and the minified file contains all the line breaks including the following indentation.

@lahmatiy
Copy link
Member

lahmatiy commented May 7, 2022

@ygoe Could you please provide an example? The single case I can imaging is a value of custom property.

@ygoe
Copy link
Author

ygoe commented May 7, 2022

Indeed, I observed this with a custom property:

.something
{
  --link-hover-color-l: calc(var(--link-color-l)
  	+ max(0%, (100% - var(--link-color-l)) * var(--link-hover-lf))
  	- max(0%, var(--link-color-l) * (0 - (var(--link-hover-lf)))));
}

@lahmatiy
Copy link
Member

Custom properties can contain any content, that's not a regular value but a part of it when substituted. Removing anything from a custom property may break something. So CSSO do nothing with such values for now. Probably we need to add an option to enforce optimisation for such value in case you are sure it doesn't break anything in your case.

@lahmatiy lahmatiy changed the title Collapse whitespace with line break Allow to enforce applying optimisations to custom property values Jul 14, 2022
@idoros
Copy link

idoros commented Oct 11, 2022

Custom properties currently get trimmed, which creates a different output for development/production modes:

.c {
  --x: aaa bbb ; 
  --y: zzz ; 
}
/* OUTPUT: removed whitespace before and after the custom properties values */
.c{--x:aaa bbb;--y:zzz}

Edit:
Although this is the opposite of what the author is requesting, I think that the default behavior should preserve the value as is, untrimmed, and an option could be added to select between preserve/trim/min-whitespace

@ygoe
Copy link
Author

ygoe commented Oct 12, 2022

What's the difference of these additional spaces? I'm not aware of any situation where it's relevant.

@idoros
Copy link

idoros commented Oct 12, 2022

getComputedStyle(node).getPropertyValue('--x') returns the untrimmed value

@ygoe
Copy link
Author

ygoe commented Oct 12, 2022

I still don't need those extra spaces and cannot imagine a scenario where I would ever need it. CSS usually doesn't preserve such spaces and any application that now does is highly unexpected and probably bad design.

@idoros
Copy link

idoros commented Oct 12, 2022

I take it back, looking at the csswg it seems that custom properties should be trimmed. Browser implementation currently fail in my case.

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

3 participants