no-nested-template-literals does not catch nesting in multi-line template literals about eslint-plugin-sonarjs HOT 7 CLOSED

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

thanks!

from eslint-plugin-sonarjs.

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

from eslint-plugin-sonarjs.

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

#319

from eslint-plugin-sonarjs.

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!

from eslint-plugin-sonarjs.

Hi @ilgianfraAccedo,

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

from eslint-plugin-sonarjs.

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

from eslint-plugin-sonarjs.

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)

from eslint-plugin-sonarjs.