Less code isn't 100% valid

[hostep]

Preconditions (*)

1. Seen on Magento OS 2.4.3
2. Which comes with page-builder 1.7.0 (which isn't even published here on github? 😕 )
3. I have nodejs v12 installed, but maybe it works with other versions as well

Steps to reproduce (*)

1. Install Magento OS 2.4.3 and make sure page-builder is also installed
2. Run npm install less@3.13.1
3. Run rm -R var/view_preprocessed/* pub/static/*; bin/magento setup:static-content:deploy -f --theme=Magento/backend en_US
4. Run node_modules/.bin/lessc -l var/view_preprocessed/pub/static/adminhtml/Magento/backend/en_US/css/styles.less

Expected result (*)

1. The less linting should give no errors or warnings

Actual result (*)

1. Linting the less file generates the following warnings:

extend ' .abs-reset-list' has no matches
extend ' .abs-add-box-sizing' has no matches
extend ' .abs-actions-addto' has no matches
extend ' .abs-product-link' has no matches
extend ' .abs-reset-image-wrapper' has no matches

Discussion

The issues come from the page-builder module, when I don't have page builder installed with Magento 2.4.3, I don't get linting errors.

We've seen similar problems before in core Magento in the following tickets/PR's. Maybe reading those can help you figure out what exactly is wrong and how to fix these problems:

• Less compilation extend 'mixin' has no matches magento2#23619
• Less compilation problems in Magento/backend theme magento2#24004
• Fixes less compilation problems in the Magento/blank theme magento2#24001
• Fixes less compilation problems in the Magento/luma theme magento2#24003
• Fix issue extend match class in style-old admin magento2#28895

It would be great if the less code from this module has no linting errors.
Would also be super nice if Magento's static tests could include a check for this, so it doesn't get introduced in any other new modules that are created in the future

[m2-assistant]

Hi @hostep. Thank you for your report.
To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[hostep]

One example about the .abs-reset-list warning

You are trying to use the .abs-reset-list class in your adminhtml less:

magento2-page-builder/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/products/_default.less

Lines 30 to 32 in f47c512

	.product-items {
	&:extend(.abs-reset-list all);
	}

However, the definition of this class only exists on the frontend:

• in Magento's blank theme: https://github.com/magento/magento2/blob/9b8d557e2209cc784da869a8cc9fc1257462987c/app/design/frontend/Magento/blank/web/css/source/_extends.less#L15-L20
• or in Magento's luma theme: https://github.com/magento/magento2/blob/9b8d557e2209cc784da869a8cc9fc1257462987c/app/design/frontend/Magento/luma/web/css/source/_extends.less#L13-L19

So this means that your code won't have an effect and should either be removed. Or - if you expect it to have an effect - to rework it so that it works as it's supposed to work.

I didn't investigate the other cases, they might be similar ...
Hope this helps 🙂