Consolidate and improve SCSS compilation process

• Type: Epic
• Status: Closed
• Priority: Major
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: None
• Component/s: JS APIs and Utilities
• Labels:
  • 7.4-ce-ga1
  • fc_20_12
  • team_fi_epic_category_build_process
• Epic/Theme:
  • FI_Platform_Evolution
• Epic Status: To Do

For a while now, module sin liferay-portal have used Sass as their CSS pre-processor of choice. 

This is achieved via

• CSSBuilder
• CSSRTLConverter

and integrated via Gradle in BuildCSSTask

At the same time, most of the rest of frontend build process is controlled by the liferay-npm-scripts package.

While we're working on this, minification for CSS resources can be modelled based on the prior work done for JS at Simplify JS minification scheme in DXP

The goal of this epic is to consolidate Sass compilation in a single tool and improve it in the process.

Acceptance Criteria

• Provide out of the box support for Sass compilation from liferay-npm-scripts
• Update sass build processes to use a JS-based solution like Dart Sass
• Provide RTL conversion support from liferay-npm-scripts
• Update liferay-portal build process to use the new processes
• Deprecate the legacy Java tasks and classes

Test Scenarios:

Requirement	Test Case	Covered by frontend/backend unit test? (Yes/No)	Test Priority (business impact)
Deprecate the legacy Java tasks and classes	Given a terminal at portal root When run `find -not -path "./modules/sdk*" | grep 'CSSRTLConverter.java'` Then no lines are returned	no	3-medium
Provide RTL conversion support from liferay-npm-scripts	Given portal page When change language to arabic Then RTL layout is applied to page	no	5-critical

Exploratory testing to consider:

Test Scenarios	Covered by frontend/backend Unit Test?	Test Priority (business impact)
Exploratory smoke testing. Widely used areas of portal look ok: Sign in, home page, control panel, add page, add a portlet and content.	no	4-major
Exploratory smoke testing on supported browsers (FF / Chrome / Edge / Safari desktop)	no	2-low
Exploratory test to see if there's common sass compilation errors that make sense	no	2-low

Performance testing to consider:

Test Scenarios	Covered by frontend/backend Unit Test?	Test Priority (business impact)
Exploratory to compare build times before and after the update. Run `gw buildCSS` on /modules after `gw yarnInstall`	no	2-low