[css] Support CSS property container-type

[janosh]

Support CSS property container-type.

Browser support has grown rapidly in the 2nd half of 2022, now at 76%.

[rdennis]

The features needed for container queries are:

properties

• container shorthand
  • container-name
  • container-type

at-rule

• @container

length units

• cqw
• cqh
• cqi
• cqb
• cqmin
• cqmax

[natirivero]

+1

[tummalasujith]

+1

[titisouven]

+1
Also other missing properties like x, y and rx (used with svg tag)

[matteorchard]

+1, lots of support already

[MichalNovotnyCZ]

+1

[swashbuck]

+1

[SelfMadeSystem]

+1.0000000000000002

[bandarupk]

When you will release update on this?

[hirasso]

People, could you please refrain from posting +1-comments? This puts unnecessary stress on the maintainers. They will take care of this, even without additional noise from the "community".

They actually also took care of creating this amazing free and open source editor everyone of you is using 😄

A more constructive way to communicate your interest in a feature is to add a 👍 emoji to the original post.

Thank you! 🙏

[starball5]

Related on Stack Overflow: Container-type property and @container rule are not recognized by VS Code?. I'll update my answer there once this is implemented. Cheers and thanks for your team's work!

[msr8]

Any way to make the linter ignore this?

[starball5]

@msr8 see https://stackoverflow.com/a/76125894/11107541

[starball5]

@wileycoyote78 I suggest you create a PR with your https://github.com/wileycoyote78/custom-css/blob/main/.vscode/custom-css.json adapted for VS Code.

[wileycoyote78]

@starball5 forgive my ignorance... PR?

[starball5]

@wileycoyote78 "PR" = "Pull Request" :) https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests

[wileycoyote78]

@starball5 Thanks for the info. I'm afraid I still have questions about this, as I am not all too familiar with GitHub (just know enough to back things up). Since it will be off-topic for this board, I won't ask them here. I'll try to figure it out.

[SIGSTACKFAULT]

+1 considered making a MR but I'm honestly not sure where this data is defined

edit: what did i do?

[FifthTundraG]

Created a PR in microsoft/vscode-css regarding container, container-name, and container-type. See PR #14.

[andrewfoxunista]

+1

[starball5]

wileycoyote78 Also added a PR at microsoft/vscode-css#15

[coolCucumber-cat]

+ Container properties no longer show as errors
+ Hovering over the properties shows the MDN reference
+ Container query units are display correctly

- Still shows errors for container rules (and incorrect syntax highlighting for the name and params)
- Still no Intellisense in containers (syntax highlighting works but you can't even hover)

[FifthTundraG]

Commit #193333 officially adds container, container-name, and container-type support. There are still some complications with the addition of @container, though.

[aeschli]

Parsing support for @container got added by microsoft/vscode-css-languageservice#365

[aeschli]

Verify that @container rules parse without validation errors. Search the web for some examples.
Also verify that there's code completion support and color decorators for statements inside rules
Verify that you can use length usints: cqw, cqh, cqi, cqb, cqmin, cqmax

@container (min-width: 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}

[lauslim12]

Hi there! My apologies for commenting on a closed issue. Please let me know if this issue belongs elsewhere or if I should create an issue in another repository. It seems like this problem still persists in SCSS (not CSS), as you can see in the following screenshot:

As you can see from the screenshot above, I'm trying to use cqw in order to implement a text whose font size could fill the parent container. If you take a look at below screenshot, the CSS version is fine.

Is this a known issue? Thank you very much for your help!

For additional information, I'm using the latest version of VSCode and MacOS as the development machine.

$ code --version
1.84.0
d037ac076cee195194f93ce6fe2bdfe2969cc82d
x64

[dalmolinz]

Still a problem in 1.84.0 (scss)

[starball5]

Is there an issue ticket yet for adding support to SASS/SCSS? Or should one be created?

If anyone creates one, please ping me there with @starball5.

[aeschli]

Please open a new issue with the sample code to reproduce.

[lauslim12]

I created an issue here: #197744. Thank you for looking into it!