-
Notifications
You must be signed in to change notification settings - Fork 9.4k
[WIP] Updated wikimedia/less.php from v3 to v5 #37842
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
[WIP] Updated wikimedia/less.php from v3 to v5 #37842
Conversation
Hi @hostep. Thank you for your contribution! Add the comment under your pull request to deploy test or vanilla Magento instance:
❗ Automated tests can be triggered manually with an appropriate comment:
Allowed build names are:
You can find more information about the builds here For more details, review the Code Contributions documentation. |
Just for funsies: @magento run all tests |
The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues. |
Safer way is fix as you mentioned width: ~"calc(100% - (@{checkout-tooltip-icon__font-size} + @{indent__s} + @{indent__xs}))"; => this will output consistent results no matter how do you used node/grunt or php compilation I think it's clean fix problem without broken anything. |
also i have already created PR for exactly your case here |
Sorry, I was away on holiday. Also there are some changes in the wikimedia/less.php repository that haven't been published yet in a new release that I want to test first, because there are too much changes in the resulting compiled css which might be fixed by those unreleased changes. But I need to check. Thanks for pointing out #33643, I'll take a look at it as well in a couple of weeks. |
Just tried again but with ...
diff -urN /tmp/magento-scd-comparison/adminhtml/Magento/backend/en_US/css/styles.css pub/static/adminhtml/Magento/backend/en_US/css/styles.css
--- /tmp/magento-scd-comparison/adminhtml/Magento/backend/en_US/css/styles.css 2023-08-31 17:48:28
+++ pub/static/adminhtml/Magento/backend/en_US/css/styles.css 2023-08-31 17:50:55
@@ -3051,7 +3051,11 @@
.action-select-wrap .abs-action-menu .action-submenu,
.action-select-wrap .action-menu .action-submenu,
.action-select-wrap .actions-split .dropdown-menu .action-submenu,
-.action-select-wrap .actions-split .action-menu .action-submenu {
+.action-select-wrap .actions-split .action-menu .action-submenu,
+.action-select-wrap .abs-action-menu .action-submenu .action-submenu,
+.action-select-wrap .actions-split .dropdown-menu .action-submenu .action-submenu,
+.action-select-wrap .actions-split .action-menu .action-submenu .action-submenu,
+.action-select-wrap .actions-split .action-menu .action-submenu .action-submenu {
max-height: 45rem;
overflow-y: auto;
}
@@ -3059,14 +3063,22 @@
.action-select-wrap .abs-action-menu .action-submenu ._disabled:hover,
.action-select-wrap .action-menu .action-submenu ._disabled:hover,
.action-select-wrap .actions-split .dropdown-menu .action-submenu ._disabled:hover,
-.action-select-wrap .actions-split .action-menu .action-submenu ._disabled:hover {
+.action-select-wrap .actions-split .action-menu .action-submenu ._disabled:hover,
+.action-select-wrap .abs-action-menu .action-submenu .action-submenu ._disabled:hover,
+.action-select-wrap .actions-split .dropdown-menu .action-submenu .action-submenu ._disabled:hover,
+.action-select-wrap .actions-split .action-menu .action-submenu .action-submenu ._disabled:hover,
+.action-select-wrap .actions-split .action-menu .action-submenu .action-submenu ._disabled:hover {
background: #ffffff;
}
.action-select-wrap .action-menu ._disabled .action-menu-item,
.action-select-wrap .abs-action-menu .action-submenu ._disabled .action-menu-item,
.action-select-wrap .action-menu .action-submenu ._disabled .action-menu-item,
.action-select-wrap .actions-split .dropdown-menu .action-submenu ._disabled .action-menu-item,
-.action-select-wrap .actions-split .action-menu .action-submenu ._disabled .action-menu-item {
+.action-select-wrap .actions-split .action-menu .action-submenu ._disabled .action-menu-item,
+.action-select-wrap .abs-action-menu .action-submenu .action-submenu ._disabled .action-menu-item,
+.action-select-wrap .actions-split .dropdown-menu .action-submenu .action-submenu ._disabled .action-menu-item,
+.action-select-wrap .actions-split .action-menu .action-submenu .action-submenu ._disabled .action-menu-item,
+.action-select-wrap .actions-split .action-menu .action-submenu .action-submenu ._disabled .action-menu-item {
cursor: default;
opacity: .5;
}
... Need to figure out if this is expected or not, as it makes the css files a bit bigger in filesize which is maybe not something we want. No idea when I'll find time to continue with this investigation, I'm a bit busy in my afterwork life at the moment. |
No, not at all, these are 2 completely different things. #38335 deals with compilation using less.js which is used for local development using grunt This PR deals with compilation using less.php which is used by the I'll try to find some more time to try to move this forwards. |
6cef229
to
aecdbdd
Compare
Still WIP, this whole less compilation is a giant mess (no wonder that the guy who worked for Adobe some years ago to try to fix the frontend stack quit his job). More observations:
Minimal test case for the first bullet point, compile this with less.php v3 vs less.php v4 vs less.js and observe the differences or similarities: .admin__scope-old {
//
// Data table
//--------------------------------------
.data-table {
thead,
tfoot,
th {
background: red;
}
td,
tbody tr th,
tbody tr td {
background: blue;
}
tfoot {
tr {
&:last-child th,
&:last-child td {
border: 0;
}
}
}
}
.accordion .config .data-table {
thead th,
tfoot td {
&:extend(.data-table thead all);
}
td {
&:extend(.data-table td all);
}
tbody tr:nth-child(odd) td {
&:extend(.data-table tbody tr:nth-child(odd) td all);
}
tfoot tr:last-child td {
&:extend(tfoot tr:last-child td all);
}
}
} If somebody else wants to take a stab at this, feel free to do so, you are free in taking over the changes I send here. |
aecdbdd
to
696adee
Compare
Tried it out with the recently released v4.2.0 of wikimedia/less.php today, but ran into a bug: wikimedia/less.php#107 And while working on this, I ran into another bug in Magento as well:
This is because the I'm not exactly sure yet how to deal with this other bug:
Anyway, still a lot of work to be done here. |
d9d71f4
to
c0c720a
Compare
The problem discovered in my last comment is being fixed over here: #38683 |
@hostep I'd love to see Magento on Less.php 4.x, which fully passes all upstream Less.js 2.5.3 specs. We've also released Less.php 5.0 just now which starts the journey toward Less.js 3.13 compliance. The nominal differences are front-loaded in the 5.0 release, such as differences around https://github.com/wikimedia/less.php/blob/master/CHANGES.md |
Yes @Krinkle, I noticed you guys put in quite some effort the last few weeks/months. Great job! I'll see if I can pick this up in the near future. And try to upgrade to less.php 5.0 and see how that goes. |
c0c720a
to
14c00b3
Compare
Upgraded less.php compiler further to version 5.0.0 Haven't performed a deep analysis yet, because the changes in resulting css files are very big when comparing v3 to v5, but most seem to make sense. Still WIP until I (or somebody else) finds a bunch of hours to dive deep into this. @magento run all tests |
Looks like internal Magento devs updated less.php library to v4 in acd4f24 But to me it seems like they didn't test anything, I would strongly suggest @glo71317 to take a look at this PR as well and take a look at the changes in the |
Thanks @hostep to contributing and putting good efforts. We check the changes and will get test it internally before delivering. |
Hi @hostep, Internal team has started to work on it. Thanks. |
@glo71317: when working on this, I was worried that maybe in custom themes, people would rely on the bug with calc that got fixed in the less.php library between version 3.x and version 4.x somewhere, so I wanted to give the opportunity to theme developers to stick with version 3 for the time being. I wrote about this a little bit in the "Additional information" section in the initial bugreport in #37841 |
Thanks for clarification, i think lets drop v3 and continue with v5 |
d28c2a8
into
magento:2.4-develop
Hello, As I can see this issue got fixed in the scope of the internal Jira ticket AC-9712 by the internal team Based on the Jira ticket, the target version is 2.4.8-beta1. Thanks |
Thanks! This seems to be a cleaner commit to reference: 6be8d4e |
Description (*)
Will update description later
TODO's:
Update: This looks like a fix, because
50% - 1px
is not equal to49%
, so it seems like this is a bug that gets fixedRelated Pull Requests
Fixed Issues (if relevant)
calc
expressions #37841Manual testing scenarios (*)
Questions or comments
I've chosen to keep the constraints open so that version 3 is also still available to install, the changes in the
calc
compilation might be problematic for some shops, so this way we give an opportunity to let people stay at version 3. However, the 2 fixes in core magento themes will then cause issues for them...In case of any protest about potential backwards compatibility breakage: we'll have to move to v4 anyways one day in the future (v3 will probably get abandoned and probably won't support newer PHP versions).
Contribution checklist (*)