no-global-function-names does not allow using CSS math functions

This code causes the error Expected math.min instead of min scss/no-global-function-names

.foo {
  width: min(300px, 30%);
}

Same with the max() function Expected math.max instead of max scss/no-global-function-names

.foo {
  width: max(300px, 30%);
}

.stylelintrc.js

module.exports = {
  'plugins': [
    'stylelint-scss',
  ],
  'rules': {
    'scss/no-global-function-names': true,
  },
};

"stylelint": "13.7.0",
"stylelint-scss": "3.18.0"

https://caniuse.com/#feat=css-math-functions

[johncrim]

Please reopen this issue:

Using “stylelint-scss”: “4.0.1”, this bug is now fixed in most places where I was seeing it, but I’m still seeing a few of these errors. Eg:

 45:19  ✖  Expected math.min instead of min  scss/no-global-function-names
 54:18  ✖  Expected math.min instead of min  scss/no-global-function-names

For

      max-height: min(800px, 70vh);
      max-width: min(800px, 90vw);

I don’t know why these aren’t ignored, while all my other uses of min/max that were previously causing this lint error are now working fine.

Here’s an example that is still failing with stylelint-scss 4.0.1:

.SectionGrid {
  $sectionMaxWidth: 60ch;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15ch, min(#{ $sectionMaxWidth }, 88vw)));

  max-width: min(1400px, 88vw);
  > section {
    grid-column: unset;
    max-width: min(#{ $sectionMaxWidth }, 88vw);
  }
}

All 3 of the min() functions are failing scss/no-global-function-names.

[kristerkari]

@Donov4n As a workaround you could add comments before and after your code to disable the rule for a single block of code, e.g.

// stylelint-disable scss/no-global-function-names
.foo {
  width: min(300px, 30%);
}
// stylelint-enable scss/no-global-function-names

More info: https://stylelint.io/user-guide/ignore-code/