chore: use sass instead of node-sass

[hamid-deriv]

Changes:

Using sass instead of node-sass:

BREAKING CHANGES which is handled in the PR.

Screenshots:

Please provide some screenshots of the change.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 23, 2023 7:51am

[hamid-deriv]

Using parent variable to fix this breaking change.

[hamid-deriv]

Extending Compound classes (doc) is deprecated and not supported in sass.

[hamid-deriv]

Create a class to be able to use it instead of extending the compound class.

[codecov]

Codecov Report

Merging #8916 (20abe9a) into master (d5c38a0) will increase coverage by 20.01%.
Report is 245 commits behind head on master.
The diff coverage is n/a.

❗ Current head 20abe9a differs from pull request most recent head b0b91bc. Consider uploading reports for the commit b0b91bc to get more accurate results

@@             Coverage Diff             @@
##           master    #8916       +/-   ##
===========================================
+ Coverage    0.05%   20.07%   +20.01%     
===========================================
  Files         117     1827     +1710     
  Lines        3425    41459    +38034     
  Branches      893     8240     +7347     
===========================================
+ Hits            2     8322     +8320     
- Misses       3423    32277    +28854     
- Partials        0      860      +860     

see 1820 files with indirect coverage changes

[github-actions]

A production App ID was automatically generated for this PR. (log)

• PR: chore: use sass instead of node-sass #8916
• URLs:
  • w/ App ID + Server: https://deriv-app-git-fork-hamid-deriv-hamid-pocupgrade-to-sass.binary.sx?qa_server=red.binaryws.com&app_id=24073
  • Original: https://deriv-app-git-fork-hamid-deriv-hamid-pocupgrade-to-sass.binary.sx
• App ID: 24073

Click here to copy & paste above information.

- **PR**: [https://github.com/binary-com/deriv-app/pull/8916](https://github.com/binary-com/deriv-app/pull/8916)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-hamid-deriv-hamid-pocupgrade-to-sass.binary.sx?qa_server=red.binaryws.com&app_id=24073
    - **Original**: https://deriv-app-git-fork-hamid-deriv-hamid-pocupgrade-to-sass.binary.sx
- **App ID**: `24073`

[github-actions]

🚨 Lighthouse report for the changes in this PR:

Category	Score
🔺 Performance	21
🟧 Accessibility	75
🟢 Best practices	92
🟧 SEO	85
🟢 PWA	90

Lighthouse ran with https://deriv-app-git-fork-hamid-deriv-hamid-pocupgrade-to-sass.binary.sx/

[farzin-deriv]

@hamid-deriv Should we update the readme file? It's mentioning node-sass in some places 🤔

[hamid-deriv]

@hamid-deriv Should we update the readme file? It's mentioning node-sass in some places 🤔

@farzin-deriv Remove the node-sass item from the README FAQ part 👍

[review-deriv]

AI Review (AI review can be wrong. Do not use it as the only source of feedback)

The changes made in the pull request largely revolve around:

1. Replacing the npm package node-sass with sass. This switch is generally beneficial as node-sass is deprecated and sass is more regularly maintained and offers more features. However, without knowing the context of how sass is used throughout the rest of your project, it's difficult to foresee what potential issues may arise from this change.

2. Renaming the extension point for SASS styles. There was a major change in class styles that extend from other classes. All classes that were extending classes like .active, .disabled, .white are changed to .active-active, .disabled-disabled, .white-white which may cause a change of style throughout the application.

If no logical errors occurred from renaming these extension points and the new sass package fits the needs of the project and is compatible with any other relevant code or packages, there don't appear to be any logical errors in this pull request. However, it would be advisable to thoroughly test the application after these changes have been made to ensure everything works as expected and no styling or compilation issues have arisen from the changes.

[review-deriv]

AI Review (AI review can be wrong. Do not use it as the only source of feedback)

The provided code involves updates to project dependency versions in various package.json files. Specifically, it replaces the "node-sass" package with the "sass" package.

Security Issues:

There are no immediate security issues visible in the code provided. Both "sass" and "node-sass" are well known packages whose core functional purpose is to compile SCSS to CSS. However, it's worth noting that regular updating of dependencies like this is an important part of maintaining secure code as it reduces the window of opportunity for potential security exploits in out-of-date packages.

Error Handling Issues:

There no error handling issues present as well as there isn't any explicit error handling code present in the provided snippet.

Logic Issues:

There are no logical issues visible in the code provided. The switch from one dependency to another seems reasonable, as the "node-sass" package was deprecated in favor of the "sass" package.

Summary:

This code performs necessary and valid updates on project dependencies from an outdated, deprecated package to its current, maintained alternative. There are no apparent security issues, logic errors, or error handling issues. The code updates are consistent across multiple projects, indicating good practice in maintaining uniformity in the codebase. However, it would be advised to verify that this change does not break any existing functionality as the newer versions may contain changes that are incompatible with the current implementation.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication