Deprecation Warning: Global built-in functions are deprecated

[isaacblum]

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.

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

When I build, I'm seeing these warnings. Is there guidance here, or will this be updated in the source? Thanks in advance.

[hraftery]

Looking to scratch this itch myself now. Making a list so I can check I've got them all:

1. Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
   • 3 │ @import "base/variables.scss";
   • /assets/css/agency.scss 3:9 root stylesheet
2. Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
   • 4 │ @import "base/mixins.scss";
   • /assets/css/agency.scss 4:9 root stylesheet
3. Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
   • 49 │ @import "base/page.scss";
   • /assets/css/agency.scss 49:9 root stylesheet
4. Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
   • 52 │ @import "components/buttons.scss";
   • /assets/css/agency.scss 52:9 root stylesheet
5. Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
   • 53 │ @import "components/navbar.scss";
   • /assets/css/agency.scss 53:9 root stylesheet
6. Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
   • 14 │ color: darken($primary, 10%);
   • base/_page.scss 14:12 @import
7. Deprecation Warning [color-functions]: darken() is deprecated. Suggestions:
   • 14 │ color: darken($primary, 10%);
   • base/_page.scss 14:12 @import
8. Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
   • 18 │ background-color: darken($primary, 7.5%) !important;
   • components/_buttons.scss 18:23 @import
9. Deprecation Warning [color-functions]: darken() is deprecated. Suggestions:
   • 18 │ background-color: darken($primary, 7.5%) !important;
   • components/_buttons.scss 18:23 @import
10. Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
    • 19 │ border-color: darken($primary, 7.5%) !important;
    • components/_buttons.scss 19:19 @import
11. Deprecation Warning [color-functions]: darken() is deprecated. Suggestions:
    • 19 │ border-color: darken($primary, 7.5%) !important;
    • components/_buttons.scss 19:19 @import
12. Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
    • 30 │ color: darken($primary, 10%);
    • components/_navbar.scss 30:14 @import
13. Deprecation Warning [color-functions]: darken() is deprecated. Suggestions:
    • 30 │ color: darken($primary, 10%);
    • components/_navbar.scss 30:14 @import
14. Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
    • 20 │ background: fade-out($primary, 0.1);
    • layout/_portfolio.scss 20:21 @import
15. Deprecation Warning [color-functions]: fade-out() is deprecated. Suggestions:
    • 20 │ background: fade-out($primary, 0.1);
    • layout/_portfolio.scss 20:21 @import
      Warning: 10 repetitive deprecation warnings omitted.

[hraftery]

sass-migrator (the automated migrator mentioned above) is a dead end. It does not support the Jekyll syntax in the scss files. I roughly documented that here.

Even if it did, @import is fundamental to the way Jekyll expects to include partials. The minima theme maintainers have previously held off migrating.

But this project already has a requirement of Jekyll >4.0, so I'm going to look at the source of the matter, jekyll-sass-converter and see what they're doing about it.

PS. can you tell I'm learning as I go?

[hraftery]

So it seems this issue has been mostly ignored in jekyll-sass-converter (not their problem I suppose, since the user writes the sass?). But one user did document their efforts to migrate. Essentially they found:

1. the "global-builtin" warnings have pretty straight forward replacements, as long as you're willing to drop Jekyll < 4 (or more specifically, jekyll-sass-converter < 3) support.
2. the "import" warnings are, sure enough, tricky to resolve. Lots of scoping gotchas to contend with, and difficulty ensuring the changes do not affect the result. It looks like the author may have succeeded, but not without a lot of refactoring and checking for impact.

Is it worth it?

[hraftery]

Another user has done it, this time to the minima theme. The PR for the import warnings is useful reference. There's also one with the global-builtin warnings included.

Sure enough, they refactored all the shared css to a "common" file and flattened a lot of the namespacing that @use brings with *.

Note also we can't suppress the warnings in the meantime, until this is resolved. Or this is resolved and users can drop jekyll-remote-theme.

[hraftery]

I revisited sass-migrator. tl;dr: still a dead end. For posterity:

I created the intermediate file manually from irb, like so:

require 'liquid'
require 'yaml'
style = YAML.load_file('data/style.yml')
site = {}
site['data'] = {}
site['data']['style'] = style
src = File.read('assets/css/agency.scss')
tmpl = Liquid::Template.parse(src)
output = tmpl.render('site' => site)
puts output

And then made the partials available:

cp -R _sass/* assets/css                                                   
for f in assets/css/*/*.scss; do mv "$f" "$(echo "$f" | sed s/\\/_/\\//)"; done

Alas, still borks:

sass-migrator module --migrate-deps assets/css/agency.parsed.scss       
Error: This stylesheet was loaded by a nested import in assets/css/agency.parsed.scss.
The module system only supports loading nested CSS using the load-css() mixin,
which doesn't allow access to mixins from the outer stylesheet.
  ╷
4 │   @include body-font;
  │   ^^^^^^^^^^^^^^^^^^
  ╵
  assets/css/base/page.scss 4:3  root stylesheet
Migration failed!

Looks like it'll be a manual effort.

[hraftery]

At this stage I've concluded that removing @import is not possible, for the reason implied by the sass-migrator above. I've documented this here. So I'm moving on to resolving the global built-in warning, and suppressing the import warning.

[hraftery]

Sure enough, the global built-in warnings were easy to resolve, just by making the recommended substitutions. They're not as human-readable, so I've added some minor comments to restore the balance a smidgen.

Suppressing the import warnings took forever because I didn't notice I had a typo in the config name - damn permissive syntax! But turns out it is also easy, provided you're using "jekyll-sass-converter", ">= 3.1.0". That's because quiet_deps is not enough (ironically though, it is effective at suppressing the global built-in warnings!). Perhaps because it only applies to stylesheets that are "not just a series of relative loads from the entrypoint stylesheet", which I suppose means the very file we care about - the main scss file that does all the importing. So we need silence_deprecations, which was only added in 3.1.0.

I haven't added the dependency explicitly because it might prevent users using the theme via jekyll-remote-theme. The fallback is just that it doesn't work, so no big loss. If a dependency were added, it might just be != 3.0.0 - I think earlier versions depended on a sass-embedded version prior to the deprecation warnings anyway.

Finally, I also added logger explicitly in the gemfile, to suppress another warning about it being removed from the default gems in Ruby 4.0.0.