Switch to Lightning CSS

[KTibow]

Proposed change

• Use Lightning CSS instead of clean-css to minify CSS.
• Smaller bundles, eg -3kb from authorize.js
  Some bundles go up, because LCSS doesn't do some minifications, plus we started doing prefixing
• Also, builds faster and is more compatible with old browsers
• Is safe to use

  Lightning CSS does not perform any optimizations that change the behavior of your CSS unless it can prove that it is safe to do so. For example, only adjacent style rules are merged to avoid changing the order and potentially breaking the styles.

Currently a draft because I'm waiting for the LCSS team to respond to one of my issues to prove that the repo is active

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

N/A

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

[steverep]

In general when comparing for something like this, it would be useful to know the impact on the whole bundle:

du --apparent-size --total -h hass_frontend/frontend_latest/*.js
du --apparent-size --total -h hass_frontend/frontend_es5/*.js

[home-assistant]

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.

[steverep]

Should also collect the warnings array here from output, and log them if not empty

[KTibow]

Hmm. I get warnings about Unsupported pseudo class or element: b2lopmc8akq whenever someone uses a variable inside of a css template literal, because one of the plugins replaces all variables with things like babel-plugin-template-html-minifier:b2lopmc8akq. I also get some warnings like "unknown rule @apply" wherever we use that.

[steverep]

That plugin is what's running html-minifier-terser on all the tagged templates. For debugging (if you already haven't), do dev builds with:

1. Comment out the isProdBuild && in front of that plugin in the Babel options
2. Change the devTool setting in webpack.cjs to get rid of eval-

After that, it should be much easier to find and inspect various templates to see what's happening. Wherever there are substitutions, technically there should be nothing but numbers or other CSS templates because that's all lit allows without unsafeCSS.

For @apply, I think you can add exceptions in the settings?

[KTibow]

Oddly, while Lightning CSS is better in most cases (including the entrypoint files), it's producing a ~20kb bigger total output even when no targets are specified.

[KTibow]

FYI to anyone else building this, I recently found out that you may need to do rm -rf node_modules/.cache in order to properly process the CSS.

[steverep]

FYI to anyone else building this, I recently found out that you may need to do rm -rf node_modules/.cache in order to properly process the CSS.

That's probably the babel-loader cache getting a little confused. It's not a perfect system as it just uses the options object as part of the key.

[KTibow]

Turns out that in a number of cases, LCSS doesn't do certain optimizations, which is why its bundle is larger:

• Replace "outline: none" with "outline: 0"
• Replace "color: var(--thing, white)" with "color: var(--thing, #fff)"
• Removing px for svg elements

I'm going to leave this PR as a draft because I opened issues for those things in LCSS's repo. While I could do something like minifying with both CCSS and LCSS, that seems unwise.
* CCSS = clean-css, LCSS = lightningcss

[KTibow]

Actually no. Something really weird is going on - while LCSS is worse in some cases, the total bundle should be 25kb smaller (according to tallying within the parsecss function), not 20kb bigger.

[KTibow]

Closing as it's unlikely that my concerns will be addressed, and I can always recreate the PR later if they are