Process comments in template literal

[declanelcocks]

When writing styles which go beyond 10 or so lines, you may want to add in comments. Or you may just want to write a comment to explain to your team why you wrote a specific line. As far as I know the only way to do that inside a template literal is to do ${/* comment */''}.

Using this processor, the comment will be processed as undefined, so when you have multiple comments in your style you will get the stylelint error Unexpected duplicate "undefined" declaration-block-no-duplicate-properties.

Example:

${/* My comment */''}

.something {
    color: red;
}

My guess would be that the solution to try and process these as normal CSS comments?

[ghost]

Yes comments can definitely be necessary, but then you can just do this:

import styled from 'styled-components'

const Container = styled.div`
  /* a comment here */
  /* and one here */
  margin: 0 auto;
  /* and another one here */
  max-width: 30rem;
  padding: 1rem;
`

export default Container

I'll close this since parsing js comments to css comments would be unnecessarily complex when you can just use css comments. However, it is unexpected that ${''} is evaluated to undefined. I'll open a new issue for that. Thanks for reporting this and let me know if you have any other questions.