Container queries aren't supported

[thomashigginbotham]

Container queries are supported in all major browsers, but the plugin doesn't recognize them.

[jimbojw]

Just ran into this myself. Is there a way to silence the warning?

[jimbojw]

Workaround: You can disable Lit plugin's CSS validation checks entirely by adding the following configuration to your tsconfig.json:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "ts-lit-plugin",
        "rules": {
          "no-invalid-css": "off"
        }
      }
    ],
}

The downside of this approach is that it turns of all validation, not just for the offending missing at rule.

[jimbojw]

The root cause is the version of vscode-css-languageservice. The current latest version of lit-analyzer (2.0.3) depends on vscode-css-languageservice v4.3.0. However the latest version of vscode-css-languageservice at the time of this writing is v6.3.1.

You can force lit-analyzer to use the latest version of vscode-css-languageservice via NPM overrides:

package.json:

  "overrides": {
    "lit-analyzer": {
      "vscode-css-languageservice": "6.3.1"
    }
  }

This will work for the command line invocation:

npx lit-analyzer ./path/to/your/file.ts

However, the VSCode lit plugin is not affected by this override.

NOTE: Once you update the package.json file, you'll probably have to delete your package-lock.json in order to have your override take effect. You may also need to delete your node_modules directory. Once you've cleared out the offending old version, you can run npm install to re-generate your package-lock.json file and download all dependencies.

[jimbojw]

In another effort to work around this problem, I uninstalled the VSCode lit plugin and tried the ts-lit-plugin option instead. However I can't get it to work. Visual Studio reports no problems with my @container queries, but it also doesn't seem to be checking the css templates at all.

I think the only truly effective workaround would be to download the lit plugin code, override the vscode-css-languageservice dependency version, build it, then install from the local VSIX version instead of the package maintainer's version.

[jimbojw]

Update: This problem is only with the deployed versions and has been fixed in head. So if you build and package from source, you can install from the built packaged.vsix file and it will support @container CSS queries.

First, uninstall the Lit Plugin from VSCode. You may have to restart for it to be fully deactivated.

Next, check out this repo:

git clone [email protected]:runem/lit-analyzer.git

Install dependencies:

npm install

Run the build process:

npm run build

Run the package process:

npm run package

Now, find the generated packaged.vsix file. It should be under ./packages/vscode-lit-plugin/out/packaged.vsix.

In VSCode, click the gear icon at the bottom left, then choose Extensions. At the top of the extensions panel, expand the three dots menu and choose "Install from VSIX...". Navigate to the packaged.vsix file and choose it.

Now you have the head version of the plugin, with @container CSS query support.

[jimbojw]

One more note. This is my first time using @container queries and it took some fiddling to figure out how to work it with the shadow DOM. Here's a minimum viable example:

import { css, html, LitElement } from "lit";

export class YourElement extends LitElement {
  static styles = css`
    :host {
      container: example-container;
      container-type: inline-size;
    }

    p {
      color: blue;
    }

    @container example-container (max-width: 600px) {
      p {
        color: red;
      }
    } 
  `;

  render() {
    return html` <p>Text that turns from blue to red under 600px.</p> `;
  }
}

I haven't tested this exact code, so there may be a bug. Figured it out from this CodePen: https://codepen.io/wavebeem/pen/RwdVvJO

[davie-robertson]

Any update on when this will reach the main branch? I see that it was fixed in the language server a little while back https://github.com/microsoft/vscode-css-languageservice/issues/329