Pass browserlist targets to lightningcss

[silamon]

Proposed change

Fixes #53084
Fixes #52986

Please double check, I've been able to see that the css tokens are back to what they were, but not really into the build of HA.

Screenshots

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:
• Link to developer documentation pull request:
• Link to backend pull request:

Checklist

• I understand the code I am submitting and can explain how it works.
• The code change is tested and works locally.
• There is no commented out code in this PR.
• I have followed the perfect PR recommendations
• Any generated code has been carefully reviewed for correctness and compliance with project standards.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

To help with the load of incoming pull requests:

• I have reviewed two other open pull requests in this repository.

[timmo001]

Change looks sound, not tested the actual issue though, second opinion wanted

[slovdahl]

If there is a way to easily test this change on a Shelly Wall Display I can do that.

[maartenla]

I couldnt find the corrected alpha values in the Dev Demo deploy.
(--divider-color should be rgba instead of a Hex value)
I think lightningcss doesnt do anything because browserlistModule.default is empty?
I think we need to pass the correct group, 'modern' and 'legacy' for both builds.

[silamon]

It didn't really deploy and the unique url isn't outputted either, so don't put much time into that.

[maartenla]

I'll test locally 👍

[silamon]

I've been able to fix it, but it takes the dev branch as a checkout anyway, so if you could test locally that would be great.

[maartenla]

Interesting, I've done a production build and in the es5 build I still see hexvalues with alpha. (Search for --divider-color: in hass_frontend).

I edited the code locally so the correct browserlist is passed and then I do get es5 builds correctly going through lightningcss for transpiling, returning rgba for --divider-color in the es5 build and hex values for the modern build.
Doesnt fully work though, I had to turn off lightningcss vendor prefixing as it didnt work well with minify-literals, I think if we are adding CSS transpiling we should also have vendor prefixing working.

Ive also tried to simulate the bugs mentioned with the Android Webview that Shelly Wall Displays use, but I cannot reproduce it, so it is very specific to the Shelly Android build, we would need someone with an actual device to test it properly.

[silamon]

I've been able to deploy it now and it's indeed faulty again. Not sure why it works for me locally.

[slovdahl]

I've been able to deploy it now and it's indeed faulty again. Not sure why it works for me locally.

I tested https://6a5a4ecdd820d3125a2ffd81--home-assistant-demo-dev.netlify.app on my Shelly Wall Display X2 and yes, the issue remains. Let me know if/how I can help out.

[silamon]

Issue seems fixed right now, but it doesn't minify anything at all anymore. I'm out of ideas.

[maartenla]

I have it working locally I believe, let me check one more time and Ill PR into this.