Investigate CSS linting with sass-lint

[tulipdexter]

Further to removing the CSS linting rules from the playbook documentation, there is some investigation to be done about whether we can have 1 linter instead of stylelint and sass-lint, and what the repercussions of that change would be.

[tulipdexter]

Ok I investigated this.

Setup

• 2 files, one .css and one .scss with the same code in them
• 2 NPM scripts, running sass-lint using our config
• Went through most of the rules in the @springernature/sasslint-config and created a CSS declaration for each one that should have failed the linting.

"scripts": {
    "sasslint": "sass-lint --config ./node_modules/@springernature/sasslint-config/config/.sass-lint.yml './scss/*.scss' -v",
    "sasslintcss": "sass-lint --config ./node_modules/@springernature/sasslint-config/config/.sass-lint.yml './css/*.css' -v",
}

Results

For the most part, sass-lint caught the errors in the CSS as well as the SCSS. But it didn't catch all. The ones it didn't catch are shown below:

/**
 --- space-before-brace ---
 */

/* Should fail but doesn't: Whitespace required before { */
.test{
	color: aliceblue;
}

/**
 --- indentation ---
 */

/* Should fail but doesn't - Mixed spaces and tabs */
.test {
	color: aliceblue;
	background: red;
}

/* Should fail but doesn't - Expected indentation of 1 tab but found 0 */
.test {
color: aliceblue;
background: red;
}

/* Should fail but doesn't - Expected indentation of 1 tab but found 0 */
.test {
		color: aliceblue;
		background: red;
}

/**
 --- empty-line-between-blocks ---
 */

/* Should fail but doesn't: Space expected between blocks */
.test {
	color: aliceblue;
}
.test {
	color: aliceblue;
}

[aliuk2012]

sass-lint is no longer been maintained/supported as of 2017. Should we be recommending stylelint and therefore need to update https://github.com/springernature/frontend-playbook/blob/main/css/house-style.md#linting

references

https://dev.to/stories_of_ren/switching-from-sass-lint-to-stylelint-5f8c