minimal-mistakes icon indicating copy to clipboard operation
minimal-mistakes copied to clipboard

Deprecation Warning for sass

Open mattrose opened this issue 2 years ago • 17 comments

What happened?

  • Minimal Mistakes version: 4.24.0
  • Ruby gem or remote theme version: Ruby Gem
  • Jekyll version: 4.3.1
  • Git repository URL: private repo
  • Hosted on GitHub Pages (if yes provide URL to site): No
  • Operating system: Linux

Expected behavior

expected output: (ignore the remote: part)

remote: Configuration file: /home/mattrose/tmp/newrepo/_config.yml
remote:             Source: /home/mattrose/tmp/newrepo
remote:        Destination: /var/www/html
remote:  Incremental build: disabled. Enable with --incremental
remote:       Generating... 
remote:        Jekyll Feed: Generating feed for posts
remote:                     done in 1.481 seconds.
remote:  Auto-regeneration: disabled. Use --watch to enable.

Steps to reproduce the behavior

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

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

Recommendation: math.div($gutters, $container) or calc($gutters / $container)

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

    ╷
144 │   @return percentage($gutters / $container);
    │                      ^^^^^^^^^^^^^^^^^^^^^
    ╵
    ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/susy/susy/_su-math.scss 144:22         su-gutter()
    ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/susy/susy/_syntax-helpers.scss 190:11  su-call()
    ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/susy/susy/_api.scss 205:11             susy-gutter()
    ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/susy/susy/_unprefix.scss 37:11         gutter()
    ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/_archive.scss 166:20                          @content
    ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss 66:7       breakpoint()
    ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/_archive.scss 155:3                           @import
    minimal-mistakes.scss 38:9                                                                                      @import
    /netvol/home/mattrose/Code/newblog/assets/css/main.scss 4:9    

Other

Full out:

remote: Configuration file: /home/mattrose/tmp/newrepo/_config.yml
remote: To use retry middleware with Faraday v2.0+, install `faraday-retry` gem
remote:             Source: /home/mattrose/tmp/newrepo
remote:        Destination: /var/www/html
remote:  Incremental build: disabled. Enable with --incremental
remote:       Generating... 
remote:        Jekyll Feed: Generating feed for posts
remote: DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
remote: 
remote: Recommendation: math.div(9, 16)
remote: 
remote: More info and automated migrator: https://sass-lang.com/d/slash-div
remote: 
remote:    ╷
remote: 31 │ $mfp-iframe-ratio:                    9/16;                       // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
remote:    │                                       ^^^^
remote:    ╵
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/magnific-popup/_settings.scss 31:39      @import
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/magnific-popup/_magnific-popup.scss 3:9  @import
remote:     minimal-mistakes.scss 13:9                                                                                        @import
remote:     /home/mattrose/tmp/newrepo/assets/css/main.scss 4:9                                                               root stylesheet
remote: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
remote: 
remote: Recommendation: math.div($value, 16px) or calc($value / 16px)
remote: 
remote: More info and automated migrator: https://sass-lang.com/d/slash-div
remote: 
remote:    ╷
remote: 28 │     @return $value / 16px * 1em;
remote:    │             ^^^^^^^^^^^^^
remote:    ╵
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/breakpoint/_helpers.scss 28:13                base-conversion()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/breakpoint/_helpers.scss 20:13                breakpoint-to-base-em()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/breakpoint/parsers/single/_default.scss 8:29  breakpoint-parse-default()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/breakpoint/parsers/_single.scss 22:14         breakpoint-parse-single()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/breakpoint/_parsers.scss 153:18               breakpoint-parse()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/breakpoint/_parsers.scss 48:22                breakpoint()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss 46:16             breakpoint()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/_reset.scss 13:3                                     @import
remote:     minimal-mistakes.scss 18:9                                                                                             @import
remote:     /home/mattrose/tmp/newrepo/assets/css/main.scss 4:9                                                                    root stylesheet
remote: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
remote: 
remote: Recommendation: math.div(5px, 2) or calc(5px / 2)
remote: 
remote: More info and automated migrator: https://sass-lang.com/d/slash-div
remote: 
remote:    ╷
remote: 28 │     margin-bottom: (5px / 2);
remote:    │                     ^^^^^^^
remote:    ╵
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/_forms.scss 28:21  @import
remote:     minimal-mistakes.scss 20:9                                                           @import
remote:     /home/mattrose/tmp/newrepo/assets/css/main.scss 4:9                                  root stylesheet
remote: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
remote: 
remote: Recommendation: math.div(($red * 299) + ($green * 587) + ($blue * 114), 1000) or calc((($red * 299) + ($green * 587) + ($blue * 114)) / 1000)
remote: 
remote: More info and automated migrator: https://sass-lang.com/d/slash-div
remote: 
remote:    ╷
remote: 68 │   $yiq: (($red*299)+($green*587)+($blue*114))/1000;
remote:    │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
remote:    ╵
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/_mixins.scss 68:9   yiq-is-light()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/_mixins.scss 81:14  yiq-contrast-color()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/_mixins.scss 91:10  yiq-contrasted()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/_buttons.scss 46:7  @import
remote:     minimal-mistakes.scss 25:9                                                            @import
remote:     /home/mattrose/tmp/newrepo/assets/css/main.scss 4:9                                   root stylesheet
remote: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
remote: 
remote: Recommendation: math.div($span-width, $container) or calc($span-width / $container)
remote: 
remote: More info and automated migrator: https://sass-lang.com/d/slash-div
remote: 
remote:    ╷
remote: 93 │     @return percentage($span-width / $container);
remote:    │                        ^^^^^^^^^^^^^^^^^^^^^^^^
remote:    ╵
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/susy/susy/_su-math.scss 93:24          su-span()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/susy/susy/_syntax-helpers.scss 190:11  su-call()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/susy/susy/_api.scss 146:13             susy-span()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/susy/susy/_unprefix.scss 19:11         span()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/_utilities.scss 185:24                        @content
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss 66:7       breakpoint()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/_utilities.scss 184:3                         @import
remote:     minimal-mistakes.scss 34:9                                                                                      @import
remote:     /home/mattrose/tmp/newrepo/assets/css/main.scss 4:9                                                             root stylesheet
remote: DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
remote: 
remote: Recommendation: math.div($gutters, $container) or calc($gutters / $container)
remote: 
remote: More info and automated migrator: https://sass-lang.com/d/slash-div
remote: 
remote:     ╷
remote: 144 │   @return percentage($gutters / $container);
remote:     │                      ^^^^^^^^^^^^^^^^^^^^^
remote:     ╵
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/susy/susy/_su-math.scss 144:22         su-gutter()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/susy/susy/_syntax-helpers.scss 190:11  su-call()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/susy/susy/_api.scss 205:11             susy-gutter()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/susy/susy/_unprefix.scss 37:11         gutter()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/_archive.scss 166:20                          @content
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss 66:7       breakpoint()
remote:     ../../../../minimal-mistakes-jekyll-4.24.0/_sass/minimal-mistakes/_archive.scss 155:3                           @import
remote:     minimal-mistakes.scss 38:9                                                                                      @import
remote:     /home/mattrose/tmp/newrepo/assets/css/main.scss 4:9                                                             root stylesheet
remote:                     done in 2.493 seconds.
remote:  Auto-regeneration: disabled. Use --watch to enable.

mattrose avatar Dec 25 '22 20:12 mattrose

I see this too. Would you appreciate a PR for this? I can do it.

ivanoats avatar Dec 30 '22 17:12 ivanoats

yes, me too

awesomebloging avatar Dec 31 '22 14:12 awesomebloging

same

team-community avatar Jan 03 '23 11:01 team-community

I see this too. Would you appreciate a PR for this? I can do it.

I would love a PR. I could struggle through it, but you could probably do a much better job of it.

mattrose avatar Jan 03 '23 23:01 mattrose

ok, @mattrose, to be specific, I was asking the maintainer of the repo @mmistakes if he would accept one, because I would like to see if it's worth the effort.

ivanoats avatar Jan 04 '23 01:01 ivanoats

I saw similar issues after doing a bundle update

cjerrington avatar Jan 04 '23 06:01 cjerrington

jekyll-sass-converter was updated to use a different implimentation of Sass. This is why you're seeing warnings and errors because the Sass written for this theme uses the Ruby version (now deprecated) and would need to be refactored to support Dart Sass.

The problem with doing this is remote theme version which leans on the github-pages gem doesn't use the latest and greatest version of Jekyll or jekyll-sass-converter. So I don't think the Sass can be updated as it would break for the tons of users building sites on GH Pages.

The solution is to lock jekyll-sass-converter to the previous version. https://github.com/jekyll/jekyll-sass-converter/issues/145#issuecomment-1363069829

mmistakes avatar Jan 04 '23 14:01 mmistakes

remote theme version which leans on the github-pages gem doesn't use the latest and greatest version of Jekyll or jekyll-sass-converter.

I doubt that github-pages is ever going to bump to Jekyll 4+ and adopt major releases of plugins now that they have GitHub Actions to ensure sandboxed builds.

Besides, remote-theme users have the option to lock to a working git ref of the theme as well.

ashmaroli avatar Jan 05 '23 06:01 ashmaroli

@ashmaroli Completely agree on that. Just makes my head hurt thinking about the thousands of users who have no clue they can lock a remote-theme or that they'd be better served using GitHub Actions and the latest version of Jekyll instead of relying on github-pages and older workflows.

Which means the potential for a lot of broken site builds.

mmistakes avatar Jan 05 '23 15:01 mmistakes

+1

wildone avatar Jan 19 '23 04:01 wildone

To anyone interested in submitting a pull request, you may try updating the theme documentation to recommend setting quiet_deps: true to the sass config object:

# _config.yml

sass:
  quiet_deps: true    # Disable printing deprecation warnings to terminal

ashmaroli avatar Jan 19 '23 07:01 ashmaroli

I guess the question of whether to update this theme to support dart sass or not comes down to whether the theme should pin itself to old versions of dependencies to remain compatible with old gh_pages users, or should look to move forward with dependencies.

IMHO, I think there is a strong argument to move forward with dependencies. New users should build github pages via actions, so things will work fine for them. Existing users using actions are also OK with this. It's only existing users using the out dated way of building GH pages that are affected. I'd document they have two options:

  1. Switch to using actions
  2. Pin the theme version.

Personally, keeping this theme up to date is much better than pinning it in the past, just for the sake of users using outdated ways of using the theme, who have the two above choices to work around things.

To put this another way, you've got two broad sets of users: those updating dependencies & processes and those that don't. The first group is being affected by this issue as they're trying to do the right thing and keep things up to date. Where are the second group probably are mostly unaware of the issue as they don't update their dependencies, including the theme version.

big-andy-coates avatar Feb 18 '23 12:02 big-andy-coates

I am also in favour of updating to the newer versions, as over time more and more other features will require them.

It would be good to get a maintainer call on this before someone does the work.

pnorman avatar Dec 24 '23 08:12 pnorman

So what is the recommended path forward on this? I saw some suggestions, but not sure what the best path forward is. I can certainly silence the deprecation warnings (and will temporarily), but that seems fraught with peril.

jlconlin avatar Feb 13 '24 18:02 jlconlin

I wonder how many people buying him a coffee would be enough to encourage him to spend some time on this? :)

big-andy-coates avatar Feb 14 '24 11:02 big-andy-coates

add @use "sass:math"; in minimal-mistakes.scss image and change all a / b to math.div(a, b)

DuanShuSheng avatar Mar 13 '24 04:03 DuanShuSheng

add @use "sass:math"; in minimal-mistakes.scss image and change all a / b to math.div(a, b)

Does this work with sassc though?

lifehackerhansol avatar Apr 01 '24 01:04 lifehackerhansol