problem with injected css and js in python file

[sopa0]

Hi, Currently working with FastHTML, which is a python lib, which requires me to sometimes write css and js in .py files. Something like that:

For css (example pulled from the FastHTML docs)

from fasthtml.common import * 

app, rt = fast_app(
    pico=False,
    hdrs=(
        Link(rel='stylesheet', href='assets/normalize.min.css', type='text/css'),
        Link(rel='stylesheet', href='assets/sakura.css', type='text/css'),
        **Style("p {color: red;}")**
))

For js (example pulled from this repo

def playing_card(suit, rank):
    "Create a flippable playing card component for any card"
    front = _card_bg(f'fronts/{suit}_{rank}')
    back = _card_bg('backs/blue2')
    return Div(
        Div(cls="front"), Div(cls="back"),
        StyleX('playingcard.css', front=front, back=back),
        Script("me().on('click', ev => me(ev).classToggle('flipped'))"),
        cls="playing-card")

Basically, some utility callables take in a str as a parameter, which contains another language. I made a few TS injection queries, which are in my after/queries/python/injections.scm:

;; extends
((call
  function: (identifier) @function_name (#eq? @function_name "Style")
  arguments: (argument_list
    (string
      (string_content) @injection.content)))

  (#set! injection.language "css"))

((call
  function: (identifier) @function_name (#eq? @function_name "Script")
  arguments: (argument_list
    (string
      (string_content) @injection.content)))

  (#set! injection.language "javascript"))

((call
  function: (identifier) @function_name (#eq? @function_name "On")
  arguments: (argument_list

    (string
      (string_content) @injection.content))

  (#set! injection.language "javascript")))

I know the queries work because I get proper highlighting for the injected langs

Now, when I run :lua require("otter").activate({"css", "javascript"}, true, true) in my python files, I get no lsp features, no autocomplete, even though otter is running, and running :lua require("otter").export() gives me correct contents for the hidden buffers (each contain their respective css and javascript content)

as far as my config goes, it's the basic one from the docs:

{
    'jmbuhr/otter.nvim',
    dependencies = {
      'nvim-treesitter/nvim-treesitter',
    },
    opts = {},
},

So, is there anything I can do on my end to fix it, or is it an issue with the plugin? Thanks

[jmbuhr]

Your injection doesn't work for me on the css part, but it does for your js example, for which I then also get e.g. completion:

I assume you have language servers installed and configured with lspconfig for css and js respectively?

I do notice that requests seem to be offset by 1 character, so e.g. the hover for ev is available over v and the space to the right of it but not over the e: So that part is probably a bug in otter.

[jmbuhr]

btw. otter.activate() without arguments is enough, it uses all the languages it can find by default and the other two args are also the default.

[jmbuhr]

Ah, your css example had additional **, those have to be removed to get valid syntax and thus also injections.

[sopa0]

Ah, your css example had additional **, those have to be removed to get valid syntax and thus also injections.

Ah yeah right, probs a mistake on my part As far as the lsp situation, I got both cssls and vtsls working in their respective filetypes

Css is somewhat working, in the context of a multi-line string:

Though, on the first autocomplete, it indents like this and stop working until I close and reopen the file:

Interesting that the js lsp in Script("") works for you, not the case for me, I'll try making a minimal config with otter only see if it's one of my plugins giving me a hard time

[sopa0]

In Script("") I seem to get python lsp instead:

(got both ruff and pyright)

EDIT: javascript lsp now works in Script() after I removed eslint for some reason