Processor replaces interpolations for comments, this raises the error of comment-empty-line-before stylelint rule

[psixdev]

I use stylelint-config-standard which contains the rule

"comment-empty-line-before": [ "always", {
  except: ["first-nested"],
  ignore: ["stylelint-commands"],
} ]

If I try to process the following code (from the example, slightly modified):

const styled = require('styled-components').default;
const {css} = require('styled-components');

module.exports = styled.a`
	/* This renders the buttons above... Edit me! */
	display: inline-block;
	border-radius: 3px;
	padding: 0.5rem 0;
	margin: 0.5rem 1rem;
	width: 11rem;
	background: transparent;
	color: white;
	border: 2px solid white;

	/* The GitHub button is a primary button
	* edit this to target it specifically! */
	${(props) => props.primary && css`
		background: white;
		color: palevioletred;
	`}
`;

then as a result I will get:

.selector1 {\n\t/* This renders the buttons above... Edit me! */\n\tdisplay: inline-block;\n\tborder-radius: 3px;\n\tpadding: 0.5rem 0;\n\tmargin: 0.5rem 1rem;\n\twidth: 11rem;\n\tbackground: transparent;\n\tcolor: white;\n\tborder: 2px solid white;\n\n\t/* The GitHub button is a primary button\n\t* edit this to target it specifically! */\n\t-styled-mixin0: dummyValue;\n/* dummyComment */\n/* dummyComment */\n/* dummyComment */\n}\n\n.selector2 {\n\tbackground: white;\n\tcolor: palevioletred;\n}\n

i.e

.selector1 {
	/* This renders the buttons above... Edit me! */
	display: inline-block;
	border-radius: 3px;
	padding: 0.5rem 0;
	margin: 0.5rem 1rem;
	width: 11rem;
	background: transparent;
	color: white;
	border: 2px solid white;

	/* The GitHub button is a primary button
	* edit this to target it specifically! */
	-styled-mixin0: dummyValue;
/* dummyComment */
/* dummyComment */
/* dummyComment */
}

.selector2 {
	background: white;
	color: palevioletred;
}

These dummyComments violate the rule and stylelint throws errors:

 18:1  ✖  Expected empty line before comment   comment-empty-line-before
 19:1  ✖  Expected empty line before comment   comment-empty-line-before
 20:1  ✖  Expected empty line before comment   comment-empty-line-before

A simple solution to the problem is to write like this:

	...
	/* stylelint-disable */
	${(props) => props.primary && css`
		color: palevioletred;
		background: white;
	`}
	/* stylelint-enable */

Styles within the interpolation will continue to be validated by stylelint. But it does not look quite right. What do you think there are other solutions to the problem?

[mxstbr]

We should disable that rule in the shared config most likely, mind opening an issue there? Thanks: https://github.com/styled-components/stylelint-config-styled-components

[psixdev]

If this is the only solution, then yes. I thought that there could be another way of replacing interpolations without using dummy comments.

[chinesedfan]

Warnings caused by dummy comments should be removed, as well as mentioned in #165. But stylelint-disable only works for block interpolations, instead of inner ones like,

.selector2 {
	background:${blabla};
	color: palevioletred;
}

@psixdev Glad to hear that you have better ways than using dummy comments. Can you explain a little more?

[psixdev]

@chinesedfan I have no concrete proposals yet. I will try to look for options as soon as I have a little more time.

[chinesedfan]

The new released v1.4.0 should solved it.