Wrong CSS built value for col-form-label

[giulioz]

• I have searched the issues of this repository and believe that this is not a duplicate.

ClayUI complies to a wrong css calc expression for the col-form-label class in padding values, since it uses this variable in the sum, that has four items:

clay/packages/clay-css/src/scss/variables/_forms.scss

Line 10 in 144c39d

$input-border-width: $input-border-top-width $input-border-right-width

Sum performed here:

clay/packages/clay-css/src/scss/components/_forms.scss

Line 634 in 1debe8b

padding-bottom: add($input-padding-y, $input-border-width);

As you can see in the compiled lib/css/base.css it compiles to a wrong value:

This breaks build using the latest react-scripts:

Creating an optimized production build...
Failed to compile.

Parse error on line 1:
0.375rem + 0.0625rem 0.0625rem ...
---------------------^
Expecting end of input, "RPAREN", "ADD", "SUB", "MUL", "DIV", got unexpected "REMS"
CompileError: Begins at CSS selector undefined

Environment

Tech	Version
Clay	v3.235.0
React	17.0.0

[giulioz]

A CodeSandbox to reproduce the issue is this, even though to reproduce it you need to download the zip and perform a yarn build

[pat270]

Thanks for the report @giulioz! Just sent a fix in.

[github-actions]

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-128084