feat! Dropping Sass support from builtin LTI block

[ttqureshi]

Dropping Sass Support from Built-in LTI Block

Tickets: #35570

Tasks:

• Convert Sass variable into css variables
• Compile the css files of the block following below steps.
  • Change this line to the following to avoid adding comments in the compiled css files. This change is only for compilation, revert it when done with compilation.

    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) 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 lti_block.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

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

Screenshots

[farhan]

PR seems great to me.
Good work 🌟

[farhan]

requested a change