Clarity: Failure when converting clr-ui/clr-ui.min.css files to less

[aravindh-nagarajan]

Hello,

Our app is an Angular-hybrid app that runs without Angular-CLI. We are slowly migrating to Clarity. As of now we are using Clarity v2.3.1.

To avoid having clarity styles in global context, we wrap them in a container like below.

_clarity-design-wrapper.less_

.clarity-design-wrapper {
    @import (less) '~@clr/ui/clr-ui.css'; 
    @import (less) '~@clr/icons/clr-icons.min.css'; 
}

It used to work without any errors.

But after upgrading to clarity v3.1.0, the above things fails.

We are able to do this for @clr/icons/clr-icons.min.css and @clr/ui/clr-ui-dark.min.css,
but when trying to convert @clr/ui/clr-ui.min.css to less, build fails.

.clarity-design-wrapper {
    @import (less) '~@clr/ui/clr-ui.min.css'; // does not work, throws errors
    // @import (less) '~@clr/ui/clr-ui-dark.min.css'; // works
    @import (less) '~@clr/icons/clr-icons.min.css'; //works
}

Sample repository to repro: https://github.com/aravindh-nagarajan/angular-app-without-cli

Not sure this as a bug, but any help/suggestions on how to do this is very much appreciated.

Thank you.

UPDATE:
After some investigation, found that some variables are not defined, but used in clr-ui.css.

like $clr-btn-default-disabled-color, $clr-color-neutral-0 and maybe more. and there is some weird encoded strings as property value for --clr-login-background.

Attaching images:

After fixing these manually, we are able to convert the css file to less and our build runs without issues.

[mathisscott]

Hi @aravindh-nagarajan
Thanks for the detailed description. That helps a lot.

Recompiling our CSS into LESS isn't something we support but it looks like you have found an issue we need to fix there.

I will take a look and try to get a fix in for our next patch release.

[aravindh-nagarajan]

Hi @mathisscott, Thank you for the fast resolution. Can you please let us know when will it be released?

[mathisscott]

@aravindh-nagarajan
It will be released with the next 3.x release. So within a couple of weeks...

[aravindh-nagarajan]

Thank you

[aravindh-nagarajan]

Hi @mathisscott ,

Looks like issue is still not resolved. our build process is still failing, we have few more properties with the same issue.

1. --clr-login-background -> has invalid property value
2. --clr-btn-icon-disabled-color -> uses $clr-btn-default-disabled-color
3. --clr-forms-select-multiple-error-focus-color -> invalid value

can you please help?

[mathisscott]

Hi @aravindh-nagarajan
Sorry. I didn't see this. It's a best practice not to necro closed issues. It's better to open a new one. This is not something I can look into this week but I may be able to get it into our next release if you could those screenshots in a new issue.

Thanks.

[aravindh-nagarajan]

@mathisscott , raised https://github.com/vmware/clarity/issues/4526.

Thanks