"Unexpected extra semicolon" in nested block

[TrevorBurnham]

Howdy! Thanks for putting this syntax together. For the most part, it works great. However, somehow it seems to be allergic to semicolons in nested blocks. For example:

const RedBox = styled.div`
  ${css`
    background-color: red; // Triggers "Unexpected extra semicolon" (no-extra-semicolons)
  `}
`;

This rule is autofixable, which produces some strange results. For example, both semicolons in this example are flagged as rule violations:

const RedBox = styled.div`
  ${css`
    background-color: red;
    color: white;
  `}
`;

That causes the autofix to generate this code, which is erroneous:

const RedBox = styled.div`
  ${css`
    background-color: red // Triggers "Missed semicolon" (CssSyntaxError)
    color: white
  `}
`;

None of this strange behavior occurs if the css block is extracted from the styled block.

---

For reference, here's my .stylelintrc:

{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "customSyntax": "postcss-styled-syntax"
}

And the relevant dependencies:

"postcss": "^8.4.20",
"postcss-syntax": "^0.36.2",
"postcss-styled-syntax": "^0.1.0",
"styled-components": "^5.3.6"
"stylelint": "^14.16.0",
"stylelint-config-recommended": "^9.0.0",
"stylelint-config-styled-components": "^0.1.1",

[hudochenkov]

It might be an issue with stylelint. I'll take a look in coming days.

[hudochenkov]

This is the issue with Stylelint rule. However, this rule will be deprecated in upcoming v15 https://github.com/stylelint/stylelint/issues/6563#issuecomment-1374682768

I suggest to remove this rule from config.