Skip to content

Tooltip not appearing in <script> part of Svelte file (with experimental class-regex) #822

Closed
@MichaelAllenWarner

Description

@MichaelAllenWarner

What version of VS Code are you using?

v1.79.1

What version of Tailwind CSS IntelliSense are you using?

v0.9.11

What version of Tailwind CSS are you using?

v3.3.2

What package manager are you using?

npm

What operating system are you using?

macOS

Tailwind config

/** @type {import('tailwindcss').Config}*/
const config = {
  content: ["./src/**/*.{html,js,svelte,ts}"],

  theme: {
    extend: {},
  },

  plugins: [],
};

module.exports = 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/sveltekit-tw-intellisense-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 /src/routes/+page.svelte in VS Code, but I've also included my global VS Code settings above as requested.)

Describe your issue

In the <script> part of a Svelte file, my experimental class-regex setting seems to be working in all ways except for the tooltips that should appear on hover. You can see in this video clip that I get autocomplete functionality and the little color-square for color-related classes, but no hover-tooltip:

Screen.Recording.2023-07-10.at.10.45.10.AM.mov

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions