Standalone uiLibrary in an external project

[vimalkodoth]

Category

• Rendering issue

Description

When the standalone unstyled ui Library is added to the non-enact external project, the components do not work as expected.
I'm trying to use the ProgressBar component of uiLibrary inside my project. Upon rendering, the component does not inject custom classes to the component.

Environment

Enact version:
"@enact/ui": "^3.2.5"

Reproduction Code

import css from "./App.module.less";
<ProgressBar
progress={0.5}
backgroundProgress={0.75}
css={{
progressBar: css.customProgressBar,
fill: css.customProgressBarFill
}}
/>

Comments and Screen Shots

It renders as below.

<div role="progressbar" class="progressBar horizontal" style="--ui-progressbar-proportion-start-background:0; --ui-progressbar-proportion-end-background:0.75; --ui-progressbar-proportion-start:0; --ui-progressbar-proportion-end:0.5;"><div><div></div><div></div></div></div>

[Djspaceg]

The rendered output makes it look like you are using different LESS compiling rules in your webpack. The built-in rules of enact, that allow the style system to work leverages an obscure feature that retains /* */ style comments. We're considering a way that doesn't rely on this, but, at least right now, is necessary.

Some explanation about this conclusion: those <div> tags at the end have no class names on them, most likely because the import css ... object inside of enact/ui is blank. The only reason it would be blank is if the import was not able to find the selector class names. If it can't find the class names, it's likely due to them having no content. If they have no content, it's because the comment which tricks them into having content without any rules, doesn't exist. If it doesn't exist, the comment was pruned out.

[webOS101]

@vimalkodoth Were you able to resolve this issue?

[yalagutbay]

@vimalkodoth were you able to run ui library in an external project? I'm also trying to use the UI library in a plain react app but somehow it gives a hook error.

[seunghoh]

Close this issue as no further discussion. Please create an issue again if necessary.