Skip to content

Tooltip not appearing with experimental class-regex if at least 2001 characters in file precede the class #848

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MichaelAllenWarner opened this issue Aug 25, 2023 · 2 comments

Comments

@MichaelAllenWarner
Copy link

MichaelAllenWarner commented Aug 25, 2023

What version of VS Code are you using?

v1.81.1

What version of Tailwind CSS IntelliSense are you using?

v0.9.13

What version of Tailwind CSS are you using?

v3.3.3

What package manager are you using?

npm

What operating system are you using?

macOS

Tailwind config

(This isn't quite the full Tailwind config, for reasons that will become clear when you view the video below, but it's the substantial part of what you get by default with create-next-app.)

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

VS Code settings

{
  "[markdown]": {
    "editor.quickSuggestions": {
      "comments": "on",
      "strings": "on",
      "other": "on"
    }
  },
  "eslint.options": {
    "extensions": [".js", ".jsx", ".mdx", ".ts", ".tsx"]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "svelte",
    "mdx"
  ],
  "eslint.runtime": "node",
  "eslint.execArgv": ["--max_old_space_size=8192"],
  "editor.fontSize": 17,
  "editor.fontFamily": "'Victor Mono', 'Fira Code', Menlo, Monaco, 'Courier New', monospace",
  "editor.tabSize": 2,
  "editor.fontLigatures": true,
  "editor.fontWeight": "700",
  "editor.letterSpacing": 0.5,
  "workbench.colorTheme": "Boxy Ocean (dimmed bg)",
  "terminal.integrated.shell.osx": "/bin/zsh",
  "editor.renderWhitespace": "selection",
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": [
          // all comment types
          "comment",

          // true, false, null
          "constant.language",

          // import, from, export, default, return, if, for, break, continue, try, catch, finally,
          // throw, default, yield, await
          "keyword.control",

          // in, void, delete, instanceof
          "keyword.operator.expression",

          // debugger
          "keyword.other",

          // new
          "keyword.operator.new",

          // super, this, arguments
          "variable.language",

          // attributes in html, jsx, etc.
          "entity.other.attribute-name",

          // static, extends, async, private, public, implements
          // constructor, const, let, var, enum, class, function, interface
          // no explicit scopes for constructor, const, let, var
          // also no explicit scope for function without the arrow
          // therefore we enable all storage and explictly exclude the arrow in another scope
          "storage"

          // // no explicit scope for the eval keyword yet
          // // can be targeted with the scope below, but scope is too broad
          // "support.function",

          // // no explicit scope for the package keyword yet
          // // can be targeted with the scope below, but scope is too broad
          // "variable.other.readwrite",
        ],
        "settings": {
          "fontStyle": "italic"
        }
      },
      {
        "scope": [
          //following will be excluded from italics (VSCode has some defaults for italics)
          "invalid",
          "keyword.operator",
          "constant.numeric.css",
          "keyword.other.unit.px.css",
          "constant.numeric.decimal.js",
          "constant.numeric.json",
          "storage.type.function.arrow",
          "variable",
          "entity"
        ],
        "settings": {
          "fontStyle": ""
        }
      }
    ]
  },
  "explorer.sortOrder": "type",
  "workbench.fontAliasing": "antialiased",
  "new-fractal-folder.configFileFormat": "yml",
  "new-fractal-folder.customExtensions": "scss",
  "new-fractal-folder.fractalFileFormat": "twig",
  "new-fractal-folder.readmeFile": true,
  "colorize.languages": ["typescript", "javascript"],
  "php.suggest.basic": false,
  "files.associations": {
    "*.inc": "php"
  },
  "markdownlint.config": {
    "MD033": false
  },
  "scss.validate": false,
  "css.validate": false,
  "redhat.telemetry.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "twigcs.executablePath": "/Users/michaelwarner/.composer/vendor/friendsoftwig/twigcs/bin/twigcs",
  "twigcs.rulesetClass": "FriendsOfTwig\\Twigcs\\Ruleset\\Custom",
  "markdown.extension.italic.indicator": "_",
  "tailwindCSS.experimental.classRegex": [
    // so we can put `/* tw */ ` in front of a JS/TS string and get Tailwind Intellisense in custom spots
    "/\\* tw \\*/ '([^']*)",
    "/\\* tw \\*/ `([^`]*)",
    "/\\* tw \\*/ \"([^\"]*)",
    // these must go directly before a `{` (w/ space in between) and apply to strings until it hits a semi-colon (good for JS/TS if using semi-colons)
    ["/\\* tw \\*/ {([^;]*);", "'([^']*)'"],
    ["/\\* tw \\*/ {([^;]*);", "`([^']*)`"],
    ["/\\* tw \\*/ {([^;]*);", "\"([^\"]*)\""],
    // for Twig: these apply to strings until it hits a `}`
    ["{# tw #} ([^}]*)}", "'([^']*)'"],
    ["{# tw #} ([^}]*)}", "\"([^\"]*)\""]
  ],
  "explorer.confirmUndo": "verbose",
  "emmet.includeLanguages": {
    "twig": "html"
  },
  "mdx.experimentalLanguageServer": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "json.schemas": [],
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "svelte.enable-ts-plugin": true,
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
}

Reproduction URL

https://github.com/MichaelAllenWarner/tailwind-intellisense-config-file-demo

(I've included a setting in my .vscode/settings.json file that I think will make my experimental class-regex work for you if you view the Tailwind config file in VS Code, but I've also included my global VS Code settings above as requested.)

Describe your issue

When using experimental class-regex, it seems that tooltips no longer work if there are at least 2001 characters in the file that precede the class. I'm not sure if that's the entirety of what's going on, but I'm seeing this sort of behavior. The video below shows what I mean, and maybe you can reproduce this behavior when you view the repo in VS Code.

I'd guess it might have something to do with this PR: #840

Screen.Recording.2023-08-25.at.12.30.30.PM.mov
@MichaelAllenWarner
Copy link
Author

To clarify: until very recently, this was working no matter how far into a file I was. And even now, everything else works just fine regardless of depth (autocomplete, color-squares); I think it's only the tooltip that's the problem.

@bradlc
Copy link
Contributor

bradlc commented Aug 29, 2023

Hey @MichaelAllenWarner, this was previously fixed in #846, and upgrading to the latest version of the extension (v0.10.0) should resolve the issue 👍 (There may be a slight delay in this version being available.)

@bradlc bradlc closed this as completed Aug 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants