Add autofix to declaration-block-trailing-semicolon

[YozhikM]

Which issue, if any, is this issue related to?

#3369 Add auto fix.

Is there anything in the PR that needs further explanation?

No.

/cc @evilebottnawi

[jeddy3]

@YozhikM Thanks for starting this.

I've made some requests.

Additionally, can you add the following to the rule README, please?:

The --fix option on the command line can automatically fix all of the problems reported by this rule.

Like so.

[jeddy3]

I don't think there's need for a new testRule. Instead, add fix: true to the two existing rejects:

• https://github.com/YozhikM/stylelint/blob/5e73c24a05a35985feeef8422aed31efa03c14e8/lib/rules/declaration-block-trailing-semicolon/__tests__/index.js#L41-L92
• https://github.com/YozhikM/stylelint/blob/5e73c24a05a35985feeef8422aed31efa03c14e8/lib/rules/declaration-block-trailing-semicolon/__tests__/index.js#L117-L147

[jeddy3]

I believe the raws.semicolon property expects a boolean.

You need to account for the "never" option too i.e. the trailing semicolon is removed when fixed (as this is a valid choice). This will be revealed when you add fix: true to the two existing rejects.

[YozhikM]

@jeddy3 I fixed it

[jeddy3]

@YozhikM Thanks for making the changes. I think it's almost there. I've made a minor request and asked for an explanation for one bit of the code.

[jeddy3]

Please backtick the flag e.g.

The `--fix` option on the command line can automatically fix all of the problems reported by this rule.

[YozhikM]

Done.

[jeddy3]

The purpose of this code isn't clear. What does it do?

[YozhikM]

For such cases as @import. To make it clearer, I will change it to node.type === "atrule" && node.name === "import". Because it was the only case, for which this check was needed.

[jeddy3]

Because it was the only case, for which this check was needed.

Thanks for the explanation.

I think you've uncovered a weakness in how the test file is structured. This rule was one of the first we wrote and the structure of the test file does not adhere to current conventions. I suggest we restructure the test file in this PR to makes things clearer.

Can you use the following test file, please?

"use strict";

const rule = require("..");
const { messages, ruleName } = rule;

testRule(rule, {
  ruleName,
  config: ["always"],
  fix: true,

  accept: [
    {
      code: "a { color: pink; }",
      description: "single declaration block with trailing semicolon"
    },
    {
      code: "a { background: orange; color: pink; }",
      description: "multi declaration block with trailing semicolon"
    },
    {
      code: "a { &:hover { color: pink; }}",
      description: "nesting without first-level decl"
    },
    {
      code: "a { color: red; &:hover { color: pink; }}",
      description: "nesting with first-level decl"
    }
  ],

  reject: [
    {
      code: "a { color: pink }",
      fixed: "a { color: pink; }",
      description: "single declaration block without trailing semicolon",
      message: messages.expected,
      line: 1,
      column: 15
    },
    {
      code: "a { background: orange; color: pink }",
      fixed: "a { background: orange; color: pink; }",
      description: "multi declaration block without trailing semicolon",
      message: messages.expected,
      line: 1,
      column: 35
    },
    {
      code: "a { &:hover { color: pink }}",
      fixed: "a { &:hover { color: pink; }}",
      description: "nesting without first-level decl",
      message: messages.expected,
      line: 1,
      column: 26
    },
    {
      code: "a { color: red; &:hover { color: pink }}",
      fixed: "a { color: red; &:hover { color: pink; }}",
      description: "nesting with first-level decl",
      message: messages.expected,
      line: 1,
      column: 39
    }
  ]
});

testRule(rule, {
  ruleName,
  config: ["never"],
  fix: true,

  accept: [
    {
      code: "a { color: pink }",
      description: "single-line declaration block without trailing semicolon"
    },
    {
      code: "a { background: orange; color: pink }",
      description: "multi-line declaration block without trailing semicolon"
    }
  ],

  reject: [
    {
      code: "a { color: pink; }",
      fixed: "a { color: pink }",
      description: "single-line declaration block with trailing semicolon",
      message: messages.rejected,
      line: 1,
      column: 15
    },
    {
      code: "a { background: orange; color: pink; }",
      fixed: "a { background: orange; color: pink }",
      description: "multi-line declaration block with trailing semicolon",
      message: messages.rejected,
      line: 1,
      column: 35
    }
  ]
});

testRule(rule, {
  ruleName,
  config: ["always"],
  syntax: "scss",
  fix: true,

  accept: [
    {
      code: "a { @includes foo; }",
      description: "at-rule with trailing semicolon"
    },
    {
      code: "a { @foo { color: pink; } }",
      description: "at-rule with decl block with trailing semicolon"
    }
  ],

  reject: [
    {
      code: "a { @includes foo }",
      fixed: "a { @includes foo; }",
      description: "at-rule without trailing semicolon",
      message: messages.expected,
      line: 1,
      column: 15
    },
    {
      code: "a { @foo { color: pink } }",
      fixed: "a { @foo { color: pink; } }",
      description: "at-rule with decl block without trailing semicolon",
      message: messages.expected,
      line: 1,
      column: 22
    }
  ]
});

testRule(rule, {
  ruleName,
  config: ["never"],
  syntax: "scss",
  fix: true,

  accept: [
    {
      code: "a { @includes foo }",
      description: "at-rule without trailing semicolon"
    },
    {
      code: "a { @foo { color: pink } }",
      description: "at-rule with decl block without trailing semicolon"
    }
  ],

  reject: [
    {
      code: "a { @includes foo; }",
      fixed: "a { @includes foo }",
      description: "at-rule with trailing semicolon",
      message: messages.rejected,
      line: 1,
      column: 15
    },
    {
      code: "a { @foo { color: pink; } }",
      fixed: "a { @foo { color: pink } }",
      description: "at-rule with decl block with trailing semicolon",
      message: messages.rejected,
      line: 1,
      column: 22
    }
  ]
});

I've:

• moved the non-standard nesting of blocked and blockless at-rules to separate testRules which use the syntax: "scss" option
• changed the nested blockless at-rule to @includes to make it clear it's non-standard
• removed the old-school double curly bracket nesting syntax

You might need to tweak some of the column values to get the tests to pass.

I think you'll also need to revert your recent "atrule" && node.name === "import" change too as this line is for non-standard nested blockless at-rules.

[jeddy3]

@YozhikM Thanks for making all the changes and for your patience. LGTM.

[hudochenkov]

• Added: declaration-block-trailing-semicolon autofix (#3382).