Address Sass deprecation warnings

Author: jgerigmeyer

.gitignore

@@ -58,8 +58,15 @@ typings/
 # Output of 'npm pack'
 *.tgz
 
-# Yarn Integrity file
+# Yarn
 .yarn-integrity
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 
 # dotenv environment variables file
 .env

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.1.0-beta.17 - 2024/11/04
+
+- 🏠 INTERNAL: Use Sass modules instead of global functions
+- 🏠 INTERNAL: Upgrade dependencies
+
 ## 0.1.0-beta.16 - 2022/12/14
 
 - 🏠 INTERNAL: Remove documentation from npm package

css/ccs.css

@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 menu {
   background: var(--callout);
   padding: 1em;
@@ -79,7 +81,7 @@ select {
 
 $rainbow: ();
 @for $hue from 1 through 36 {
-  $rainbow: append($rainbow, hsl($hue * 10, 80%, 40%), comma);
+  $rainbow: list.append($rainbow, hsl($hue * 10, 80%, 40%), comma);
 }
 
 [type='range'] {

css/ccs.css.map

@@ -16,13 +16,13 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.5",
-    "@babel/plugin-transform-modules-umd": "^7.18.6",
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-modules-umd": "^7.25.9",
     "cssremedy": "^0.1.0-beta.2",
-    "sass": "^1.56.2",
+    "sass": "^1.80.6",
     "sassdoc": "^2.7.4",
-    "sassdoc-theme-herman": "^5.0.0"
+    "sassdoc-theme-herman": "^6.0.1"
   },
   "scripts": {
     "build-sass": "sass sass/_output.scss css/ccs.css",
@@ -41,5 +41,6 @@
     "_index.scss",
     "index.js",
     "dist.js"
-  ]
+  ],
+  "packageManager": "yarn@4.5.1"
 }

demo/sass/_menu.scss

@@ -1,8 +1,11 @@
+@use 'sass:map';
+@use 'sass:meta';
+
 // Hues
 // ----
 /// The colors to generate, and optional default hues for each color.
 /// To set both color-names and hues, provide an explicit map.
-/// - If you provide a songle hue value,
+/// - If you provide a single hue value,
 ///   we'll assign it to the required `prime` key.
 /// - If you provide a list of color names, we
 ///   we'll assign them all default `null` hue values.
@@ -20,21 +23,21 @@ $hues: (
 ) !default;
 
 // Convert $hues to a map, or error on invalid hues
-@if (type-of($hues) != 'map') {
-  @if (type-of($hues) == 'list') or (type-of($hues) == 'string') {
+@if (meta.type-of($hues) != 'map') {
+  @if (meta.type-of($hues) == 'list') or (meta.type-of($hues) == 'string') {
     $hues-list: $hues;
     $hues: ();
 
     @each $color in $hues-list {
-      $hues: map-merge($hues, ($color: null));
+      $hues: map.merge($hues, ($color: null));
     }
-  } @else if (type-of($hues) == 'number') or (not $hues) {
+  } @else if (meta.type-of($hues) == 'number') or (not $hues) {
     $hues: ('prime': $hues);
   }
 }
 
 // Require a prime hue
-@if not (map-has-key($hues, 'prime')) {
+@if not (map.has-key($hues, 'prime')) {
   @error 'Please provide a `prime` hue';
 }
 
@@ -112,13 +115,13 @@ $neutral-saturation: null !default;
 /// for browsers that don't support
 /// CSS custom properties.
 /// The default value is based on
-/// `map-get($hues, 'prime')`, `$saturation`, `$lightness`,
+/// `map.get($hues, 'prime')`, `$saturation`, `$lightness`,
 /// and maximum `$contrast`.
 ///
 /// @type color
 /// @group config
 $fallback-dark: hsl(
-  map-get($hues, 'prime') or 330,
+  map.get($hues, 'prime') or 330,
   ($saturation or 50%) - ($contrast or 45%),
   ($lightness or 50%) - ($contrast or 45%)
 ) !default;
@@ -129,13 +132,13 @@ $fallback-dark: hsl(
 /// for browsers that don't support
 /// CSS custom properties.
 /// The default value is based on
-/// `map-get($hues, 'prime')`, `$saturation`, `$lightness`,
+/// `map.get($hues, 'prime')`, `$saturation`, `$lightness`,
 /// and maximum `$contrast`.
 ///
 /// @type color
 /// @group config
 $fallback-light: hsl(
-  map-get($hues, 'prime') or 330,
+  map.get($hues, 'prime') or 330,
   ($saturation or 50%) - ($contrast or 45%),
   ($lightness or 50%) + ($contrast or 45%)
 ) !default;

netlify.toml

@@ -1,4 +1,5 @@
 @use '../config';
+@use 'sass:meta';
 
 /// # CSS Global Settings
 /// Global configuration options will be defined
@@ -46,6 +47,6 @@
   }
 
   @if (config.$fades) {
-    --ccs-fade: #{if(type-of(config.$fades) == 'number', config.$fades, 1)};
+    --ccs-fade: #{if(meta.type-of(config.$fades) == 'number', config.$fades, 1)};
   }
 }