Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deprecation Warning for sass #4054

Open
mattrose opened this issue Dec 25, 2022 · 17 comments
Open

Deprecation Warning for sass #4054

mattrose opened this issue Dec 25, 2022 · 17 comments

Comments

@mattrose
Copy link

mattrose commented Dec 25, 2022

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.
@ivanoats
Copy link
Contributor

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

@awesomebloging
Copy link

yes, me too

@team-community
Copy link

same

@mattrose
Copy link
Author

mattrose commented Jan 3, 2023

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.

@ivanoats
Copy link
Contributor

ivanoats commented Jan 4, 2023

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.

@cjerrington
Copy link

I saw similar issues after doing a bundle update

@mmistakes
Copy link
Owner

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.
jekyll/jekyll-sass-converter#145 (comment)

@ashmaroli
Copy link
Contributor

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.

@mmistakes
Copy link
Owner

@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.

@wildone
Copy link

wildone commented Jan 19, 2023

+1

@ashmaroli
Copy link
Contributor

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

@big-andy-coates
Copy link

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.

akkinoc added a commit to akkinoc/akkinoc.github.io that referenced this issue Mar 23, 2023
Because updating to Jekyll v4.3.2 causes sass warnings.
ref) mmistakes/minimal-mistakes#4054 (comment)
akkinoc added a commit to akkinoc/akkinoc.github.io that referenced this issue Mar 23, 2023
Because updating to Jekyll v4.3.2 causes sass warnings.
ref) mmistakes/minimal-mistakes#4054 (comment)
bexelbie added a commit to bexelbie/bexelbie.github.io that referenced this issue Apr 24, 2023
iBug added a commit to iBug/iBug-source that referenced this issue Aug 13, 2023
iBug pushed a commit to iBugOne/iBugOne.github.io that referenced this issue Aug 13, 2023
taoky added a commit to ustclug/website that referenced this issue Sep 11, 2023
lifehackerhansol added a commit to hacks-guide/Guide_3DS that referenced this issue Oct 1, 2023
Updating to Jekyll 4.3.0 and above causes build warnings as this
converter has switched to a different implementation (sass-embedded).
[0]

As the theme is intended to be GitHub Pages compatible (which, by the
way, has a horribly outdated Jekyll version), these warnings are not
avoidable on later Jekyll versions which have added support for the
latest version of jekyll-sass-converter.

Since Jekyll still supports the older, now-deprecated sassc-based
version [1], let's just keep it that way.

[0]: mmistakes/minimal-mistakes#4054
[1]: https://github.com/jekyll/jekyll/blob/v4.3.2/jekyll.gemspec#L39
lifehackerhansol added a commit to hacks-guide/Guide_Wii that referenced this issue Oct 1, 2023
Updating to Jekyll 4.3.0 and above causes build warnings as this
converter has switched to a different implementation (sass-embedded).
[0]

As the theme is intended to be GitHub Pages compatible (which, by the
way, has a horribly outdated Jekyll version), these warnings are not
avoidable on later Jekyll versions which have added support for the
latest version of jekyll-sass-converter.

Since Jekyll still supports the older, now-deprecated sassc-based
version [1], let's just keep it that way.

[0]: mmistakes/minimal-mistakes#4054
[1]: https://github.com/jekyll/jekyll/blob/v4.3.2/jekyll.gemspec#L39
torrocus added a commit to fractalsoft/blog.fractalsoft.org that referenced this issue Oct 9, 2023
We want to be up to date.
So I updated Jekyll to the latest version. [1]

Lately, we have been favoring GitHub Actions
over the built-in GitHub Pages.
I also switched the theme from the remote version
to the version installed from the gem.

This forced us to make a few configuration changes.
We had to add a few gems that were previously
loaded via GitHub Pages.

Additionally, there were deprecation warnings related to Sass gem. [2]
This in turn made me have to add `jekyll-sass-converter` gem [3]
in a specific version.

After these changes, everything works.
However, there is definitely space for optimization.

[1]: https://rubygems.org/gems/jekyll
[2]: mmistakes/minimal-mistakes#4054
[3]: jekyll/jekyll-sass-converter#145 (comment)
torrocus added a commit to fractalsoft/blog.fractalsoft.org that referenced this issue Oct 9, 2023
@pnorman
Copy link

pnorman commented Dec 24, 2023

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.

@jlconlin
Copy link

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.

@big-andy-coates
Copy link

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

@DuanShuSheng
Copy link

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

lifehackerhansol added a commit to hacks-guide/minimal-mistakes that referenced this issue Mar 24, 2024
Updating to Jekyll 4.3.0 and above causes build warnings as this
converter has switched to a different implementation (sass-embedded).
[0]

As the theme is intended to be GitHub Pages compatible (which, by the
way, has a horribly outdated Jekyll version), these warnings are not
avoidable on later Jekyll versions which have added support for the
latest version of jekyll-sass-converter.

Since Jekyll still supports the older, now-deprecated sassc-based
version [1], let's just keep it that way.

[0]: mmistakes#4054
[1]: https://github.com/jekyll/jekyll/blob/v4.3.2/jekyll.gemspec#L39
lifehackerhansol added a commit to hacks-guide/minimal-mistakes that referenced this issue Mar 24, 2024
Updating to Jekyll 4.3.0 and above causes build warnings as this
converter has switched to a different implementation (sass-embedded).
[0]

As the theme is intended to be GitHub Pages compatible (which, by the
way, has a horribly outdated Jekyll version), these warnings are not
avoidable on later Jekyll versions which have added support for the
latest version of jekyll-sass-converter.

Since Jekyll still supports the older, now-deprecated sassc-based
version [1], let's just keep it that way.

[0]: mmistakes#4054
[1]: https://github.com/jekyll/jekyll/blob/v4.3.2/jekyll.gemspec#L39
@lifehackerhansol
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests