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

farhan · 2024-11-02T07:35:25Z

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

Parent story: #35300

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

Testing Known Issues:

When I try to add any block from following entry pionts in editor, it throws error.

[
    "book",
    "customtag",
    "image",
    "custom_tag_template",
    "discuss",
    "slides",
    "videodev"
]

2024-11-06 22:09:43 Traceback (most recent call last):
2024-11-06 22:09:43   File "/openedx/edx-platform/cms/djangoapps/contentstore/views/preview.py", line 351, in get_preview_fragment
2024-11-06 22:09:43     fragment = block.render(preview_view, context)
2024-11-06 22:09:43                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-11-06 22:09:43   File "/openedx/venv/lib/python3.11/site-packages/xblock/core.py", line 818, in render
2024-11-06 22:09:43     return self.runtime.render(self, view, context)
2024-11-06 22:09:43            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-11-06 22:09:43   File "/openedx/edx-platform/xmodule/x_module.py", line 994, in render
2024-11-06 22:09:43     return super().render(block, view_name, context=context)
2024-11-06 22:09:43            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-11-06 22:09:43   File "/openedx/venv/lib/python3.11/site-packages/xblock/runtime.py", line 823, in render
2024-11-06 22:09:43     frag = view_fn(context)
2024-11-06 22:09:43            ^^^^^^^^^^^^^^^^
2024-11-06 22:09:43   File "/openedx/edx-platform/xmodule/vertical_block.py", line 224, in author_view
2024-11-06 22:09:43     self.render_children(context, fragment, can_reorder=True, can_add=True)
2024-11-06 22:09:43   File "/openedx/edx-platform/xmodule/studio_editable.py", line 30, in render_children
2024-11-06 22:09:43     rendered_child = child.render(StudioEditableBlock.get_preview_view_name(child), context)
2024-11-06 22:09:43                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-11-06 22:09:43   File "/openedx/venv/lib/python3.11/site-packages/xblock/core.py", line 818, in render
2024-11-06 22:09:43     return self.runtime.render(self, view, context)
2024-11-06 22:09:43            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-11-06 22:09:43   File "/openedx/edx-platform/xmodule/x_module.py", line 994, in render
2024-11-06 22:09:43     return super().render(block, view_name, context=context)
2024-11-06 22:09:43            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-11-06 22:09:43   File "/openedx/venv/lib/python3.11/site-packages/xblock/runtime.py", line 823, in render
2024-11-06 22:09:43     frag = view_fn(context)
2024-11-06 22:09:43            ^^^^^^^^^^^^^^^^
2024-11-06 22:09:43   File "/openedx/edx-platform/xmodule/template_block.py", line 114, in student_view
2024-11-06 22:09:43     fragment.add_content(self.rendered_html)
2024-11-06 22:09:43                          ^^^^^^^^^^^^^^^^^^
2024-11-06 22:09:43   File "/openedx/edx-platform/xmodule/template_block.py", line 107, in rendered_html
2024-11-06 22:09:43     return self.render_template(self.runtime, self.data)
2024-11-06 22:09:43            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-11-06 22:09:43   File "/openedx/edx-platform/xmodule/template_block.py", line 81, in render_template
2024-11-06 22:09:43     xmltree = etree.fromstring(xml_data)
2024-11-06 22:09:43               ^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-11-06 22:09:43   File "/openedx/edx-platform/openedx/core/lib/safe_lxml/xmlparser.py", line 128, in fromstring
2024-11-06 22:09:43     rootelement = _etree.fromstring(text, parser, base_url=base_url)
2024-11-06 22:09:43                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-11-06 22:09:43   File "src/lxml/etree.pyx", line 3264, in lxml.etree.fromstring
2024-11-06 22:09:43   File "src/lxml/parser.pxi", line 1916, in lxml.etree._parseMemoryDocument
2024-11-06 22:09:43   File "src/lxml/parser.pxi", line 1796, in lxml.etree._parseDoc
2024-11-06 22:09:43   File "src/lxml/parser.pxi", line 1085, in lxml.etree._BaseParser._parseUnicodeDoc
2024-11-06 22:09:43   File "src/lxml/parser.pxi", line 618, in lxml.etree._ParserContext._handleParseResultDoc
2024-11-06 22:09:43   File "src/lxml/parser.pxi", line 728, in lxml.etree._handleParseResult
2024-11-06 22:09:43   File "src/lxml/parser.pxi", line 657, in lxml.etree._raiseParseError
2024-11-06 22:09:43   File "<string>", line 1
2024-11-06 22:09:43 lxml.etree.XMLSyntaxError: Document is empty, line 1, column 1
2024-11-06 22:09:43 [06/Nov/2024 17:09:43] "GET /xblock/block-v1:edx+3+3+type@vertical+block@44306a226476427cb4ad0d9057fc3795/container_preview?_=1730912983221 HTTP/1.1" 200 631

open-craft-grove · 2024-11-04T13:50:39Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

open-craft-grove · 2024-11-08T05:20:35Z

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

kdmccormick

Hey @farhan , thanks for this PR as well as the error report on customtag. I'm still looking into whether customtag block needs to be fixed or removed, which I'd like to do before we merge this PR. I'll get back to you shortly.

kdmccormick

On second thought, after reviewing this PR's diff and realizing how small it is, I think it is safe to merge this PR now. The changes here shouldn't overlap at all with the backend error you're seeing. I'll look into the customtag error as a followup 👍🏻

kdmccormick · 2024-11-13T14:10:03Z

@farhan Glad to see this land. In the future, though, please merge edx-platform changes only within the time window. I know that the time window is mostly outside your working hours--always feel free to message Feanil or I and we're happy to merge any pre-approved PR during our working hours.

edx-pipeline-bot · 2024-11-13T15:31:38Z

2U Release Notice: This PR has been deployed to the edX production environment.

edx-pipeline-bot · 2024-11-13T15:31:38Z

2U Release Notice: This PR has been deployed to the edX production environment.

farhan mentioned this pull request Nov 2, 2024

feat!: Dropping Sass support from builtin custom tag block #35517

Closed

farhan force-pushed the farhan/sass-to-css-custom-tag-block-2 branch from a8236d6 to a8d22cc Compare November 4, 2024 10:50

farhan added the create-sandbox open-craft-grove should create a sandbox environment from this PR label Nov 4, 2024

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

b29a51e

farhan force-pushed the farhan/sass-to-css-custom-tag-block-2 branch from a8d22cc to b29a51e Compare November 8, 2024 04:40

farhan marked this pull request as ready for review November 8, 2024 12:33

ttqureshi approved these changes Nov 11, 2024

View reviewed changes

kdmccormick requested changes Nov 12, 2024

View reviewed changes

kdmccormick approved these changes Nov 12, 2024

View reviewed changes

kdmccormick mentioned this pull request Nov 12, 2024

Improve error for missing (Translate)CustomTagBlock template #35829

Open

farhan merged commit 0181068 into master Nov 13, 2024
51 checks passed

farhan deleted the farhan/sass-to-css-custom-tag-block-2 branch November 13, 2024 06:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

farhan commented Nov 2, 2024 •

edited

Loading

open-craft-grove commented Nov 4, 2024

open-craft-grove commented Nov 8, 2024

kdmccormick left a comment

kdmccormick left a comment

kdmccormick commented Nov 13, 2024

edx-pipeline-bot commented Nov 13, 2024

edx-pipeline-bot commented Nov 13, 2024

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

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

Conversation

farhan commented Nov 2, 2024 • edited Loading

Tasks:

Testing Notes:

Testing Known Issues:

open-craft-grove commented Nov 4, 2024

open-craft-grove commented Nov 8, 2024

kdmccormick left a comment

Choose a reason for hiding this comment

kdmccormick left a comment

Choose a reason for hiding this comment

kdmccormick commented Nov 13, 2024

edx-pipeline-bot commented Nov 13, 2024

edx-pipeline-bot commented Nov 13, 2024

farhan commented Nov 2, 2024 •

edited

Loading