open-duelyst/duelyst

[P3] SASS warnings during yarn build

Open

#124 opened on Oct 13, 2022

View on GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (3,443 stars) (526 forks)batch import
bugfrontendhelp wanted

Description

Summary

[21:01:09] Starting 'html'...                                                                                                                                                                                                                                                                                                                                        [73/893]
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(30em, 14) or calc(30em / 14)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
12 │ $fa-li-width:         (30em / 14) !default;
   │                        ^^^^^^^^^
   ╵
    node_modules/@bower_components/font-awesome/scss/_variables.scss 12:24  @import
    node_modules/@bower_components/font-awesome/scss/font-awesome.scss 6:9  @import
    app/ui/styles/fonts/fonts.scss 4:9                                      @import
    app/ui/styles/application.scss 5:9                                      root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4em, 3) or calc(4em / 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
6 │   font-size: (4em / 3);
  │               ^^^^^^^
  ╵
    node_modules/@bower_components/font-awesome/scss/_larger.scss 6:15       @import
    node_modules/@bower_components/font-awesome/scss/font-awesome.scss 10:9  @import
    app/ui/styles/fonts/fonts.scss 4:9                                       @import
    app/ui/styles/application.scss 5:9                                       root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(3em, 4) or calc(3em / 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
7 │   line-height: (3em / 4);
  │                 ^^^^^^^
  ╵
    node_modules/@bower_components/font-awesome/scss/_larger.scss 7:17       @import
    node_modules/@bower_components/font-awesome/scss/font-awesome.scss 10:9  @import
    app/ui/styles/fonts/fonts.scss 4:9                                       @import
    app/ui/styles/application.scss 5:9                                       root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(18em, 14) or calc(18em / 14)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
4 │   width: (18em / 14);
  │           ^^^^^^^^^
  ╵
    node_modules/@bower_components/font-awesome/scss/_fixed-width.scss 4:11  @import
    node_modules/@bower_components/font-awesome/scss/font-awesome.scss 11:9  @import
    app/ui/styles/fonts/fonts.scss 4:9                                       @import
    app/ui/styles/application.scss 5:9                                       root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(2em, 14) or calc(2em / 14)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
14 │   top: (2em / 14);
   │         ^^^^^^^^
   ╵
    node_modules/@bower_components/font-awesome/scss/_list.scss 14:9         @import
    node_modules/@bower_components/font-awesome/scss/font-awesome.scss 12:9  @import
    app/ui/styles/fonts/fonts.scss 4:9                                       @import
    app/ui/styles/application.scss 5:9                                       root stylesheet

Warning: 6 repetitive deprecation warnings omitted

Impacted services

  • The frontend app
  • The game servers
  • Game builds or automation scripts
  • Tests or Github Actions
  • Infrastructure (Terraform)

Steps to reproduce

  1. yarn build

Contributor guide

Tech stack
cssjavascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
1
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic understanding of SASSfamiliarity with yarn build process
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
90
Research direction
The deprecation warnings originate from the font awesome SCSS files in node modules/@bower components/font awesome/. The fix could involve updating the font awesome bower dependency to a version that uses math.div or calc(), or using the Sass migrator tool (https://sass lang.com/d/slash div) to automatically update the files. Since the files are in node modules, modifying them directly is not ideal; consider checking if a newer version of font awesome is available and updating the bower dependency in the project's configuration. Alternatively, the project could add a linting or build step to suppress these warnings until a proper fix is applied.