Reduced CSS File Size Output for Luma & Blank Theme by Not Compiling Mixins Library into CSS

[laurnts]

Updated Description

Magento 2 is using _extends.less to add theme specific mixins which is being called by
@import (reference) 'sources/_extends.less'

However for some reason .abs- prefixed classes went through the compilation mode which end up in the CSS file, bloating the size between 100kb up to 200kb which is particularly alot for just a CSS file. After long investigation this happens because some of the .abs- prefixed mixin is being called within a .media query method which enforces the parsing of a mixin although they are not being used.

Manual testing scenarios

1. grunt exec:luma && grunt:less luma will compile css file for luma theme
2. All of the compiled css files are located in pub/static/frontend/...
3. Here styles-m.css and styles-l.css contains ie: .abs-revert-to-action-secondary
4. While searching through the entire Magento2 directory, this class .abs-revert-to-action-secondary is never being called directly within the phtml. It's only being called via &:extend(.abs-revert-to-action-secondary).
5. Replace the whole [.media.....] with [& when (@media-common = true)] in both Luma & Blank
6. By not compiling the whole '.abs' classes, saved about 100 - 200kb in css file size.

Contribution checklist

• [yes] Pull request has a meaningful description of its purpose
• [yes] All commits are accompanied by meaningful commit messages

[magento-cicd2]

All committers have signed the CLA.

[okorshenko]

@laurnts thank you for your contribution. Unfortunately, these fixed break UI on store front.