removed the constraint to use latest version of libsass

[mraarif]

edx-platform is still using libsass version 0.10.0 that was released in 2015, this PR intends to upgrade libsas to use the latest version available i.e 0.20.1
since then there has been quite a few new rules/checks in SCSS that

1. don't allow using @extend inside media queries
2. fail while compiling sass if it can't find the target selector and requires !optional specified to avoid errors during compilation

I've added scss_modernizer.py to automatically select all @extend in scss files and add !optional as required by libsass

[mraarif]

jenkins run a11y

[mraarif]

jenkins run all

[mraarif]

jenkins run a11y

[mraarif]

after fixing the errors thrown by libsass it's throwing the following error:

21:34:54 ---> pavelib.assets.compile_sass
21:34:54 Traceback (most recent call last):
21:34:54 File "/home/jenkins/edx-venv-3.5/edx-venv/lib/python3.5/site-packages/paver/tasks.py", line 201, in _run_task
21:34:54 return do_task()
21:34:54 File "/home/jenkins/edx-venv-3.5/edx-venv/lib/python3.5/site-packages/paver/tasks.py", line 198, in do_task
21:34:54 return func(**kw)
21:34:54 File "/home/jenkins/workspace/edx-platform-accessibility-pr/edx-platform/pavelib/utils/timer.py", line 40, in timed
21:34:54 return wrapped(*args, **kwargs)
21:34:54 File "/home/jenkins/workspace/edx-platform-accessibility-pr/edx-platform/pavelib/assets.py", line 464, in compile_sass
21:34:54 timing_info=timing_info
21:34:54 File "/home/jenkins/workspace/edx-platform-accessibility-pr/edx-platform/pavelib/assets.py", line 548, in _compile_sass
21:34:54 output_style=output_style,
21:34:54 File "/home/jenkins/edx-venv-3.5/edx-venv/lib/python3.5/site-packages/sass.py", line 738, in compile
21:34:54 raise CompileError(v)
21:34:54 sass.CompileError: Internal Error: Unable to allocate memory: std::bad_alloc

I'm assuming the footprint of changes in this PR is way too much for libsass to handle.

[abutterworth]

I don't fully understand why adding !optional is desirable. Many of these @extends seem like they are not optional and that the UI would appear broken without them. Can you expand on the reasoning here?

Dart sass is the new preferred implementation of SASS (see docs: https://sass-lang.com/dart-sass). If you're looking to make an upgrade and swapping Libsass for Dart SASS isn't a huge lift that would be an ideal route to go since we'll need to do that eventually anyway.

[mraarif]

@abutterworth it looks like Dart Sass doesn't have python implementation available, we'd need NodsJs installation to be part of every build to compile .scss files (assuming we can replace libsass with Dart Sass) ... @jmbowman what are your thoughts on this?

[jmbowman]

As far as I can tell, we only use libsass in one place in edx-platform, and that's a helper function to compile a directory of SASS files to CSS with specified options: https://github.com/edx/edx-platform/blob/master/pavelib/assets.py#L544-L549 . I'm guessing that should be pretty straightforward to convert to a shell command using Dart SASS instead; @abutterworth do you think we should install the standalone package from GitHub as described on https://sass-lang.com/install ? Sounds like that should yield better performance than the npm package, and static asset compilation is really slow in edx-platform.

[mraarif]

jenkins run all

[edx-status-bot]

Your PR has finished running tests. The following contexts failed:

• jenkins/python-3.8/a11y
• jenkins/python-3.8/quality
• jenkins/js
• jenkins/a11y
• jenkins/quality
• jenkins/python

[arch-bom-gocd-alerts]

📣 💥 Heads-up: You must either rebase onto master or merge master into your branch to avoid breaking the build.

We recently removed diff-quality and introduced lint-amnesty. This means that the automated quality check that has run on your branch doesn't work the same way it will on master. If you have introduced any quality failures, they might pass on the PR but then break the build on master.

This branch has been detected to not have commit 2e33565 as an ancestor. Here's how to see for yourself:

git merge-base --is-ancestor 2e335653 BOM-1840 && echo "You're all set" || echo "Please rebase onto master or merge master to your branch"

If you have any questions, please reach out to the Architecture team (either #edx-shared-architecture on Open edX Slack or #architecture on edX internal).

[jmbowman]

@abutterworth @davidjoy Any feedback on my previous question on this PR? We still need to upgrade or replace this package.

[abutterworth]

@jmbowman There's a series of PRs to upgrade libsass to latest and update our theme and styles to support the latest.

I think we should upgrade to Dart SASS soon, but I think we should take these first iterative steps on libsass/bootstrap/paragon upgrade:

• https://github.com/edx/edx-platform/pull/27683
• https://github.com/edx/edx-themes/pull/737
• https://github.com/edx/edx-platform/pull/27751
• https://github.com/edx/edx-platform/pull/27771

Dart SASS includes updates to the way SASS can import partials via @use and @forward that may help us reduce css bloat and untangle some of our styles. This is work I am not planning to push forward. Not sure who at edX would be responsible.

[mraarif]

closing in favor of @abutterworth 's work on upgrading libsass