[AMP] Components for AMP and Responsive Grid css

Bug Report

I would like to build a page for AMP and use Core components. When building the page with Responsive Grid, css file generated by AEM is too large (for 3 viewports it is around 100KB). AMP limitation for CSS is that the file needs to be under 70,000B. Additionally, AEM use !important keyword in the css which is not allowed in AMP. Above disqualify usage of Responsive Grid on AMP pages in AEM.

Current Behavior Currently we are not able to build AMP page and use Responsive Grid at the same time!

When building AMP page with core components and Responsive Grid, css file generated to support responsive grid is over 75KB (AMP limit). Additionally, css generated use !important keyword which is not supported (allowed) in AMP. Page is considered as invalid by AMP validator.

Expected behavior/code When building AMP page with core components and Responsive Grid, css file generated to support responsive grid is optimised and size is under 75KB (AMP limit). Additionally, css generated doesn't use !important keyword.

Environment

AEM version and patch level : AEM 6.5.6
Core Components version: 2.11.1
JRE version: Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.8+10-LTS)

Possible Solution

Optimisations on AEM level or different approach to grid system (eg. bootstrap grid)
float: left; clear: none; could be moved to single place with .aem-GridColumn selector
Reduce decimal precision to two digits (33.3333333% -> 33.33%)
Grouping selectors (OOTB functionality of some CSS minifiers)
Reducing length of selectors

Additional context / Screenshots WKND doesn't support AMP but it does use the same responsive grid so it's generate exactly the same file: https://wknd.site/etc.clientlibs/wknd/clientlibs/clientlib-base.lc-604c2890bb40261cb7a24c421b97841a-lc.min.css

adobe / aem-core-wcm-components

[AMP] Components for AMP and Responsive Grid css #1324

Bug Report