search

tailwindlabs / tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
2.88k stars 195 forks source link

Extension does not initialize in projects in a bracketed folder #698

Closed apriltaoyvr closed 1 year ago

apriltaoyvr commented 1 year ago

What version of Tailwind CSS IntelliSense are you using?

v0.9.5

What version of Tailwind CSS are you using?

3.2.4

What package manager are you using?

Yarn 3. This also happens with npm and pnpm.

What operating system are you using?

Windows

Tailwind config

module.exports = {
  content: [
    './app/**/*.{jsx,tsx}',
    './pages/**/*.{jsx,tsx}',
    './components/**/*.{jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  darkMode: 'class',
  plugins: [require('@tailwindcss/forms')],
};

VS Code settings

{
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[markdown]": {
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
  },
  "[mdx]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[postcss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[rust]": {
    "editor.defaultFormatter": "rust-lang.rust-analyzer"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[xml]": {
    "editor.defaultFormatter": "fabianlauer.vs-code-xml-format"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "auto-close-tag.activationOnLanguage": [
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascriptreact",
    "typescriptreact",
    "plaintext",
    "mdx",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (EEx)",
    "HTML (Eex)",
    "plist"
  ],
  "auto-close-tag.insertSpaceBeforeSelfClosingTag": true,
  "better-comments.highlightPlainText": true,
  "better-comments.tags": [
    {
      "backgroundColor": "transparent",
      "bold": false,
      "color": "#eb6f92",
      "italic": false,
      "strikethrough": false,
      "tag": "!",
      "underline": false
    },
    {
      "backgroundColor": "transparent",
      "bold": false,
      "color": "#9ccfd8",
      "italic": false,
      "strikethrough": false,
      "tag": "?",
      "underline": false
    },
    {
      "backgroundColor": "transparent",
      "bold": false,
      "color": "#6e6a86",
      "italic": false,
      "strikethrough": true,
      "tag": "//",
      "underline": false
    },
    {
      "backgroundColor": "transparent",
      "bold": false,
      "color": "#c4a7e7",
      "italic": false,
      "strikethrough": false,
      "tag": "*",
      "underline": false
    }
  ],
  "cSpell.language": "en,en-GB",
  "cSpell.userWords": [
    "FOUC",
    "hoverable",
    "premade",
    "pressable",
    "searchbar",
    "skillset",
    "supabase",
    "webm",
    "webp"
  ],
  "colorize.colorized_colors": [
    "BROWSERS_COLORS",
    "HEXA",
    "RGB",
    "ARGB",
    "HSL"
  ],
  "colorize.colorized_variables": [
    "CSS",
    "SASS"
  ],
  "colorize.decoration_type": "underline",
  "colorize.exclude": [
    "**/.git",
    "**/.svn",
    "**/.hg",
    "**/CVS",
    "**/.DS_Store",
    "**/.git",
    "**/node_modules",
    "**/bower_components",
    "**/tmp",
    "**/dist",
    "**/tests"
  ],
  "colorize.include": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "**/*.styled.**",
    "**/*.{js, jsx}",
    "**/*.{ts, tsx}",
    "**/*.{md, msx}"
  ],
  "colorize.languages": [
    "css",
    "sass",
    "scss",
    "less",
    "postcss",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "stylus",
    "xml",
    "svg",
    "json"
  ],
  "console-ninja.toolsToEnableSupportAutomaticallyFor": {
    "live-preview": true,
    "live-server": true
  },
  "debug.javascript.unmapMissingSources": true,
  "doiuse.browsers": [
    ">5%",
    "not IE 11"
  ],
  "doiuse.enable": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
  "editor.codeLensFontFamily": "\"Cascadia Mono\"",
  "editor.fontFamily": "\"Fira Code\"",
  "editor.fontLigatures": true,
  "editor.formatOnPaste": true,
  "editor.guides.bracketPairs": "active",
  "editor.guides.bracketPairsHorizontal": false,
  "editor.inlayHints.fontFamily": "\"Cascadia Mono\"",
  "editor.inlineSuggest.enabled": true,
  "editor.linkedEditing": true,
  "editor.mouseWheelZoom": true,
  "editor.semanticTokenColorCustomizations": {
    "[Rosé Pine*]": {
      "rules": {
        "function.unsafe": "#eb6f92",
        "method.unsafe": "#eb6f92",
        "operator.unsafe": "#eb6f92"
      }
    },
    "enabled": true,
    "rules": {
      /* Rust */
      "*.mutable": {
        "underline": false // underline is the default
      }
    }
  },
  "editor.smoothScrolling": true,
  "editor.suggestSelection": "first",
  "editor.tabCompletion": "on",
  "editor.tabSize": 2,
  "editor.tokenColorCustomizations": {
    "[Rosé Pine*]": {
      "textMateRules": [
        {
          "scope": [
            "entity.other.attribute-name",
            "entity.other.inherited-class",
            "support.function",
            "variable",
            "meta.directive.vue"
          ],
          "settings": {
            "fontStyle": ""
          }
        },
        {
          "scope": [
            "storage.modifier.mut.rust"
          ],
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "scope": [
            "constant.other.color.rgb-value.hex.css",
            "constant.numeric.css"
          ],
          "settings": {
            "foreground": "#f6c177"
          }
        },
        {
          "scope": [
            "storage.type.tsx",
            "meta.var.expr.tsx",
            "meta.block.tsx",
            "meta.function.expression.tsx",
            "meta.export.default.tsx",
            "source.tsx"
          ],
          "settings": {
            "foreground": "#2288b1"
          }
        },
        {
          "scope": [
            "keyword.control.flow.tsx",
            "meta.block.tsx",
            "meta.function.expression.tsx",
            "meta.export.default.tsx",
            "source.tsx"
          ],
          "settings": {
            "foreground": "#9ccfd8"
          }
        }
      ]
    }
  },
  "editor.wordWrap": "on",
  "emmet.excludeLanguages": [],
  "emmet.includeLanguages": {
    "markdown": "javascriptreact",
    "markdown-react": "javascriptreact"
  },
  "emmet.syntaxProfiles": {
    "html": {
      "attr_quotes": "single"
    },
    "js": {
      "attr_quotes": "single",
      "self_closing_tag": true
    },
    "jsx": {
      "attr_quotes": "single",
      "self_closing_tag": true
    },
    "xml": {
      "attr_quotes": "single"
    }
  },
  "emmet.triggerExpansionOnTab": true,
  "errorLens.errorGutterIconColor": "#FF9580",
  "errorLens.infoGutterIconColor": "#8AFF80",
  "errorLens.statusBarColorsEnabled": true,
  "errorLens.warningGutterIconColor": "#FFFF80",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "files.associations": {
    "*.jsx": "javascriptreact",
    "*.mdx": "mdx",
    "*.scss": "scss",
    "*.tsx": "typescriptreact"
  },
  "files.autoSave": "afterDelay",
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "githubPullRequests.createOnPublishBranch": "never",
  "i18n-ally.dirStructure": "auto",
  "i18n-ally.displayLanguage": "en",
  "i18n-ally.editor.preferEditor": true,
  "i18n-ally.extract.autoDetect": true,
  "i18n-ally.fullReloadOnChanged": true,
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sortKeys": true,
  "i18n-ally.translate.fallbackToKey": true,
  "javascript.suggest.paths": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "liveSassCompile.settings.autoprefix": [
    "> 5%",
    "last 2 versions"
  ],
  "liveSassCompile.settings.formats": [
    {
      "extensionName": ".css",
      "format": "compressed"
    }
  ],
  "liveServer.settings.donotShowInfoMsg": true,
  "markdown.occurrencesHighlight.enabled": true,
  "markdown.preview.fontFamily": "\"Cascadia Mono\"",
  "markdownlint.lintWorkspaceGlobs": [
    "**/*.{md,mdx,mkd,mdwn,mdown,markdown,markdn,mdtxt,mdtext,workbook}",
    "!**/bower_components",
    "!**/node_modules",
    "!**/vendor",
    "!**/.git"
  ],
  "material-icon-theme.folders.theme": "specific",
  "material-icon-theme.saturation": 1,
  "path-intellisense.autoTriggerNextSuggestion": true,
  "postcssSorting.config": {
    "order": [
      "custom-properties",
      "dollar-variables",
      "declarations",
      "rules",
      "at-rules"
    ],
    "properties-order": [
      "display",
      "position",
      "top",
      "right",
      "bottom",
      "left"
    ]
  },
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,
  "quokka.compactMessageOutput": true,
  "quokka.showValueOnMultilineSelection": true,
  "reactSnippets.settings.importReactOnTop": false,
  "reactSnippets.settings.prettierEnabled": true,
  "redhat.telemetry.enabled": true,
  "security.workspace.trust.untrustedFiles": "open",
  "sortJSON.contextMenu": {
    "sortJSONAlphaNumReverse": false,
    "sortJSONKeyLengthReverse": false,
    "sortJSONReverse": false,
    "sortJSONTypeReverse": false,
    "sortJSONValuesReverse": false
  },
  "stylelint.packageManager": "yarn",
  "stylelint.snippet": [
    "css",
    "less",
    "postcss",
    "scss",
    "styled"
  ],
  "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "styled"
  ],
  "tailwindCSS.emmetCompletions": true,
  "terminal.integrated.copyOnSelection": true,
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.enableBell": true,
  "terminal.integrated.profiles.windows": {
    "Command Prompt": {
      "args": [],
      "icon": "terminal-cmd",
      "path": [
        "${env:windir}\\Sysnative\\cmd.exe",
        "${env:windir}\\System32\\cmd.exe"
      ]
    },
    "Git Bash": {
      "source": "Git Bash"
    },
    "PowerShell": {
      "icon": "terminal-powershell",
      "source": "PowerShell"
    },
    "Windows PowerShell": {
      "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
    }
  },
  "todohighlight.defaultStyle": {
    "backgroundColor": "transparent",
    "border": "1px dashed #c4a7e7",
    "color": "#c4a7e7",
    "isWholeLine": false,
    "overviewRulerColor": "#c4a7e7"
  },
  "todohighlight.keywords": [
    "DEBUG:",
    "REVIEW:",
    "NOTE:",
    {
      "backgroundColor": "transparent",
      "border": "1px dashed #9ccfd8",
      "color": "#9ccfd8",
      "isWholeLine": false,
      "overviewRulerColor": "#9ccfd8",
      "text": "RESTYLE:"
    },
    {
      "backgroundColor": "transparent",
      "border": "1px dashed #eb6f92",
      "color": "#eb6f92",
      "isWholeLine": false,
      "overviewRulerColor": "#eb6f92",
      "text": "FIXME:"
    },
    {
      "backgroundColor": "transparent",
      "border": "1px dashed #f6c177",
      "color": "#f6c177",
      "isWholeLine": false,
      "overviewRulerColor": "#f6c177",
      "text": "TODO:"
    }
  ],
  "typescript.implementationsCodeLens.enabled": true,
  "typescript.referencesCodeLens.enabled": true,
  "typescript.suggest.paths": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "window.autoDetectColorScheme": true,
  "workbench.colorCustomizations": {
    "[Dracula Pro]": {
      "activityBar.background": "#151320",
      "activityBar.border": "#151320",
      "breadcrumb.background": "#151320",
      "editor.background": "#151320",
      "editorGroupHeader.tabsBackground": "#151320",
      "panel.background": "#151320",
      "sideBar.border": "#9580ff0a",
      "sideBarSectionHeader.background": "#151320",
      "sideBarSectionHeader.border": "#27262921",
      "statusBar.background": "#151320",
      "tab.activeBackground": "#151320",
      "tab.activeBorderTop": "#ff7ebf",
      "tab.activeModifiedBorder": "#ff7ebf",
      "tab.border": "#ff7ebf13",
      "tab.inactiveBackground": "#151320",
      "terminal.background": "#151320",
      "titleBar.inactiveBackground": "#151320"
    },
    "[Rosé Pine*]": {
      "editorInlayHint.background": "#19172448",
      /* Rust */
      "editorInlayHint.foreground": "#6e6a86f0",
      "editorInlayHint.parameterBackground": "#19172448",
      "editorInlayHint.parameterForeground": "#9ccfd8f0",
      "editorInlayHint.typeBackground": "#19172448",
      // Overrides for specific kinds of inlay hints
      "editorInlayHint.typeForeground": "#c4a7e7f0"
    },
    "[Tokyo Night]": {
      "activityBar.foreground": "#bdc7f0",
      "activityBar.inactiveForeground": "#787c99",
      "breadcrumb.activeSelectionForeground": "#bdc7f0",
      "breadcrumb.focusForeground": "#bdc7f0",
      "breadcrumb.foreground": "#959cbd",
      "dropdown.foreground": "#959cbd",
      /* Rust */
      // "editorInlayHint.foreground": "#868686f0",
      "editorInlayHint.background": "#00000000",
      "editorInlayHint.parameterForeground": "#fdb6fdf0",
      // Overrides for specific kinds of inlay hints
      "editorInlayHint.typeForeground": "#696d87f0",
      "foreground": "#959cbd",
      "gitDecoration.ignoredResourceForeground": "#696d87",
      "input.foreground": "#959cbd",
      "input.placeholderForeground": "#959cbd",
      "list.activeSelectionForeground": "#bdc7f0",
      "list.focusForeground": "#bdc7f0",
      "list.hoverForeground": "#bdc7f0",
      "list.inactiveSelectionBackground": "#202330",
      "list.inactiveSelectionForeground": "#bdc7f0",
      "menu.foreground": "#bdc7f0",
      "menubar.selectionForeground": "#bdc7f0",
      "panelTitle.activeBorder": "#3d59a1",
      "panelTitle.activeForeground": "#bdc7f0",
      "panelTitle.inactiveForeground": "#959cbd",
      "sideBar.foreground": "#959cbd",
      "statusBar.foreground": "#bdc7f0",
      "tab.activeForeground": "#bdc7f0",
      "tab.inactiveForeground": "#959cbd"
    }
  },
  "workbench.colorTheme": "Rosé Pine",
  "workbench.editor.untitled.hint": "hidden",
  "workbench.editorAssociations": {
    "*.zip": "default"
  },
  "workbench.iconTheme": "material-icon-theme",
  "workbench.layoutControl.enabled": true,
  "workbench.list.smoothScrolling": true,
  "workbench.preferredHighContrastLightColorTheme": "Tokyo Night",
  "workbench.productIconTheme": "icons-carbon",
  "workbench.startupEditor": "none",
  "yaml.format.singleQuote": true,
  "editor.quickSuggestions": {
    "strings": "inline"
  },
  "prettier.endOfLine": "auto"
}

Reproduction URL

https://github.com/apriltaoyvr/tailwind-intellisense-reproduction

Describe your issue TailwindCSS Intellisense does not work if a project is within a folder with square brackets. It will detect the config file (and Tailwind will work fine) but the extension will never initialize. No intellisense completion, highlighted colours, hover for info, etc.

I could not figure out why this was happening for some projects but not others until I saw https://stackoverflow.com/a/70999335 so it is not an isolated issue.

To reproduce:

  1. Create an outer folder with square brackets e.g. [example]
  2. Create a project in the folder
  3. Download and initialize Tailwind
  4. Try using classes and checking for intellisense
bradlc commented 1 year ago

Hey @apriltaoyvr, thanks for reporting the issue. This is fixed in v0.9.6 👍