Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexandrumorariu merged 3 commits into from
Jun 29, 2026
Merged

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

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6054da4
NXT-15922: Fix less -> css transpile issue while 'enact transpile'
hong6316 Jun 24, 2026
e17d34c
fix lint errors
hong6316 Jun 24, 2026
d2cf114
Apply suggestion from @daniel-stoian-lgp
hong6316 Jun 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions commands/transpile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,19 @@ const less = require('less');
const LessPluginResolve = require('less-plugin-npm-import');
const minimist = require('minimist');
const LessPluginRi = require('resolution-independence');
const getRiPlugin = require('resolution-independence/lib/resolution-independence');
// Patch: calc() containing var() must pass through unchanged — the RI plugin's
// parseString regex groups "calc(132px" as one token, causing parseFloat to return NaN.
LessPluginRi.prototype.install = function (_less, pluginManager) {
const Plugin = getRiPlugin(_less);
const origParseString = Plugin.prototype.parseString;
Plugin.prototype.parseString = function (ruleNode, stringValues) {
const value = stringValues || ruleNode.value;
if (/calc\s*\(.*var\s*\(/.test(value)) return value;

@daniel-stoian-lgp daniel-stoian-lgp Jun 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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);

return origParseString.call(this, ruleNode, stringValues);
};
pluginManager.addVisitor(new Plugin(this.options));
};
const {optionParser: app} = require('@enact/dev-utils');

let chalk;
Expand Down
Loading