A
A
Antibreez2021-11-05 17:56:41
JavaScript
Antibreez, 2021-11-05 17:56:41

How to remove "Unknown rule function-calc-no-invalid" error in stylelint 14.0.1?

Good afternoon.
In gulp builder I use stylelint checker. For the test, I use the simplest style.scss file , which imports a variable from variables.scss

style.scss:

@import "variables";

body {
  background-color: $main-color;
}


variables.scss:
$main-color: #555555;

Configuration file .stylelintrc.json :
{
  "plugins": [
    "stylelint-scss"
  ],
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-standard-scss",
    "stylelint-config-htmlacademy"
  ],
  "rules": {
    "indentation": 2,
    "at-rule-no-vendor-prefix": true,
    "at-rule-empty-line-before": "always",
    "scss/selector-no-redundant-nesting-selector": true,
    "scss/at-import-partial-extension": "never",
    "block-closing-brace-newline-before": "always",
    "block-closing-brace-newline-after": "always",
    "at-rule-name-case": "lower",
    "at-rule-name-space-after": "always",
    "at-rule-semicolon-newline-after": "always",
    "at-rule-semicolon-space-before": "never",
    "selector-max-class": 2,
    "function-calc-no-invalid": false,
    "unit-allowed-list": [
      "em",
      "rem",
      "%",
      "px",
      "vh",
      "vm",
      "vmax",
      "vmin"
    ]
  }
}


package.json:
{
  "name": "gulp-2021",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.babel.js",
  "scripts": {
    "stylelint-fix": "stylelint ./src/styles/**/*.scss --fix --custom-syntax postcss-scss"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/register": "^7.16.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.0.0",
    "gulp-shorthand": "^1.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-stylelint": "^13.0.0",
    "gulp-w3c-html-validator": "^5.1.0",
    "node-sass": "^6.0.1",
    "postcss-scss": "^4.0.2",
    "sass": "^1.43.4",
    "stylelint": "^14.0.1",
    "stylelint-config-htmlacademy": "^0.1.10",
    "stylelint-config-standard": "^23.0.0",
    "stylelint-config-standard-scss": "^2.0.1",
    "stylelint-scss": "^4.0.0"
  },
  "dependencies": {}
}


The file that starts the assembly of styles:
import gulp from 'gulp'
import plumber from 'gulp-plumber'
import gulpSass from 'gulp-sass'
import dartSass from 'sass'
import cleanCSS from 'gulp-clean-css'
import sourcemaps from 'gulp-sourcemaps'
import shorthand from 'gulp-shorthand'
import autoprefixer from 'gulp-autoprefixer'
import gulpStylelint from 'gulp-stylelint'
import rename from 'gulp-rename'

const sass = gulpSass(dartSass);

export default function style() {
  return gulp.src('src/styles/style.scss')
    .pipe(plumber())
    .pipe(gulpStylelint({
      failAfterError: false,
      reporters: [
        {
          formatter: 'string',
          console: true
        }
      ]
    }))
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(autoprefixer({
      cascade: false
    }))
    .pipe(shorthand())
    .pipe(cleanCSS({
      debug: true,
      compatibility: '*'
    }, details => {
      console.log(`${details.name}: Original size:${details.stats.originalSize} - Minified size: ${details.stats.minifiedSize}`)
    }))
    .pipe(sourcemaps.write())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('build/css'))
}


An error occurs during build:
λ gulp start
[17:31:37] Requiring external module @babel/register
[17:31:39] Using gulpfile D:\gulp-2021\gulpfile.babel.js
[17:31:39] Starting 'start'...
[17:31:39] Starting 'html'...
[17:31:40] w3c-html-validator D:\gulp-2021\src\pages\index.html pass
[17:31:40] Finished 'html' after 528 ms
[17:31:40] Starting 'style'...
[17:31:41]

src/styles/style.scss
1:1  ✖  Unknown rule function-calc-no-invalid  function-calc-no-invalid



\style.css: Original size:31 - Minified size: 21
[17:31:41] Finished 'style' after 1.17 s
[17:31:41] Finished 'start' after 1.71 s


I've been googling this error for half a day. It seems like in stylelint 14.0.0 this rule was removed altogether, I don’t have it in the configuration file. I'm at a dead end. Can someone point me in the right direction on how to deal with the error?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
O
Oleg Kireev, 2021-11-09
@fluckymendes

Your stylelint config is extended by the three third party configs below. Try to delete them one by one, I'm sure that this rule is indicated somewhere inside them.
Configuration file .stylelintrc.json :

"extends": [
    "stylelint-config-standard",
    "stylelint-config-standard-scss",
    "stylelint-config-htmlacademy"
  ],

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question