SCSS map-get is not recognized as a SCSS function in Sage 10

sage
1 
$colors: (
  blue: (
    background: #87eae4,
    fill: #46dfd6,
    opacity: 1
  ),
  dark: (
    background: #101010,
    fill: #575757,
    opacity: 0.3
  ),
);

@each $label, $map in $colors {
  .dots-texture-#{$label} {
    $background: map-get($map, background);
    background-color: $background;
  }
}

Is returning

Unexpected unknown function “map-get” function-no-unknown

Is there another way to use map-get()?

2

You may need to add @use sass:map: Sass: Built-In Modules

map-get can also be accessed as map.get

3

Humm, I’m still getting error:

@use "sass:map";

$colors: (
  blue: (
    background: #87eae4,
    fill: #46dfd6,
    opacity: 1
  ),
  dark: (
    background: #101010,
    fill: #575757,
    opacity: 0.3
  ),
);

@each $label, $map in $colors {
  .dots-texture-#{$label} {
    $background: map-get($map, background);
    background-color: $background;
  }
}
4

What context do you get the error in? What is you project configuration (i.e. bud.config.js)?

5

I get this error when run yarn build or yarn dev

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['scripts/app.js', 'styles/app.scss'],
      editor: ['scripts/editor.js', 'styles/editor.scss'],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets('images')
    .copy([app.path('src', 'fonts/**/*')])
    .copy([app.path('src', 'icons/**/*')])

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('resources/views/**/*', 'app/**/*')

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('https://shg001.lndo.site')

    /**
     * Development URL
     */
    .serve('https://localhost:3000');
};

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "lint": "npm run lint:js && npm run lint:css",
    "lint:js": "eslint resources/scripts",
    "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
    "test": "npm run lint",
    "translate": "npm run translate:pot && npm run translate:js",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print"
  },
  "devDependencies": {
    "@roots/bud": "5.6.2",
    "@roots/bud-eslint": "^5.7.0",
    "@roots/bud-prettier": "^5.7.0",
    "@roots/bud-sass": "^5.7.0",
    "@roots/bud-stylelint": "^5.7.0",
    "@roots/eslint-config": "^5.7.0",
    "@roots/sage": "5.6.2",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-scss": "^4.1.0"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.4",
    "bootstrap": "^5.1.3",
    "gsap": "^3.10.2",
    "js-dom-router": "^1.0.0",
    "swiper": "^8.0.7"
  }
}
6

Do you see any difference if you update all these to use the same version number?

    "@roots/bud": "5.6.2",
    "@roots/bud-eslint": "^5.7.0",
    "@roots/bud-prettier": "^5.7.0",
    "@roots/bud-sass": "^5.7.0",
    "@roots/bud-stylelint": "^5.7.0",
    "@roots/eslint-config": "^5.7.0",
    "@roots/sage": "5.6.2",
7

Nope, I checked the package.json and this is the versions in use.

8

I assume using map.get() doesn’t work either?

9

Right. I tried to reproduce the error on a freash Sage 10 installation without success. Now, I’m checking the differences.

10

@alwaysblank Removing @roots/sage/stylelint-config from .stylelintrc fix the issue.

11

Did you add a .stylelintrc? I don’t see one in the Sage repo.

12

Was added by another dev into the project:

{
  "plugins": ["stylelint-scss"],
  "customSyntax": "postcss-scss",
  "extends": ["@roots/sage/stylelint-config", "stylelint-config-prettier"],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
    "scss/selector-no-redundant-nesting-selector": true,
    "no-invalid-position-at-import-rule": false,
    "indentation": 2
  }
}
13

I can’t say I have much insight into why that particular interaction happened, but if it’s a need maybe consider the recommendation in the docs for the sage packages in bud w/r/t using sass: bud/with-sass.mdx at 8d120586ba98f2653d7ff55ac69352fb335aad26 · roots/bud · GitHub

14

@alwaysblank based on this issue, I think the only solution for now is adding "function-no-unknown": null in .stylelintrc file.

1 Like
15

I got the same error. I installed stylelint-scss and stylelint-config-standard-scss. Then you need to set the following rules:

"function-no-unknown": null,
scss/function-no-unknown": [true],

You can extend it by using ignoreFunctions option, this is for using custom functions.