Answer the question
In order to leave comments, you need to log in
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;
}
$main-color: #555555;
{
"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"
]
}
}
{
"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": {}
}
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'))
}
λ 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
Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question