When I tried to write the CSS style, I lacked the smart advance prompt. The console reported the following error

[yunliang-ding]

Dependency packages are latest

When I tried to write the CSS style, I lacked the smart advance prompt. The console reported the following error

Uncaught Error: Cannot read property 'InsertAsSnippet' of undefined
TypeError: Cannot read property 'InsertAsSnippet' of undefined
at cssMode.js:7
at Array.map ()
at cssMode.js:7
at Object.g [as _notify] (editor.main.js:141)
at Object.enter (editor.main.js:145)
at n.Class.derive._creator._run (editor.main.js:146)
at n.Class.derive._creator._completed (editor.main.js:146)
at Object.g [as _notify] (editor.main.js:141)
at Object.enter (editor.main.js:145)
at n.Class.derive._oncancel._run (editor.main.js:146)
at editor.main.js:158

[kittaakos]

@yunliang-ding, what exactly did you do? Did this happen in a CSS editor?

[yunliang-ding]

@yunliang-ding, what exactly did you do? Did this happen in a CSS editor?

Yes, in the Monaco editor, the grammar is CSS

[kittaakos]

Can you share your CSS file and the steps you did? I opened a couple of CSS files, did some editing but wasn't able to reproduce this defect.

[yunliang-ding]

Can you share your CSS file and the steps you did? I opened a couple of CSS files, did some editing but wasn't able to reproduce this defect.

package.json

{
  "private": true,
  "dependencies": {
    "typescript": "latest",
    "@theia/typescript": "latest",
    "@theia/navigator": "latest",
    "@theia/terminal": "latest",
    "@theia/outline-view": "latest",
    "@theia/preferences": "latest",
    "@theia/messages": "latest",
    "@theia/git": "latest",
    "@theia/file-search": "latest",
    "@theia/markers": "latest",
    "@theia/preview": "latest",
    "@theia/callhierarchy": "latest",
    "@theia/merge-conflicts": "latest",
    "@theia/search-in-workspace": "latest",
    "@theia/json": "latest",
    "@theia/textmate-grammars": "latest"
  },
  "devDependencies": {
    "@theia/cli": "latest"
  }
}

step 1: yarn
step 2:yarn theia build
step 3:yarn theia start

Then in the editor, my CSS file has no grammar prompt, and the console will report an error.
Is it because I'm less dependent?

[vince-fugnitto]

@yunliang-ding I tried your example package.json and got the same error when editing a css file :(

[kittaakos]

Must be some version mismatch issue. As a quick workaround, you can copy the yarn.lock file from the Theia repository into your application root, next to the package.json and run yarn again. It should work. I have tried it.

[blueken]

I think It's [email protected] caused css highlight failure

Here is my solution:

Step1: downgrade monaco-css
yarn add [email protected]

Step2: build theia again
yarn theia build

Step3: start theia
yarn theia start

Then you 'll see css highlight works :P

try it @yunliang-ding @vince-fugnitto

Must be some version mismatch issue. As a quick workaround, you can copy the yarn.lock file from the Theia repository into your application root, next to the package.json and run yarn again. It should work. I have tried it.

[vince-fugnitto]

I confirmed it is no longer an issue when attempting to edit css files.

In addition, the packages present in #5593 (comment) are no longer valid since @theia/json and @theia/textmate-grammars are deprecated. Support for languages such as css are provided by vscode extensions.