NXT-15922: Fix less -> css transpile issue while 'enact transpile'

[hong6316]

Checklist

• I have read and understand the contribution guide
• A CHANGELOG entry is included
• At least one test case is included for this feature or bug fix
• Documentation was added or is not needed
• This is an API breaking change

Issue Resolved / Feature Added

Fix less -> css transpile issue while enact transpile

Reproduction steps

//0. use cli 7.3.2
$ npm i -g @enact/cli@7.3.2

//1. create an sample app
$ enact create myapp

//2. use Panels, Panel in the sample app
$ vi ...

//3. enact pack/serve and check css files
$ enact pack && enact serve

Expect: css looks fine, and panel works fine.
Actual: css looks weird, and panel not works
※ It cannot be reproduced when linking limestone directly, just npm install @enact/limestone cases
※ If you intend to link, you can reproduce the issue by running enact transpile on Limestone first.

Resolution

Fixed an issue where information was missing from CSS files when executing the enact transpile command in Limestone,
by injecting monkey-patch at LessPluginRi.prototype.install in transpile.js
-> Fall-throughing calc()+var() pattern

Additional Considerations

Links

NXT-15922

Comments

Enact-DCO-1.0-Signed-off-by: Taeyoung Hong (taeyoung.hong@lge.com)

[daniel-stoian-lgp]

one suggestion. in case you agree with it, please also update the code comment accordingly

[daniel-stoian-lgp]

Should we also handle situation when not using var() inside calc?

Examples:
@lime-panel-body-padding: @lime-panel-body-padding-top ~"calc(@{lime-panel-body-padding-right} - @{lime-component-spacing})"; was already handled --> padding: 0 calc(132px - var(--primitive-spacing-36));

@lime-panel-body-padding: @lime-panel-body-padding-top ~"calc(@{lime-panel-body-padding-right} - 36px)"; --> padding: 0 NaNrem - 36px);

Suggested change

	if (/calc\s*\(.*var\s*\(/.test(value)) return value;
	if (/calc\s*\(/.test(value)) return value;

Examples with suggestion applied:
@lime-panel-body-padding: @lime-panel-body-padding-top ~"calc(@{lime-panel-body-padding-right} - @{lime-component-spacing})"; was already handled --> padding: 0 calc(132px - var(--primitive-spacing-36));

@lime-panel-body-padding: @lime-panel-body-padding-top ~"calc(@{lime-panel-body-padding-right} - 36px)"; --> padding: 0 calc(132px - 36px);