Line limit?

[zslabs]

When creating more complex components that have lots of variations, the hover/auto-completion stops after a certain line. In the case below, both stop with the variation === 'danger' line.

Note: I am not using any custom settings/regex for my implementation.

import * as React from 'react'
import ctl from '@netlify/classnames-template-literals'

interface IconButtonProps extends React.ComponentPropsWithoutRef<'button'> {
  active?: boolean
  variation?: 'primary' | 'danger' | 'contrast' | 'default'
}

const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
  ({ active, variation = 'primary', children, ...rest }, ref) => {
    return (
      <button
        className={ctl(`
        text-2xl disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:text-current duration-150 ease-linear focus:outline-none rounded-full p-1

        ${variation === 'default' && 'hover:bg-gray-200 dark:hover:bg-gray-700'}
        ${variation === 'primary' && 'hover:text-blue-500 hover:bg-blue-500/5'}
        ${
          variation === 'primary' &&
          active &&
          'text-blue-500 bg-blue-500/5 cursor-default'
        }
        ${variation === 'danger' && 'hover:text-red-500 hover:bg-red-500/5'}
        ${
          variation === 'contrast' &&
          'dark:text-gray-800 text-gray-300 dark:bg-gray-100 bg-gray-800 absolute bottom-2 right-2 z-10'
        }
      `)}
        type="button"
        {...rest}
      >
        {children}
      </button>
    )
  }
)

export default IconButton

[giliamverheide]

Just ran into the same issue using the classnames library, no custom Regex in a React project.
There's seems to be both a total word limit and a line limit, but results are a little inconsistent.
For example, removing 9 properties from the first line, leaving just 'inline-flex', adds another 4 properties with hints, leaving just the last line ('rounded-md transform ...') broken.

<div
  className={cx(
    'inline-flex justify-center items-center font-sans font-medium border border-transparent rounded shadow-sm cursor-pointer',
    {
      'h-9 px-4 text-sm': size === 'sm',
      'h-10.5 px-5 text-base': size === 'md',
      'h-15 px-6 text-lg': size === 'lg',
      'bg-orange hover:bg-orange-500 text-white': variant === 'primary',
      'bg-white hover:bg-gray-100 text-gray-800 border-gray-300': variant === 'light',
      'bg-orange-50 hover:bg-orange-100 text-orange-900': variant === 'secondary',
      // Intellisense stops at and from 'text-orange-900' on the previous line
      'bg-gray-800 hover:bg-gray-700 text-white': variant === 'dark',
      'rounded-md transform -skew-x-10': isSkewed
    }
  )}
>
  <span className={cx({ 'transform skew-x-10': isSkewed })}>{children}</span>
</div>

View full code of the above snippet:

import PropTypes from 'prop-types'
import cx from 'classnames'

import styles from './Button.module.css'

function Button({ variant, size, isSkewed, children }) {
  return (
    <div
      className={cx(
        'inline-flex justify-center items-center font-sans font-medium border border-transparent rounded shadow-sm cursor-pointer',
        {
          'h-9 px-4 text-sm': size === 'sm',
          'h-10.5 px-5 text-base': size === 'md',
          'h-15 px-6 text-lg': size === 'lg',
          'bg-orange hover:bg-orange-500 text-white': variant === 'primary',
          'bg-white hover:bg-gray-100 text-gray-800 border-gray-300': variant === 'light',
          'bg-orange-50 hover:bg-orange-100 text-orange-900': variant === 'secondary',
          // afdwef
          'bg-gray-800 hover:bg-gray-700 text-white': variant === 'dark',
          'rounded-md transform -skew-x-10': isSkewed
        }
      )}
    >
      <span className={cx({ 'transform skew-x-10': isSkewed })}>{children}</span>
    </div>
  )
}

Button.propTypes = {
  variant: PropTypes.oneOf(['primary', 'secondary', 'light', 'dark']),
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  isSkewed: PropTypes.bool
}

Button.defaultProps = {
  variant: 'primary',
  size: 'md',
  isSkewed: false
}

export { Button }

[giliamverheide]

@bradlc The latest version published just minutes earlier fixed the problem I had as described above, thank you!
Would it make sense to make the search range customizable?

[bradlc]

The search range has been increased in v0.7.1 so this should be resolved now.

Would it make sense to make the search range customizable?

Yeah that's not a bad idea! I think I'll leave it for now but if this comes up again then probably worth doing!

[moroshko]

Hey @bradlc
Do I understand correctly that, based on this, the current search range is 1000 characters from the cursor?
I have the code below where the hovers stop working at some point.
Can we please make the search range customizable?

<button
  className={cx(
    "relative inline-block rounded outline-offset-2",
    disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
    variant === "filled" && [
      "font-semibold text-white text-center",
      size === "sm" && "h-8 min-w-[4rem] px-2",
      size === "lg" && "h-10 min-w-[4.5rem] px-3",
      disabled && "bg-gray-800",
      !disabled && "bg-gray-800 hover:bg-gray-900 active:bg-black",
    ],
    variant === "outline" && [
      "border-gray-200 font-semibold text-grey-800 border text-center",
      size === "sm" && "h-8 min-w-[4rem] px-2",
      size === "lg" && "h-10 min-w-[4.5rem] px-3",
      disabled && "bg-white",
      !disabled && "bg-white hover:bg-gray-100 active:border-gray-500",
    ],
    variant === "danger" && [
      "border-red-300 font-semibold text-red-600 border text-center",
      size === "sm" && "h-8 min-w-[4rem] px-2",
      size === "lg" && "h-10 min-w-[4.5rem] px-3",
      disabled && "bg-white", // Hovers don’t work from this point on
      !disabled && "bg-white hover:bg-red-50 active:border-red-600",
    ],
    variant === "ghost" && [
      "font-semibold text-grey-800 text-center",
      size === "sm" && "h-8 min-w-[4rem] px-2",
      size === "lg" && "h-10 min-w-[4.5rem] px-3",
      !disabled && "hover:bg-gray-100 active:bg-gray-200",
    ]
  )}
>
  {children}
</button>

In case it matters, I use the following classRegex:

"tailwindCSS.experimental.classRegex": [
  ["\\{([^)]*)\\}", "\"([^\"]*)\""],
  ["cx\\(([^)]*)\\)", "\"([^\"]*)\""]
],