feat: Load custom properties CSS file and auto-generate on change

[lokesh]

Load CSS custom properties as a standalone stylesheet and auto-regenerate them on each webpack build.

Technical

• Webpack build process: Runs scripts/generate-css-custom-properties.js via the beforeCompile hook, so generated-custom-properties.css is always regenerated before a build (including in watch mode).
• CSS file loading: Adds a <link> tag that loads generated-custom-properties.css so they can be utilized by our web components and other CSS files.
• Updates generated-custom-properties.css

Testing

• Run docker compose run --rm home npm run build and verify static/css/less/generated-custom-properties.css is regenerated with the latest values.
• Run the CSS build in watch mode (docker compose run --rm home npm run watch:css) and change a LESS variable, confirm the custom properties file is regenerated.

Screenshot

Stakeholders

@mekarpeles @cdrini @RayBB

[RayBB]

@lokesh I didn't get to try this yet. But based on my other use of this script I have a question.
Is it possible that we make it so it doesn't update the timestamp if nothing else in the file changed?
Otherwise, it will generate often and update the time stamp and probably show up in PRs where it's not needed.

[lokesh]

@lokesh I didn't get to try this yet. But based on my other use of this script I have a question. Is it possible that we make it so it doesn't update the timestamp if nothing else in the file changed? Otherwise, it will generate often and update the time stamp and probably show up in PRs where it's not needed.

Good point. For now, I've removed the timestamp from the generated file which will prevent unnecessary file modifications that show up in git commits.

We could have the build step generate files and do a diff to compare before deciding on updating the timestamp, but that might be overkill. Went with the simplest solution.

[cdrini]

Wooohooo!! I was wondering what was causing this file to appear modified all the time, great fix!