Is there a way to have the closing brace for a CSS class go to a new line when compiling SASS with Node Sass?

Question

I am having some trouble with node-sass and my stylelint to write my CSS in the way I would like.

Right now, these are the rules I am using to line my CSS:

{
    "extends": [
        "@wordpress/stylelint-config/scss"
    ],
    "ignoreFiles": [
        "sass/_normalize.scss"
    ],
    "rules": {
        "indentation": "tab",
        "block-closing-brace-space-before": "always-single-line",
        "block-no-empty": true,
        "block-opening-brace-newline-after": "always-multi-line",
        "block-opening-brace-space-after": "always-single-line",
        "block-opening-brace-space-before": "always",
        "declaration-block-trailing-semicolon": "always",
        "declaration-colon-space-before": "never",
        "declaration-block-semicolon-space-after": "always-single-line",
        "font-family-no-missing-generic-family-keyword": null,
        "no-descending-specificity": null,
        "no-duplicate-selectors": null,
        "font-family-no-duplicate-names": null,
        "selector-class-pattern": null
    }
}

And my CSS is compiled and written into code like this:

.test__element {
  color: red; }

I am trying to have it look like something like this:

.test__element {
    color: red; 
}

Additionally, here is my compile command:

"compile:css": "node-sass sass/ -o ./assets/css/ && stylelint '*.css' --fix || true && stylelint '*.css' --fix",

Any thoughts on where I went wrong?

Answer 1

You're probably looking for the block-closing-brace-newline-before rule: https://stylelint.io/user-guide/rules/block-closing-brace-newline-before/

But be careful, this option is deprecated. In the official migration guide (https://stylelint.io/migration-guide/to-15) they suggest to use other pretty printers like Prettier