sublimelsp / LSP-tailwindcss

Tailwind css support for Sublime's LSP plugin
MIT License
54 stars 5 forks source link

No color decorators for syntax from SublimeText/Tailwind CSS #51

Closed jnns closed 1 year ago

jnns commented 1 year ago

When I set the syntax of my stylesheet files in Sublime Text to one of the default ones (CSS, CSS3) the color decorators work just fine. For working with Tailwind CSS I use https://github.com/SublimeText/TailwindCSS/ because directives like @apply and nesting are not supported by the other two. However, color decorators don't work with that syntax.

I tried to change my LSP-tailwindcss settings to include the source.css.tailwindcss scope but it still doesn't work:

{
  "selector": "source.jsx | source.js.react | source.js | source.tsx | source.ts | source.css.tailwind | source.css | source.scss | source.less | text.html.vue | text.html.svelte | text.html.basic | text.html.twig | text.blade | embedding.php | text.html.rails | text.html.erb | text.haml | text.jinja | text.html.elixir",
  "languages": [
    {
      "languageId": "css",
      "scopes": ["source.css", "source.css.tailwind"],
      "syntaxes": [
        "Packages/CSS/CSS.sublime-syntax",
        "Packages/CSS3/CSS3.sublime-syntax",
        "Packages/Tailwind CSS/Tailwind CSS.sublime-syntax"
      ]
    }
  ]
}

Do I have the wrong setup? How do I get the "Tailwind CSS" syntax to show color decorators as well?

Ouptut from "Troubleshooting: LSP-tailwindcss" # Troubleshooting: LSP-tailwindcss ## Version - LSP: 1.20.0 - Sublime Text: 4141 ## Server Test Run - exit code: 0 - output ``` ``` ## Server Configuration - command ```json [ "/usr/bin/node", "/home/jnns/.cache/sublime-text/Package Storage/LSP-tailwindcss/18.7.0/language-server/node_modules/@tailwindcss/language-server/bin/tailwindcss-language-server", "--stdio" ] ``` - shell command ```sh /usr/bin/node "/home/jnns/.cache/sublime-text/Package Storage/LSP-tailwindcss/18.7.0/language-server/node_modules/@tailwindcss/language-server/bin/tailwindcss-language-server" --stdio ``` - selector ``` source.jsx | source.js.react | source.js | source.tsx | source.ts | source.css | source.scss | source.less | text.html.vue | text.html.svelte | text.html.basic | text.html.twig | text.blade | embedding.php | text.html.rails | text.html.erb | text.haml | text.jinja | text.html.elixir ``` - priority_selector ``` (source.css)|(source.css.tailwind) ``` - init_options ```json {} ``` - settings ```json { "tailwindCSS": { "classAttributes": [ "class", "className", "ngClass" ], "colorDecorators": true, "emmetCompletions": false, "experimental": { "classRegex": [] }, "files": { "exclude": [ "**/.git/**", "**/node_modules/**", "**/.hg/**" ] }, "includeLanguages": {}, "lint": { "cssConflict": "warning", "invalidApply": "error", "invalidConfigPath": "error", "invalidScreen": "error", "invalidTailwindDirective": "error", "invalidVariant": "error", "recommendedVariantOrder": "warning" }, "rootFontSize": 16, "showPixelEquivalents": true, "validate": true } } ``` - env ```json { "PATH": "/usr/bin:/usr/bin:" } ``` ## Active view - File name ``` /home/jnns/<...>/forms.css ``` - Settings ```json { "auto_complete_selector": "meta.tag, source - comment - string.quoted.double.block - string.quoted.single.block - string.unquoted.heredoc", "lsp_active": true, "syntax": "Packages/Tailwind CSS/Tailwind CSS.sublime-syntax" } ``` - base scope ``` source.css.tailwind ``` ``` ## Project / Workspace - folders ```json [ "/home/jnns/<...>" ] ``` - is project: True - project data: ```json {} ``` ## LSP configuration ```json { "clients": { "LSP-pyright": { "enabled": false } } } ``` ## System PATH - /home/jnns/.local/bin - /usr/local/bin - /usr/local/sbin - /usr/bin - /usr/sbin
rchl commented 1 year ago

Add this to LSP-tailwindcss settings.

    "initializationOptions": {
        "userLanguages": {
            "tailwind": "css",
        }
    },

Note that this is something that should be fixed in this package still.

BTW. You don't have to care about changing languages as this is for ST3 only.