[SHA-1310] LESS Processing for Share CSS Created: 20-Aug-15  Updated: 17-Jul-20  Resolved: 03-Oct-16

Status: Done
Project: Share Application
Component/s: Share Application
Affects Version/s: None
Fix Version/s: 5.2.0 Share, 5.2.b Share, General UX (5.2)

Type: Story Priority: Unprioritized
Reporter: Mike Farman Assignee: Unassigned
Resolution: Done Votes: 0
Labels: webappsha
Remaining Estimate: 0 minutes
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: File LESS-engine.patch    
Issue Links:
Blocks
Epic Link: Share UX Improvements
Story Points: 8

 Description   

As Share developer I would like to be able use LESS variables for CSS so that I can easily change styles and have those match those used by Aikau.



 Comments   
Comment by David Draper [X] (Inactive) [ 20-Aug-15 ]

Mike Farman has asked me to review this and give an estimation of what would be involved in making this happen

Comment by David Draper [X] (Inactive) [ 21-Aug-15 ]

I've done some initial analysis of this issue, adding in the LESS engine is straightforward enough. However, I've tested this out on a 5.0.N build (I've attached a patch file showing what's required). However, the problem is that some of the files as they currently are written are generating LESS exceptions when processed, for example:

components/documentlibrary/documentlist.css:

com.asual.lesscss.LessException: Parse Error: Unrecognised input (line 1138, column 4) near

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;

yui/columnbrowser/assets/columnbrowser.css:

com.asual.lesscss.LessException: Parse Error: Unrecognised input (line 239, column 2) near

  • /TOKEN NOT FOUND/
    */

css/base.css:

com.asual.lesscss.LessException: Parse Error: Unrecognised input (line 1647, column 3) near

background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);

(NOTE: this is not an exhaustive list, this is just the errors I hit on the first page I went to).

Therefore the effort is not in integrating the LESS engine but in ensuring the validity of all our CSS files.

We're currently using the the Asual LESS CSS engine project (https://github.com/Asual/lesscss-engine) and are on almost the latest version (and we need to patch our version to remove Rhino dependencies that cause issues).

In summary the issue is not so much in being able to integrate LESS processing into core Share CSS files, but the effort is in going through all the CSS files to ensure that any content that will cause exceptions is ignored. It would seem that browsers are more tolerant of CSS issues that this LESS engine is.

Comment by David Draper [X] (Inactive) [ 21-Aug-15 ]

Re-assigning back to you for consideration of what to do next

Comment by Ray Gauss [X] (Inactive) [ 18-Sep-15 ]

I've created a less-css-validator Java project which takes in paths to CSS files and uses the same lesscss-engine to attempt to validate the files.

Seems to work well for the most part but It's not finding the columnbrowser.css error mentioned above so I'm sure it needs tweaking.

Comment by David Draper [X] (Inactive) [ 18-Sep-15 ]

I've raised AKU-589 to remove the YUI compression step that occurs before LESS processing... this will be required for 5.0.3 and 5.1. This might also explain the discrepancy in some of the errors being seen.

Generated at Sat Aug 15 20:47:36 BST 2020 using Jira 7.13.15#713015-sha1:7c5ddd2c3e1709974ae9c48c17df8edd3919fe2c.