Uxp react not rendering background image on css

UXP Developer Tool
, ,
1

Someone give me an idea here. All my image files are working well when I import them and include them on my .jsx script. Now issue is, when am using an extenal css file and I include a background image on a css property as showed below, that image never renders. Inshort it’s just a blank space for that image. Could I be missing something on uxp react webpack configuration for this because it’s quite weird.

login-header-icon-image {
display: inline-block;
background-image: url(…/farmer.png);
background-repeat: no-repeat;
transition: 0.2s opacity ease-in-out;
}

My webpack configurations for file loading are as below and I don’t think they’re the issue. Although I think I have to enable something for webpack to process this for uxp react but am not sure what it is,

{
			test: /\.(png|jpg|jpeg|svg)$/,
			exclude: /node_modules/,
			loader: 'file-loader',
		},

What could be the issue. Anyone with an idea?

2

UXP still doesn’t support CSS transition and animation.
I’m not sure it causes the issue but it’s better to remove it .

3

Awesome . I didn’t know. Where do they post features which uxp supports and doesn’t support?

4

I don’t know how up to date this is:
https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-css/

5

it notes that “CSS transitions and animations are not supported”

https://developer.adobe.com/photoshop/uxp/2022/uxp-api/known-issues/#css

and you see available CSS functions list here as Timothy_Bennett showed.

https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-css/

not only animation, like grid-layout and some other advanced CSS features haven’t been supported yet.

6

Correct, CSS support is basic right now, but I believe some new properties will be added soon(ish).
@Jarda happens to be a reliable source in terms of missing CSS support, he’s investigated it thoroughly.

7

It is not up to date at all. Many properties have been supported since UXP 3. Now we have 7.2 but those are still not listed there. Your best bet would be base64 encoding.