Fix sass division deprecation #17940

rafaelmaeuer · 2021-05-26T15:57:26Z

I understand that:

I'm submitting this PR for reference only. It shows an example of what I'd like to see changed but
I understand that it will not be merged and I will not be listed as a contributor on this project.

This PR fixes the outstanding deprecation of / division which will be removed in Dart Sass 2.0.0.
Building this package with webpack gives the following warning when using sass ^1.33.0:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(20em, 16)

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

   ╷
12 │ $fa-fw-width:          (20em / 16);
   │                         ^^^^^^^^^
   ╵
    node_modules/@fortawesome/fontawesome-free/scss/_variables.scss 12:25  @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 5:9   @import
    style/fontawesome.scss 2:9                                             root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4em, 3)

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

  ╷
6 │   font-size: (4em / 3);
  │               ^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_larger.scss 6:15     @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 8:9  @import
    style/fontawesome.scss 2:9                                            root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(3em, 4)

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

  ╷
7 │   line-height: (3em / 4);
  │                 ^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_larger.scss 7:17     @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 8:9  @import
    style/fontawesome.scss 2:9                                            root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($fa-li-width * 5, 4)

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

  ╷
6 │   margin-left: $fa-li-width * 5/4;
  │                ^^^^^^^^^^^^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_list.scss 6:16        @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 10:9  @import
    style/fontawesome.scss 2:9                                             root stylesheet

The changes made in this PR conform to the sass deprecation guide:
https://sass-lang.com/documentation/breaking-changes/slash-div

tagliala · 2021-05-26T16:10:08Z

Thanks. Can't merge, this should be fixed upstream

tagliala · 2021-05-30T09:30:52Z

btw this change will affect node-sass compatibility (and break a lot of setups), ref: twbs/bootstrap#34051

For the moment, I suggest this: twbs/bootstrap#34051 (comment)

robmadole · 2021-06-03T15:16:52Z

Thanks @rafaelmaeuer for the report and PR. But as @tagliala we'll have to consider this one more carefully. We want to support both node-sass and sass (Dart version). So this will take some careful thought. We're working on it.

niektenhoopen · 2021-06-08T08:47:29Z

@robmadole Isn't node-sass deprecated? (source: https://www.npmjs.com/package/node-sass => https://sass-lang.com/blog/libsass-is-deprecated)

wunc · 2021-06-09T23:05:21Z

@rafaelmaeuer @robmadole I think changing the division to multiplication by decimals would also solve the deprecation while maintaining node-sass compatibility, i.e. no need to use the dart-sass specific math.div() function?

For example, just change line-height: (3em / 4) to line-height: (3em * 0.25)

rafaelmaeuer · 2021-06-10T00:43:50Z

@wunc thanks, this is a really nice suggestion, I do prefer multiplication instead of division in general. I will update my PR regardingly.

robmadole · 2021-06-10T13:23:13Z

@rafaelmaeuer no need to update the PR. The files for this repository are built using something else. We can't merge your changes.

nurdism · 2021-06-11T17:27:43Z

Could take the same approach angular took by adding a polyfill, something like this:

@function private-div($a, $b) {
  @if (meta.function-exists('div', 'math')) {
    @return math.div($a, $b);
  }
  @else {
    @return $a / $b;
  }
}

angular/components@a4043f4#diff-4b0d3692fae1e26970f5365a78db4ff81acb362f79ef12252081df8b285d38e8

tagliala · 2021-06-11T17:46:37Z

Could take the same approach angular took by adding a polyfill, something like this:

Does this work on libsass and ruby sass? I've tried on https://www.sassmeister.com/ against libsass 3.5.5 and it doesn't

nurdism · 2021-06-11T18:12:50Z

Could take the same approach angular took by adding a polyfill, something like this:

Does this work on libsass and ruby sass? I've tried on https://www.sassmeister.com/ against libsass 3.5.5 and it doesn't

hmmm your right, it doesn't work with libsass, looks like its a dartsass polyfill.

But libsass is deprecated, that being said, updating to dartsass is not hard at all, it should be a 1 - 1 API and most major loaders/packages support dartsass now. It may break some setups, but thats what comes with updating packages. Why support libsass when its been deprecated sense October (and ruby-sass in March of 2019).

tagliala · 2021-06-12T15:34:30Z

@nurdism yes, we know, but we would like to preserve the compatibility.

I would go for multiplications instead of divisions. In the upstream repository we have some complex mixins, but it looks to me that the output scss only contains 3 divisions

The only problematic division may be 4/3, but for the moment I would personally prefer to write 1.3333333333 rather than dropping libsass support

tagliala · 2021-06-14T10:18:09Z

The Bootstrap Team eventually re-implemented the division: twbs/bootstrap#34245

I think it is too much for FA's specific use case (4 / 3)

illdave · 2021-07-07T23:50:58Z

Thanks. Can't merge, this should be fixed upstream

For those of us older and apparently not hip enough developers, what does "fixed upstream" mean?

tagliala · 2021-07-08T06:30:18Z

Hi @illdave , this repository contains the code produced in a private repo responsible of building both Font Awesome Free and Pro.

What you see here is the result of a building process and any changes done to this repo will be lost, so we need to fix this issue in another repository

fxsalazar · 2021-07-14T09:45:18Z

Could we have at least the flag activated to reduce the noise in the logs ? #17940 (comment)

rafaelmaeuer · 2021-07-28T13:32:59Z

Just curious if there is any progress here in the meanwhile? Is there already an ETA for a fix in upstream?

tagliala · 2021-07-28T16:03:26Z

Hi,

Just curious if there is any progress here in the meanwhile?

Nope sorry

Is there already an ETA for a fix in upstream?

No ETA yet, all the efforts are directed towards FA6 at the moment

DB-CL · 2021-07-31T20:41:02Z

It may be useful to some people. You can patch the files on the fly with @wunc idea (multiplication instead of division).

on the root of your project create a patches folder
put a file named @fortawesome+fontawesome-free+5.15.3.patch inside this folder
insert this content into this file :

diff --git a/node_modules/@fortawesome/fontawesome-free/scss/_larger.scss b/node_modules/@fortawesome/fontawesome-free/scss/_larger.scss
index 27c2ad5..540612f 100644
--- a/node_modules/@fortawesome/fontawesome-free/scss/_larger.scss
+++ b/node_modules/@fortawesome/fontawesome-free/scss/_larger.scss
@@ -3,8 +3,8 @@
 
 // makes the font 33% larger relative to the icon container
 .#{$fa-css-prefix}-lg {
-  font-size: (4em / 3);
-  line-height: (3em / 4);
+  font-size: (4em * 0.3333333);
+  line-height: (3em * 0.25);
   vertical-align: -.0667em;
 }
 
diff --git a/node_modules/@fortawesome/fontawesome-free/scss/_list.scss b/node_modules/@fortawesome/fontawesome-free/scss/_list.scss
index 8ebf333..f78c1ca 100644
--- a/node_modules/@fortawesome/fontawesome-free/scss/_list.scss
+++ b/node_modules/@fortawesome/fontawesome-free/scss/_list.scss
@@ -3,7 +3,7 @@
 
 .#{$fa-css-prefix}-ul {
   list-style-type: none;
-  margin-left: $fa-li-width * 5/4;
+  margin-left: $fa-li-width * 1.25;
   padding-left: 0;
 
   > li { position: relative; }
diff --git a/node_modules/@fortawesome/fontawesome-free/scss/_variables.scss b/node_modules/@fortawesome/fontawesome-free/scss/_variables.scss
index 68a0750..2150342 100644
--- a/node_modules/@fortawesome/fontawesome-free/scss/_variables.scss
+++ b/node_modules/@fortawesome/fontawesome-free/scss/_variables.scss
@@ -9,7 +9,7 @@ $fa-version:           "5.15.3" !default;
 $fa-border-color:      #eee !default;
 $fa-inverse:           #fff !default;
 $fa-li-width:          2em !default;
-$fa-fw-width:          (20em / 16);
+$fa-fw-width:          (20em * 0.0625);
 $fa-primary-opacity:   1 !default;
 $fa-secondary-opacity: .4 !default;

and finally in your package.json add "postinstall": "npx patch-package" under the "scripts" section

This will automatically patch the files after a npm install and the deprecation warnings will disappear.

This is a temporary solution.

rafaelmaeuer · 2021-08-04T14:56:40Z

as for me copy & paste didn't work, here are the steps to patch it yourself:

install patch-package: ~~yarn add patch-package --dev~~ yarn add patch-package
add postinstall in package.json scripts: ~~"postinstall": "yarn patch-package"~~ "postinstall": "patch-package"
replace divisions by multiplications like Fix sass division deprecation #17940 (comment)
create patch: patch-package @fortawesome/fontawesome-free
apply changes: yarn

Edit: I replaced commands when you want to use patch-package with docker in prod builds
(read https://github.com/ds300/patch-package#dev-only-patches)

mletoullec · 2021-08-09T10:05:28Z

I'm sorry, but 1/3 is not worth 0.3333333.

You must use math.div (1, 3) instead

font-size: (4em / 3);

font-size: math.div(4em, 3);

tagliala · 2021-08-09T10:18:48Z

@mletoullec you can use math.div if you don't need libsass support

Otherwise, you can use 1.3333333333em directly or * 0.33333333333 (eleven 3s), since dart-sass is limited to 10 digits of precision and the output will be the same as 4em / 3

robmadole · 2021-08-18T15:35:35Z

Alright, folks. We are going to follow Bootstrap on this one and implement a divide function. We'll get this into 6 and 5. It will still support libsass (and all the other older implementations) and be dart-sass 2.0 compatible.

illdave · 2021-08-18T15:50:57Z

Awesome. Font Awesome.

kgrammer · 2021-09-15T10:41:16Z

Could we have at least the flag activated to reduce the noise in the logs ? #17940 (comment)

This is an older question, but for anyone still struggling with the deprecation noise, with Dart Sass you can add the "--quiet" option and the deprecation warning will be suppressed.

realtebo · 2021-09-29T10:17:24Z

Please backport fixes to FA 4
A lot of old themese in production builds cannot be upgraded and are Fa4 -based

jasonlundien · 2021-10-01T21:19:15Z

A fix was released with 6.0.0-beta2.

bobbyg603 · 2021-12-08T19:24:36Z

Alright, folks. We are going to follow Bootstrap on this one and implement a divide function. We'll get this into 6 and 5. It will still support libsass (and all the other older implementations) and be dart-sass 2.0 compatible.

Thanks for adding this to the 6.0.0-beta2 release! Are there still plans to add this to 5? @jasonlundien @robmadole

robmadole · 2021-12-10T15:13:07Z

@bobbyg603 we will release this for 5 but right now we are hyper-focused on 6. So I don't have a schedule for a 5 release at the moment.

bobbyg603 · 2021-12-10T22:25:34Z

@robmadole totally understand, thanks for the heads up!

jcaianirh · 2022-01-07T17:41:39Z

Thanks for adding this to the 6.0.0-beta2 release! Are there still plans to add this to 5? @jasonlundien @robmadole

+1 for seeing this backported to 5 @robmadole

V-iktor · 2022-12-10T19:52:57Z

SassError: Undefined operation "2em * fa-divide(5, 4)"

Using nextjs default sass compiler, any ideas?

rafaelmaeuer added 2 commits May 26, 2021 16:39

fix sass division deprecation

da545a2

add 'sass:math' imports

b143573

tagliala assigned robmadole May 26, 2021

tagliala mentioned this pull request May 27, 2021

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. [Fixed in FA6 beta] #17946

Open

7 tasks

tagliala mentioned this pull request Jun 25, 2021

Sass deprecation warning #18029

Closed

7 tasks

thednp mentioned this pull request Sep 22, 2021

[4.1-dev] Fixing SCSS issues with division deprecation and math.div() joomla/joomla-cms#35645

Closed

thednp mentioned this pull request Sep 22, 2021

[4.0-dev] Fixing SCSS issues with division deprecation and math.div() joomla/joomla-cms#35648

Closed

tagliala closed this Oct 2, 2021

vinnycodes mentioned this pull request Oct 18, 2021

Font Awesome v5 Sass Div Deprecation #18371

Closed

Lenivaya mentioned this pull request Oct 26, 2021

Feature/as library usage data-story-org/data-story#256

Merged

Donov4n mentioned this pull request Nov 16, 2021

Use math.div instead of old division operator lipis/flag-icons#838

Merged

Donov4n mentioned this pull request Nov 24, 2021

Incompatibility with node-sass lipis/flag-icons#891

Closed

tagliala mentioned this pull request Oct 18, 2024

Bug: Deprecation Warnings on @import and unquote using sass 1.80.xxx #20389

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix sass division deprecation #17940

Fix sass division deprecation #17940

rafaelmaeuer commented May 26, 2021

tagliala commented May 26, 2021

tagliala commented May 30, 2021

robmadole commented Jun 3, 2021

niektenhoopen commented Jun 8, 2021

wunc commented Jun 9, 2021

rafaelmaeuer commented Jun 10, 2021

robmadole commented Jun 10, 2021

nurdism commented Jun 11, 2021

tagliala commented Jun 11, 2021

nurdism commented Jun 11, 2021 •

edited

Loading

tagliala commented Jun 12, 2021

tagliala commented Jun 14, 2021

illdave commented Jul 7, 2021

tagliala commented Jul 8, 2021

fxsalazar commented Jul 14, 2021

rafaelmaeuer commented Jul 28, 2021

tagliala commented Jul 28, 2021

DB-CL commented Jul 31, 2021 •

edited

Loading

rafaelmaeuer commented Aug 4, 2021 •

edited

Loading

mletoullec commented Aug 9, 2021

tagliala commented Aug 9, 2021 •

edited

Loading

robmadole commented Aug 18, 2021

illdave commented Aug 18, 2021 via email

kgrammer commented Sep 15, 2021 •

edited

Loading

realtebo commented Sep 29, 2021

jasonlundien commented Oct 1, 2021

bobbyg603 commented Dec 8, 2021

robmadole commented Dec 10, 2021

bobbyg603 commented Dec 10, 2021

jcaianirh commented Jan 7, 2022

V-iktor commented Dec 10, 2022

Fix sass division deprecation #17940

Fix sass division deprecation #17940

Conversation

rafaelmaeuer commented May 26, 2021

tagliala commented May 26, 2021

tagliala commented May 30, 2021

robmadole commented Jun 3, 2021

niektenhoopen commented Jun 8, 2021

wunc commented Jun 9, 2021

rafaelmaeuer commented Jun 10, 2021

robmadole commented Jun 10, 2021

nurdism commented Jun 11, 2021

tagliala commented Jun 11, 2021

nurdism commented Jun 11, 2021 • edited Loading

tagliala commented Jun 12, 2021

tagliala commented Jun 14, 2021

illdave commented Jul 7, 2021

tagliala commented Jul 8, 2021

fxsalazar commented Jul 14, 2021

rafaelmaeuer commented Jul 28, 2021

tagliala commented Jul 28, 2021

DB-CL commented Jul 31, 2021 • edited Loading

rafaelmaeuer commented Aug 4, 2021 • edited Loading

mletoullec commented Aug 9, 2021

tagliala commented Aug 9, 2021 • edited Loading

robmadole commented Aug 18, 2021

illdave commented Aug 18, 2021 via email

kgrammer commented Sep 15, 2021 • edited Loading

realtebo commented Sep 29, 2021

jasonlundien commented Oct 1, 2021

bobbyg603 commented Dec 8, 2021

robmadole commented Dec 10, 2021

bobbyg603 commented Dec 10, 2021

jcaianirh commented Jan 7, 2022

V-iktor commented Dec 10, 2022

nurdism commented Jun 11, 2021 •

edited

Loading

DB-CL commented Jul 31, 2021 •

edited

Loading

rafaelmaeuer commented Aug 4, 2021 •

edited

Loading

tagliala commented Aug 9, 2021 •

edited

Loading

kgrammer commented Sep 15, 2021 •

edited

Loading