feat!: Replace sass with vanilla css in custom tag block

[farhan]

feat!: Replace sass with vanilla css in custom tag block

Parent story: https://github.com/openedx/edx-platform/issues/35300

Tasks:

• [x] Convert Sass variable into css variables

• [x] Compile the css file of the block following given steps.

  • [x] Change this line to the following to avoid adding comments in the compiled css files

         source_comments: int = SASS_COMMENTS_NONE
    

  • [ ] Compile the sass to uncompressed CSS using following command

          npm run compile-sass-dev
    

  • [x] Copy the compiled XBlock linked CSS (lms/static/css/*Display.css and lms/static/css/*Editor.css) into xmodule/static/css-builtin-blocks.
  • [x] Format the CSS files using the editor.
  • [x] Add those CSS files to version control.

• [x] Replace add_sass_to_fragment to add_css_to_fragment in blocks .py file

• [x] Remove all .scss files linked to the block under xmodule/assets.

  • Make sure to remove the .scss file in a separate alone commit so reviewer could review scss changes and they stay in history.
  • Don't remove the scss file if its linked to some other block.

Testing Notes:

• [x] Run npm run build to run webpack and compile sass files.
• [x] Run ./manage.py lms collectstatic in lms shell to re-collect static files.
• [x] Run ./manage.py cms collectstatic in cms shell to re-collect static files.
• [ ] Verify the block's compiled css and the css global variables in the LMS
• [ ] Verify the block's compiled css and the css global variables in the Studio
• [ ] Test the XBlock rendering and User Experience in LMS
• [ ] Test the XBlock rendering and User Experience in Studio