[Bug]: react-doctor complains about non-standard component imports.

[Kurioni]

Hi!
I'm using react-doctor version 0.5.6. When declaring a styled component and using it in another file via import "import * as S from './style';", react-doctor incorrectly recognizes it as unused.

For example:

// style.ts
export const Custom = styled('div')(({ theme }) => ({...}));

// Component.tsx

import * as S from './style';

function Example() {

  return (
   ...
   <S.Custom .../>
  );
}

Maintainability: deslop/unused-export
Unused export: Custom is exported but no module
imports it, so it expands the public surface and can
mislead callers about supported API.
→ Drop the export keyword (or remove the declaration) if
no other module uses this symbol.

[react-doctor-evals]

✅ Triage opened a PR: #876

[rayhanadev]

Heads up — we closed the proposed fix (#876) because it was a no-op (deslop-js@0.0.24 and @0.0.25 are byte-identical, and the added test passed on the old version too).

Trying to reproduce this directly, I couldn't get the false positive to fire: react-doctor's unused-export comes from deslop's graph detector, which — for a namespace import (import * as S from './style') with a JSX member usage (<S.Custom/>) — conservatively marks the whole namespace as used, so Custom shouldn't be flagged.

Could you share a minimal repro (the exact import + usage + the export, plus your react-doctor version)? In particular: is Custom re-exported through a barrel, used only in a type position, or imported as a named import somewhere? That'll tell us whether the real gap is deslop's missing JSXMemberExpression tracking or something in how the export is referenced. Keeping this open until we can reproduce it. Thanks!

[Kurioni]

Yes, sure.
It's interesting that, for example, SelectLayout isn't marked as unused code in deslop, even though they're imported identically.
I have two apps that use the same library, libs/*. In the example, I showed how deslop marks library code.
react-doctor version - 0.5.6
My code:

// libs/shared/ui/src/controls/MultiSelect/style.ts

import { Select, selectClasses } from '@mui/base/Select';
import List from '@mui/joy/List';
import { styled } from '@mui/joy/styles';

interface CustomSelectProps {
  isActive: boolean;
  isError: boolean;
  disabled?: boolean;
}

// no warning
export const SelectLayout = styled('div', {
  shouldForwardProp: (prop) => prop !== 'isActive' && prop !== 'isError',
})<CustomSelectProps>(({ theme, isError, disabled }) => ({
  '--MultiSelect-radius': '8px',
  '--MultiSelect-paddingInline': '16px',
  '--variant-borderWidth': '0px',
  display: 'flex',
  borderColor: isError ? theme.palette.danger.outlinedBorder : '',
  borderStyle: isError ? 'solid' : '',
  borderWidth: '1px',
  borderRadius: 'var(--MultiSelect-radius)',
  height: '56px',
  background: theme.palette.background.surface,
  fontSize: theme.typography.body1.fontSize,
  fontWeight: theme.typography.body1.fontWeight,
  lineHeight: theme.typography.body1.lineHeight,
  color: theme.palette.text.primary,

  [`& .${selectClasses.popup}`]: {
    width: '100%',
    zIndex: 2,
    marginTop: '4px !important',
  },
  ...(!disabled && {
    '&:hover .selectIcon': {
      color: theme.palette.text.primary,
    },
  }),
  '& .selectIcon': {
    color: 'var(--joy-palette-components-icons-cleanIcon)',
  },
  ...(disabled && {
    backgroundColor: theme.palette.neutral.softDisabledBg,
  }),
}));

// warning
export const StyledList = styled(List)(({ theme }) => ({
  background: theme.palette.background.surface,
  boxShadow: '0px 8px 24px 0px rgba(0, 0, 0, 0.08)',
  '--List-radius': '8px',
  '--ListItem-paddingX': '16px',
  '--ListItemDecorator-size': '24px',
  '--ListDivider-gap': '4px',
  '--ListItem-minHeight': '40px',
}));

// warning
export const StyledSelectButton = styled(Select<number, true>)(
  ({ disabled }) => ({
    border: 0,
    outline: 0,
    background: 'none',
    fontSize: 'inherit',
    color: 'inherit',
    textAlign: 'start',
    fontFamily: 'inherit',
    cursor: disabled ? 'default' : 'pointer',
    flex: 1,
    paddingInline: 'var(--MultiSelect-paddingInline)',
    paddingBlockStart: '28px',
    paddingBlockEnd: '8.5px',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',

    '&:before': {
      content: '""',
      display: 'block',
      position: 'absolute',
      top: 'calc(-1 * var(--variant-borderWidth, 0px))',
      left: 'calc(-1 * var(--variant-borderWidth, 0px))',
      right: 'calc(-1 * var(--variant-borderWidth, 0px))',
      bottom: 'calc(-1 * var(--variant-borderWidth, 0px))',
      borderRadius: 'var(--MultiSelect-radius)',
    },
  }),
);

// warning
export const StyledLabel = styled('label', {
  shouldForwardProp: (prop) => prop !== 'isActive' && prop !== 'isError',
})<CustomSelectProps>(({ isActive, isError, theme }) => ({
  position: 'absolute',
  width: '100%',
  paddingInlineStart: 'var(--MultiSelect-paddingInline)',
  paddingInlineEnd: '64px',
  textOverflow: 'ellipsis',
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  transition: '0.2s',
  color: isError
    ? theme.palette.danger.outlinedColor
    : theme.palette.text.secondary,

  fontSize: theme.typography.body1.fontSize,
  fontWeight: theme.typography.body1.fontWeight,
  lineHeight: theme.typography.body1.lineHeight,
  transform: 'translateY(18px)',

  ...(isActive && {
    fontSize: theme.typography.body3.fontSize,
    fontWeight: theme.typography.body3.fontWeight,
    lineHeight: theme.typography.body3.lineHeight,
    transform: 'translateY(9.5px)',
    paddingInlineEnd: '80px',
  }),
}));

// warning
export const SelectIndicator = styled('div')(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  flexShrink: 0,
  color: theme.palette.text.secondary,
}));

// libs/shared/ui/src/controls/MultiSelect/MultiSelectFormField.tsx

import { Select } from '@mui/base/Select';
import { prepareForSlot } from '@mui/base/utils';
import { Stack, styled, Tooltip } from '@mui/joy';
import FormControl from '@mui/joy/FormControl';
import FormHelperText from '@mui/joy/FormHelperText';
import { SxProps } from '@mui/system';
import { ComponentProps, ReactNode, SyntheticEvent, useId } from 'react';
import {
  Controller,
  ControllerProps,
  ControllerRenderProps,
  FieldValues,
  Path,
} from 'react-hook-form';

import SelectIcon from '@opm/shared-assets/vector/arrow-top-down.svg';
import { mergeSx } from '@opm/shared-util';

import { InputClearButton } from '../../buttons';
import * as S from './style';

interface MultiSelectFormFieldProps<
  TFieldValues extends FieldValues,
  TName extends Path<TFieldValues>,
> extends Omit<ControllerProps<TFieldValues, TName>, 'render' | 'variant'>,
    Omit<
      ComponentProps<typeof Select>,
      | keyof ControllerProps<TFieldValues, TName>
      | keyof ControllerRenderProps<TFieldValues, TName>
    > {
  sx?: SxProps;
  label?: ReactNode;
  variant?: 'outlined';
  errorVariant?: 'tooltip' | 'under-field';
}

const StyledListSlot = prepareForSlot(S.StyledList);

export function MultiSelectFormField<
  TFieldValues extends FieldValues = never,
  TName extends Path<TFieldValues> = Path<TFieldValues>,
>(props: MultiSelectFormFieldProps<TFieldValues, TName>) {
  const {
    control,
    name,
    rules,
    label,
    sx,
    disabled,
    children,
    errorVariant = 'under-field',
    ...selectProps
  } = props;

  const selectId = useId();

  return (
    <Controller<TFieldValues, TName>
      control={control}
      name={name}
      rules={rules}
      render={({ field, fieldState: { invalid, error } }) => {
        const { value, onChange } = field;

        const errorMessage =
          typeof error?.message === 'string' ? error.message : null;
        const errorInTooltip = errorVariant === 'tooltip' && errorMessage;
        const errorUnderField = errorVariant === 'under-field' && errorMessage;

        const handleChange = (e: SyntheticEvent | null, newValue: number[]) => {
          if (newValue !== field.value) {
            onChange(newValue);
          }
        };

        const onRemoveClick = () => {
          field.onChange([]);
        };

        const id = selectProps.id || selectId;
        const isActive = !!value?.length;
        const hasError = !!error || invalid;

        return (
          <Tooltip
            title={errorInTooltip}
            followCursor
            sx={{ zIndex: 'var(--joy-zIndex-popup) - 1' }}
          >
            <FormControl sx={mergeSx(sx)} error={hasError}>
              <S.SelectLayout
                isActive={isActive}
                isError={hasError}
                disabled={disabled}
              >
                <S.StyledLabel
                  htmlFor={id}
                  isActive={isActive}
                  isError={hasError}
                >
                  {label || ''}
                </S.StyledLabel>

                <S.StyledSelectButton
                  disabled={disabled}
                  multiple
                  slots={{ listbox: StyledListSlot }}
                  id={id}
                  slotProps={{
                    popup: {
                      disablePortal: true,
                    },
                  }}
                  {...field}
                  {...selectProps}
                  onChange={handleChange}
                >
                  {children}
                </S.StyledSelectButton>

                <Stack
                  direction="row"
                  alignItems="center"
                  spacing="1px"
                  mr="16px"
                >
                  {isActive && (
                    <InputClearButton
                      tabIndex={-1}
                      disabled={disabled}
                      onClick={onRemoveClick}
                      size="lg"
                    />
                  )}

                  <S.SelectIndicator>
                    <StyledSelect disabled={disabled} className="selectIcon" />
                  </S.SelectIndicator>
                </Stack>
              </S.SelectLayout>

              {errorUnderField && (
                <FormHelperText
                  sx={{
                    pl: '16px',
                  }}
                >
                  {errorMessage ?? ''}
                </FormHelperText>
              )}
            </FormControl>
          </Tooltip>
        );
      }}
    />
  );
}

const StyledSelect = styled(SelectIcon)<{ disabled?: boolean }>(
  ({ disabled, theme }) => ({
    width: '24px',
    height: '24px',
    ...(disabled && {
      color: theme.palette.components.icons.disabled,
    }),
  }),
);

diagnostics.json:

[
  {
    "filePath": "libs/shared/ui/src/controls/MultiSelect/style.ts",
    "plugin": "deslop",
    "rule": "unused-export",
    "severity": "warning",
    "message": "Unused export: `SelectLayout` is exported but no module imports it, so it expands the public surface and can mislead callers about supported API.",
    "help": "Drop the `export` keyword (or remove the declaration) if no other module uses this symbol.",
    "line": 11,
    "column": 13,
    "category": "Maintainability"
  },
  {
    "filePath": "libs/shared/ui/src/controls/MultiSelect/style.ts",
    "plugin": "deslop",
    "rule": "unused-export",
    "severity": "warning",
    "message": "Unused export: `StyledSelectButton` is exported but no module imports it, so it expands the public surface and can mislead callers about supported API.",
    "help": "Drop the `export` keyword (or remove the declaration) if no other module uses this symbol.",
    "line": 57,
    "column": 13,
    "category": "Maintainability"
  },
  {
    "filePath": "libs/shared/ui/src/controls/MultiSelect/style.ts",
    "plugin": "deslop",
    "rule": "unused-export",
    "severity": "warning",
    "message": "Unused export: `StyledLabel` is exported but no module imports it, so it expands the public surface and can mislead callers about supported API.",
    "help": "Drop the `export` keyword (or remove the declaration) if no other module uses this symbol.",
    "line": 88,
    "column": 13,
    "category": "Maintainability"
  },
  {
    "filePath": "libs/shared/ui/src/controls/MultiSelect/style.ts",
    "plugin": "deslop",
    "rule": "unused-export",
    "severity": "warning",
    "message": "Unused export: `SelectIndicator` is exported but no module imports it, so it expands the public surface and can mislead callers about supported API.",
    "help": "Drop the `export` keyword (or remove the declaration) if no other module uses this symbol.",
    "line": 117,
    "column": 13,
    "category": "Maintainability"
  }
]