OBS-383: Replace LESS with native CSS

[toufali]

This PR transpiles LESS files to CSS – a preliminary step for the front-end refactor.

This PR is intentionally limited in scope for ease of review and logical/modular commits. Further changes to come, including deleting all LESS files, removing the LESS compiler and associated code.

These changes should not result in any visible difference in-browser. The app should still build without issue using django-pipeline. This was tested by following the steps in Production-style Assets, then spot-testing the site in the browser.

[smarnach]

I'm somewhat out of my comfort zone here, so I'm not sure I understand correctly what's going on here.

It looks like this PR adds compiled versions of all the less files. And it looks like in the compiled versions all imports are inlined, and all variables are replaced with their actual values.

What I believe we eventually want is using CSS imports instead of the less imports, and CSS variables instead of the less variables, since this would keep the logical structure and maintainability of the code. Is this what you are trying to do? Or are you going some other route?

[toufali]

I'm somewhat out of my comfort zone here, so I'm not sure I understand correctly what's going on here.

It looks like this PR adds compiled versions of all the less files. And it looks like in the compiled versions all imports are inlined, and all variables are replaced with their actual values.

What I believe we eventually want is using CSS imports instead of the less imports,

Yes! Unfortunately CSS @import is not supported by django-pipeline. I plan to add that functionality after we install a new build tool to take django-pipeline's place. With the new tool (to come under separate PR), we should be able to fully utilize @import with tree-shaking and logical code maintainability. I left the soon-to-be obsolete LESS files in place as a temporary reference to the imports.

and CSS variables instead of the less variables,

Yes, ideally we would use CSS variables. However, the entire site style is ripe for a facelift. As I understand, the colors assigned to most/all variables are based on an obsolete "Photon" color palate. I'm happy to take a slight detour to replace all LESS vars with CSS vars, but I wonder if the app would be better served with a deeper look at style. Also, the LESS compiler doesn't offer automatic variable conversion, so the variable work would need to be manual.

In defining scope, I decided to focus more on build-tooling, architecture, dependencies, etc, leaving facelifts for future tasks. (Related, jQuery should be replaced too, but also probably out of scope for this first pass.) I intended this refactor to have a light touch on script/style, in order to confirm everything still works as expected with new tooling in place.

Happy to continue this discussion if you feel we should spend more time on CSS vars as condition for migration!

[willkg]

@smarnach I didn't realize you assigned this to yourself last week. Can you assign the review of this to me? I'm working with @toufali on this project and have a plan for validation already.

[smarnach]

@willkg Sure, I didn't mean to interfere.

[toufali]

@smarnach I appreciated hearing your thoughts! Thanks for the look 😎