no-nested-template-literals does not catch nesting in multi-line template literals

[John Desrosiers]

I want to report a bug.

Reproducer

Configure eslint rules to use all recommended from the sonarjs plugin as described in documentation.

// Fails to find an error when an error exists. Should find the following error: "Refactor this code to not use nested template literals."
const multiLine = `Here is
    ${`a nested`} template literal
`

// Correctly finds an error in all of the following cases
const singleLine = `Here is ${`a nested`} template literal`

const nextLine = `Here is
    ${`a nested`} template literal`

const firstLine = `
  Here is ${`a nested`} template literal`

eslint-plugin-sonarjs version: 0.19.0

eslint version: 8.31

Node.js version: 16.14.2

Rule key: no-nested-template-literals

[Victor]

Thanks for reporting this, indeed looks like a bug in the rule.

[Victor]

Closing the issue, after internal investigation seems was added explicitly as an exception not to report on styled components:

#319

[Gianfranco Garipoli]

Hello,
I still get an error for styled components if I use it like this:

export const ContainerRail = styled.div`
  padding-top: 20px;
  position: sticky;

  ${props => props.theme.breakpoints.small`
    position: fixed;
  `}
`;

Is this the correct issue where to write? or should I open a new one?

Thanks!

[Victor]

Hi @ilgianfraAccedo,

cannot reproduce it, that code does not report an issue for me. Are you using latest version?

[Gianfranco Garipoli]

It's a company tool so I actually don't control that but I can see this:
Developer EditionVersion 8.9.7 (build 52159)

The breakpoint file is:

import { css } from 'styled-components';
import { RESPONSIVE_BREAKPOINTS } from '../constants';

// Iterate through the sizes and create a media template
export const breakpoints = Object.keys(RESPONSIVE_BREAKPOINTS).reduce((acc, label) => {
  acc[label] = (...args) => css`
    @media (${label === 'largeDesktop' ? 'min-width' : 'max-width'}: ${RESPONSIVE_BREAKPOINTS[label]}px) {
      ${css(...args)}
    }
  `;
  return acc;
}, {});

It gives me this error Refactor this code to not use nested template literals. all the times I use a breakpoint inside a styled component

[Victor]

Ok, so you are using SonarQube right? 8.9 LTS was released in 2021, and this exception for styled components was added in March 2022. You would need to update to latest LTS to have this up to date (9.9)

[Gianfranco Garipoli]

Yes we are using SonarQube, I'll try to push them to update the version!

thanks!