SonarCloud Duplicated Lines invalid detection on cva tailind classes

[richardshephard1 (Richard Shephard)]

In Typescript, we use the package class-variance-authority to manage style variants for Tailwind CSS classes. SonarCloud is now detecting duplicated lines.

The variant code is:

import { cn } from '@/utils/style-extensions';
import { cva, type VariantProps } from 'class-variance-authority';
import { HexagonIcon } from './icon-svg/hexagon-icon';
const buttonVariants = cva(
  'inline-flex items-center justify-center whitespace-nowrap font-bold transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        primary: 'text-primary-neutral-white-100',
        secondary: 'text-primary-brand-om-green-100',
      },
      size: {
        small: 'desktop-button-small gap-3 px-4 py-2 rounded-45 md:tablet-button-small md:px-4 md:py-3 md:gap-4 md:rounded-60 xl:mobile-button-normal xl:px-5 xl:py-4',
        default: 'mobile-button-normal gap-4 px-5 py-4 rounded-60 md:tablet-button-normal md:px-6 md:py-5 md:gap-6 md:rounded-100 xl:desktop-button-normal xl:px-8 xl:py-6 xl:gap-10',
        large: 'mobile-button-normal gap-4 px-5 py-4 rounded-60 md:tablet-button-large md:px-8 md:py-6 md:gap-8 md:rounded-120 xl:desktop-button-large xl:px-10 xl:py-6 xl:gap-10',
      },
      mode: {
        light: 'bg-primary-brand-om-green-100',
        dark: 'bg-primary-neutral-white-100',
        disabled: '',
      },
    },
    compoundVariants: [{
      variant: 'primary',
      mode: 'dark',
      class: 'text-primary-brand-om-green-100',
    }, {
      variant: 'primary',
      mode: 'disabled',
      class: 'bg-primary-brand-breeze-100 text-primary-brand-om-green-100 text-opacity-60',
    }, {
      variant: 'secondary',
      mode: 'light',
      class: 'bg-transparent',
    }, {
      variant: 'secondary',
      size: ['small', 'default', 'large'],
      class: 'px-0',
    }, {
      variant: 'secondary',
      mode: 'dark',
      class: 'bg-transparent text-primary-neutral-white-100',
    }, {
      variant: 'secondary',
      mode: 'disabled',
      class: 'bg-transparent text-primary-brand-om-green-100 opacity-50',
    }],
  }
);
const hexagonVariants = cva('', {
  variants: {
    variant: {
      primary: 'text-primary-accent-pistachio',
      secondary: '',
    },
    size: {
      small: 'h-[4.72px] w-[4.5px]',
      default: 'h-[6.32px] w-[6px] md:h-[10.53px] md:w-[10px]',
      large: 'h-[6.32px] w-[6px] md:h-[10.53px] md:w-[10px]',
    },
    mode: {
      light: '',
      dark: '',
      disabled: '',
    },
  },
  compoundVariants: [{
    variant: 'primary',
    mode: 'dark',
    class: 'text-primary-accent-minty-dark',
  }, {
    variant: 'primary',
    mode: 'disabled',
    class: 'text-primary-brand-om-green-100 text-opacity-60',
  }, {
    variant: 'secondary',
    mode: 'light',
    class: 'text-primary-brand-om-green-100',
  }, {
    variant: 'secondary',
    mode: 'disabled',
    class: 'text-primary-brand-om-green-100',
  }],
});

The report is Duplicated Lines (%) on New Code 52.6% with Duplicated by Lines: 53 – 82 and Duplicated by Lines: 8 – 37

It seems to be detecting that the dictionary keys are the same, but the values in the dictionary are different. Some of the keys just happen to be in the same order.

This looks like a false positive, re-arranging the lines makes the duplication 0%.

[Colin]

Hey @richardshephard1!

Duplication detection ignores string literals, so they behavior you’re seeing is expected. If this is not useful for you, you can exclude certain files from duplication detection.