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

Some of the complex css styles are omitted after minify #673

Closed
anand-rawada opened this issue Feb 26, 2024 · 3 comments
Closed

Some of the complex css styles are omitted after minify #673

anand-rawada opened this issue Feb 26, 2024 · 3 comments

Comments

@anand-rawada
Copy link

anand-rawada commented Feb 26, 2024

In the online editor(https://go.tacodewolff.nl/minify), some of the css styles are lost after minify. Like if there are multiple calc() or var() functions are present for single CSS property, they are replaced with 1 function

Before minify
.branding-theme .slds-button.slds-button_outline-brand,
.branding-theme .slds-button.slds-button_neutral,
.branding-theme .slds-button.slds-button--neutral,
.branding-theme .slds-button.slds-button_text-destructive {
padding: calc(var(--dce-edge-xsmall, 6px) - 2px) calc(var(--dce-button-horizontal-padding, 18px) - 2px); /* 2px border */
}

.branding-theme .slds-spinner {
box-sizing: content-box;
border-width: var(--dce-border-medium, 4px);
border-style: solid;
border-color: var(--dce-brand-color, #01A982) var(--dce-brand-color, #01A982) var(--dce-border-weak, #0000001F);
border-radius: 100%;
transform: rotate(0deg);
animation: 1s linear 0s infinite normal none running spinner;
}

After minify
.branding-theme .slds-button.slds-button_outline-brand,.branding-theme .slds-button.slds-button_neutral,.branding-theme .slds-button.slds-button--neutral,.branding-theme .slds-button.slds-button_text-destructive{padding:calc(var(--dce-edge-xsmall,6px) - 2px)}.branding-theme .slds-spinner{box-sizing:content-box;border-width:var(--dce-border-medium,4px);border-style:solid;border-color:var(--dce-brand-color,#01A982);border-radius:100%;transform:rotate(0);animation:1s linear 0s infinite normal none running spinner}

@tdewolff
Copy link
Owner

Thanks for raising the issue. Issue should be fixed now!

@anand-rawada
Copy link
Author

anand-rawada commented Feb 27, 2024

@tdewolff Thanks for quick action on this. I confirm that calc function is working fine in chrome. Could you please do the same fix for var function as well. There is still issue with var functions

Also, I see that spaces are removed between 2 calc functions. it is definitely recommended to keep space separators between calc and var functions. Most of minifiers don`t remove them. It seems working in modern browsers, but... no 100% guarantee.

@tdewolff
Copy link
Owner

Yes, should be fixed now too. On a side note, the CSS parser and minifier could use some refactoring which is on the roadmap.

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

No branches or pull requests

2 participants