Remove usage of Less for styling in favour of SCSS

[rtibbles]

Observed behavior

Studio currently has three vestigial less style files that necessitate us adding additional tooling to handle.

• contentcuration/contentcuration/frontend/shared/styles/main.less
• contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/image-upload/style.less
• contentcuration/contentcuration/frontend/shared/views/MarkdownEditor/plugins/formulas/style.less

Unfortunately, there are also many more "less" style blocks in our Vue.js components that also need to be updated.

For the most part of a lot of these are probably SCSS compatible (and some appear to be simply plain CSS), but each would need to be checked and updated.

Expected behavior

Probably the most foolproof procedure for converting each LESS block here will be:

First compile the LESS to CSS (can either use a web tool like https://lesscss.org/less-preview/ or use the LESS cli/API in local development).
Then if there are any obvious ways to use SCSS syntax to cleanup the resulting CSS, this can be applied in a second step.

Once all the files have been converted, then any less related tooling in our build pipeline can be removed, and any less related dependencies removed using yarn.

[Yadnyesh-More]

hello @rtibbles can you assign this to me?

[chetan21122004]

/assign

[akolson]

Hi @Yadnyesh-More. Thank you! I have assigned it to you. Be sure to reach out to reach out to @rtibbles incase its not clear what needs to be done while resolving the issue.

Apologies @chetan21122004. As @Yadnyesh-More requested first, the issue has been assigned to him. I'll be sure to let you know incase it's available again.

[akolson]

@chetan21122004 We currently have other contributing opportunities in three repositories. You can see the contributing guidelines including links to issues suitable for contribution for each repository here:

Kolibri Contributing Guidelines
Kolibri Design System Contributing Guidelines
Studio Contributing Guidelines

[chetan21122004]

@akolson ok I will, Thanks ✨

[Yadnyesh-More]

hello @rtibbles Due to some unforeseen reasons, I won’t be able to work on the assigned task at the moment. I kindly request you to unassign it so someone else can take it up and ensure progress.

[AlexVelezLl]

Hi @Yadnyesh-More! Thanks for letting us know. No worries :), I will unassign this issue from you.

[adibmbrk]

Hi @rtibbles @AlexVelezLl , can i work on this issue?

[MisRob]

Hi @adibmbrk, thank you for volunteering! I will assign you.

[MisRob]

Hi @adibmbrk, I wanted to mention that Learning Equality will be closed from December 23 to January 5.

[shruti862]

@adibmbrk Are you still working on this issue?

[adibmbrk]

hi @shruti862 , yes im working on this issue

[Abhishek-Punhani]

@adibmbrk Are you still working on this issue?

[Abhishek-Punhani]

I guess @adibmbrk is not working on this issue, Can I work on it instead?

[adibmbrk]

Hi, @MisRob @Abhishek-Punhani Sorry for the delay on my end, it was the holiday season, so i was on vacation. However now i'm back and the PR is ready for review.

[MisRob]

Thanks @adibmbrk! We will review. In your pull request description, would you mention how you found the styles to be updated and if there are still some places left to be addressed in Studio or if you think that's all of them? It's not clear to me whether your work is meant to close this issue completely or if it rather solves it partially. Both would be fine, I'd just like to have clarity where things are. Much appreciated

[adibmbrk]

@MisRob I have updated the PR , and addressed the concerns in the PR itself.

[MisRob]

Thank you @adibmbrk, that's helpful

[adibmbrk]

Hi @MisRob @akolson @nucleogenesis,

I have made PR's migrating less to css, I plan to do it in several phases. I found less styles being used mainly in the contentcuration/frontend directory. Therefore I broke the task down into several sub tasks based on the folder structure.

• Shared
• Accounts
• Administration
• Channel Edit
• Channel List

After doing the above, I plan to

• Remove build tooling related to less

I hope this plan communicates my approach to resolving this issue. Let me know if you have any questions or suggestions.
Thanks!

[akolson]

Hey @adibmbrk, Thank you for the breakdown. I have gone through what needs to be migrated and I think this could comfortably be done in just one PR, without the need to split them. I also think handling this as one PR provide benefits especially when it comes to the testing of the changes, continuity and also the much needed context. But if you prefer to proceed with splitting of the the tasks, thats fine too as pointed out by Misha. cc @MisRob

[adibmbrk]

Hey @akolson @MisRob,

The PR is ready for review, I have also updated the checklist in the migration plan i created above. I decided not to breakdown the task into several PRs owing to difficulties in testing. Please let me know if there are any clarifications during the review process.