Replace builtin blocks Sass with vanilla CSS

[farhan]

Parent story: #35300

Copy the following tasks into the PR description of the XBlock and update the status on PR.

Tasks:

• Convert Sass variable into css variables

• Compile the css file of the block following given steps.

  • 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

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

• Replace add_sass_to_fragment to add_css_to_fragment in blocks .py file

• 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:

• Run npm run build to run webpack and compile sass files.
• Run ./manage.py lms collectstatic in lms shell to re-collect static files.
• 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

Reference PR:

Here is initial reference PR [Some the changes are only 1 time changes so don't need them in next block PR's.]

Tasks

Beta Give feedback

1. feat! Dropping Sass support from builtin video block #35506
   create-sandbox hacktoberfest-accepted +2
   
2. feat!: Dropping Sass support from builtin wordcloud block #35519
   hacktoberfest-accepted +1
3. feat!: Dropping Sass support from builtin annotatable block #35520
   hacktoberfest-accepted +1
4. feat! Dropping Sass support from builtin html block #35515
   hacktoberfest-accepted +1
5. feat!: Dropping Sass support from builtin poll block #35516
   +0
6. feat!: Dropping Sass support from builtin custom tag block #35517
   +0