Errors reported on nested multi-line template strings

[phoulgaux]

Hello, I believe I have found in a bug regarding nested template strings, as described below. Minimal cases can be found in this repo. Any component in the array also exhibits this behavior on its own.

IMO this might be connected with #165

As is

When running the linter on a file with nested multi-line templates (tagged or not), stylelint detects Expected empty line before comment (comment-empty-line-before) and Unexpected empty block (block-no-empty) errors. Upon fixing with --fix, the whole file is replaced with extracted CSS with /* dummy comment */ in place of the nested templates. The errors are not shown when the nested template is in a single line (for example ${css`display: block;`}.

Before fix:

import styled, { css } from 'styled-components';

export const components = [
  styled.div`
    ${`
    `}
  `,
  styled.div`
    ${css`
    `}
  `,
  styled.div`
    ${css`
      display: block;
    `}
  `,
];

After --fix:

.selector1 {
  -styled-mixin0: dummyValue;

  /* dummyComment */
}

.selector2 {
  -styled-mixin0: dummyValue;

  /* dummyComment */
}

.selector3 {
}

.selector4 {
  -styled-mixin0: dummyValue;

  /* dummyComment */

  /* dummyComment */
}

.selector5 {
  display: block;
}

To be

No errors should be reported. However, in case of an error, the fixer should not convert JS files to CSS files.

Environment

• Node version: v10.0.0
• stylelint: "^9.2.1"
• stylelint-config-standard": "^18.2.0,
• stylelint-config-styled-components": "^0.1.1"
• stylelint-processor-styled-components": "^1.3.1"

[phoulgaux]

Nevermind, it was an issue with stylelint-config-standard, someone else in the project has replaced stylelint-config-recommended with it 😠