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

feat(css/minifier): Handle nested calc() #6153

Merged
merged 3 commits into from Oct 17, 2022

Conversation

ghostd
Copy link
Contributor

@ghostd ghostd commented Oct 14, 2022

Description:

Handle nested calc():
calc(100% - calc(50% + 25px)) => calc(50% + 25px)

BREAKING CHANGE:

Related issue (if exists):

@kdy1 kdy1 self-assigned this Oct 14, 2022
@kdy1 kdy1 added this to the Planned milestone Oct 14, 2022
@@ -1 +1 @@
.class1{width:calc(100vw/2 - 6px)}.class2{width:500px}.class3{width:calc(0 - 10px)}.class4{width:calc(0 - calc(1px + 1em))}.class5{width:calc(0 - (100vw - 10px)/2)}.class6{width:calc(10px - 100vw)}.class7{width:calc(0px - (100vw - 10px)*2)}.class8{width:calc(-10px - 100vw)}.class9{width:calc(0px - var(--foo,4px)/2)}
.class1{width:calc(100vw/2 - 6px)}.class2{width:500px}.class3{width:calc(0 - 10px)}.class4{width:calc(0 - 1px - 1em)}.class5{width:calc(0 - (100vw - 10px)/2)}.class6{width:calc(10px - 100vw)}.class7{width:calc(0px - (100vw - 10px)*2)}.class8{width:calc(-10px - 100vw)}.class9{width:calc(0px - var(--foo,4px)/2)}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

width:calc(0 - 1px - 1em) -> width:calc(-1px - 1em)

Copy link
Collaborator

@alexander-akait alexander-akait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nested calc() is like ( and ) , so I think we should handle it not in transform_calc_value_into_component_value, we should handle them inside calculation.

Because if you will compress width:calc(100px - (1px - 1em)) all works fine

@ghostd
Copy link
Contributor Author

ghostd commented Oct 15, 2022

@alexander-akait i'm not sure to understand your comment, i added the "nested calc" handling into the resume function. I rebased, i hope the diff will be more readable.

Copy link
Collaborator

@alexander-akait alexander-akait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, there are some impvomenets more, like width:calc(2.25rem - 0px), but let's do it another PR, because it is not related to nested calc

@alexander-akait
Copy link
Collaborator

@kdy1 Ready to review

@kdy1 kdy1 changed the title feat(css/minifier) Handle nested calc() feat(css/minifier): Handle nested calc() Oct 17, 2022
Copy link
Member

@kdy1 kdy1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I'll rebase/merge this after publishing a new version


swc-bump:

  • swc_css_minifier

@kdy1 kdy1 enabled auto-merge (squash) October 17, 2022 11:34
Copy link
Collaborator

@swc-bot swc-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Automated review comment generated by auto-rebase script

@kdy1 kdy1 merged commit d4a733d into swc-project:main Oct 17, 2022
@ghostd
Copy link
Contributor Author

ghostd commented Oct 17, 2022

@alexander-akait i'll work on removing zeroes this week.

@alexander-akait
Copy link
Collaborator

Thanks

@ghostd ghostd deleted the handle-nested-calc branch October 17, 2022 19:13
@kdy1 kdy1 modified the milestones: Planned, v1.3.10 Oct 21, 2022
@swc-project swc-project locked as resolved and limited conversation to collaborators Nov 20, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants