Really slow / laggy Emmet in bigger CSS files?

[mklusak]

A few weeks ago (?) I noticed Sublime Text 3 slows down when typing CSS code in CSS file with 2-3000 lines of code. For example I write "body", and it is not typed out by one letter at a time, it appears as "body" after approx 1 second. After adding brackets, I write "tac" and hit Tab, and it expands to "text-align: center" after same delay, without even seeing "tac" being typed out, and without that new green ... suggestion bubble or what.

But if I try exactly this at the beggining of the same file, it works as fast as usual.

Just typing out selectors alone is slow and behaves like described above. After Emmet package disabling, typing anything is fast as expected. After re-enabling, typing and expanding is lagging. Bigged the file, the slower typing became.

Where could be a problem?

[sergeche]

Can you provide example of such file?

[mklusak]

Here - https://tmpfiles.org/download/100366/style.css (some 2 hour temporary link)

It's not top notch styled code, and I use massive commented ASCII headers (to see them in minimap) ... I tried to remove them, but it had no effect.

[cupok]

I have same issue

[Brittliff]

Setting auto_mark to "markup" or false in the options fixes this for me.

[mklusak]

@Brittliff Yeah, confirming ... but what's the point of having Emmet installed without its abbreviations expanding? :-)

[Brittliff]

Oh apologies @mklusak, I didn't even realise that setting completely disabled Emmet haha. I must have misread the description.

I don't actually use Emmet for CSS, so hopefully it helps someone else like me with a temporary workaround at least. 😅

[sergeche]

Just published v2.3.0, should work better with large CSS codebase.

FYI: the problem is how Emmet detects if it should provide completions for given location. E.g. it checks if you’re going to write CSS property, not CSS selector or property value. Since ST doesn’t provide object model for document structure analysis, Emmet has to re-parse document to check if you’re in allowed context to expand abbreviation.

In v2.3.0, I was able to implement context detection using native ST API, which works really fast. Yet it fails in preprocessors like SCSS and LESS due to edge cases like this: foo { p| } — ST reports p is a (nested) selector, which is forbidden scope for Emmet, yet Emmet parser detects it’s likely a property.

So, fast context detection currently works for pure CSS, for preprocessors it uses slow parser.

[mklusak]

Hi, @sergeche, I wanted to write "Awesome!", but ... it does not work at all, now. I updated Emmet plugin to 2.3.0, and its suggestions and completions in my style.css have disappeared. Writing "body { tac + TAB}" does nothing (adds tab space). Style.scss works, by the way (but as slow as before).

Should I do something more? Some config update, etc.?

[sergeche]

@mklusak it happens in your large file or in clean CSS file?

[mklusak]

@sergeche Both.

[sergeche]

Works fine for me. Can you open ST console and check if there are any errors?

[sergeche]

Also, can you show me your Emmet config?

[mklusak]

Aaah, there could be some culprit, console says Unable to open /C/Users/marek/AppData/Roaming/Sublime Text 3/Packages/Emmet/Emmet.sublime-settings ...

[sergeche]

Hm, weird. Could you remove and install Emmet package?

[sergeche]

Also, check if there are errors when you type body { tac + TAB}

[mklusak]

I restarted my PC, it didn't help.

I removed package, and re-installed, everything is the same. Console does not show any errors, only that "unable to open ..." mentioned earlier. And really, I don't have any Emmet folder in /C/Users/marek/AppData/Roaming/Sublime Text 3/Packages/ ...

[sergeche]

If Emmet works in SCSS then it's not the issue. It might happen if something wrong with plugin.

Also, do you use default CSS highlighter or custom plugin?

[mklusak]

Well, I really don't know :-) I set up my Sublime text years ago ... below is my console content after start, so maybe there is something about it:

DPI mode: per-monitor v2 startup, version: 3211 windows x64 channel: stable executable: /C/Program Files/Sublime Text 3/sublime_text.exe working dir: /C/Program Files/Sublime Text 3 packages path: /C/Users/marek/AppData/Roaming/Sublime Text 3/Packages state path: /C/Users/marek/AppData/Roaming/Sublime Text 3/Local zip path: /C/Program Files/Sublime Text 3/Packages zip path: /C/Users/marek/AppData/Roaming/Sublime Text 3/Installed Packages ignored_packages: ["Text Pastry", "Vintage"] pre session restore time: 0.664531 warning: mnemonic t not found in menu caption Tools warning: mnemonic f not found in menu caption WordPress Developer Resources startup time: 0.776531 first paint time: 0.777531 reloading plugin Default.arithmetic reloading plugin Default.auto_indent_tag reloading plugin Default.block reloading plugin Default.colors reloading plugin Default.comment reloading plugin Default.convert_color_scheme reloading plugin Default.convert_syntax reloading plugin Default.copy_path reloading plugin Default.detect_indentation reloading plugin Default.echo reloading plugin Default.exec reloading plugin Default.fold reloading plugin Default.font reloading plugin Default.goto_line reloading plugin Default.history_list reloading plugin Default.indentation reloading plugin Default.install_package_control reloading plugin Default.kill_ring reloading plugin Default.mark reloading plugin Default.new_templates reloading plugin Default.open_context_url reloading plugin Default.open_in_browser reloading plugin Default.pane reloading plugin Default.paragraph reloading plugin Default.paste_from_history reloading plugin Default.profile reloading plugin Default.quick_panel reloading plugin Default.rename reloading plugin Default.run_syntax_tests reloading plugin Default.save_on_focus_lost reloading plugin Default.scroll reloading plugin Default.set_unsaved_view_name reloading plugin Default.settings reloading plugin Default.show_scope_name reloading plugin Default.side_bar reloading plugin Default.sort reloading plugin Default.switch_file reloading plugin Default.symbol reloading plugin Default.transform reloading plugin Default.transpose reloading plugin Default.ui reloading plugin CSS.css_completions reloading plugin Diff.diff reloading plugin HTML.encode_html_entities reloading plugin HTML.html_completions reloading plugin ShellScript.ShellScript reloading plugin 0_package_control_loader.00-package_control reloading plugin 0_package_control_loader.02-bz2 reloading plugin 0_package_control_loader.55-jsonschema reloading plugin Compare Side-By-Side.sbs_compare reloading plugin Emmet.main reloading plugin Package Control.1_reloader reloading plugin Package Control.2_bootstrap reloading plugin Package Control.Package Control reloading plugin PackageResourceViewer.package_resource_viewer reloading plugin PackageResourceViewer.package_resources reloading plugin SCSS.scss_completions reloading plugin String 2 Lower Hyphen.String2LowerHyphen reloading plugin SublimeLinter-php.linter reloading plugin SublimeLinter.init reloading plugin SublimeLinter._init reloading plugin SublimeLinter.active_linters_view reloading plugin SublimeLinter.busy_indicator_view reloading plugin SublimeLinter.goto_commands reloading plugin SublimeLinter.highlight_view reloading plugin SublimeLinter.log_handler reloading plugin SublimeLinter.message_view reloading plugin SublimeLinter.panel_view reloading plugin SublimeLinter.quick_actions reloading plugin SublimeLinter.status_bar_view reloading plugin SublimeLinter.sublime_linter reloading plugin Tabright.Tabright reloading plugin WordPress Developer Resources.SublimeWPDeveloperResources reloading plugin LiveStyle.livestyle-plugin plugins loaded LiveStyle: Start app LiveStyle: Client connection error: [Errno 10061] Unknown error LiveStyle: Create own server on port 54000 LiveStyle: Starting LiveStyle server on port 54000 LiveStyle: Client connected Package Control: No updated packages

[sergeche]

It could be SCSS package, check which syntax is displayed in lower right corner of ST when you work with CSS

[mklusak]

Syntax is correct, it's CSS.

I did find something! If I write "body {tac + TAB }", it does nothing. BUT if I place caret like this "body { ta|c }" and hit TAB, it expands somehow:

[sergeche]

Just checked it out: the problem happens with exactly this code format

body { | }

E.g. when selector and braces are on the same line and there are spaces before and after cursor. For some reason ST doesn’t report proper scope for this case.

With this formatting everything works fine:

body {
   |
}

body {|}

Gotta find another way to fast parse contents

[mklusak]

Ah, here comes the reason to finally leave my ugly "compressed" formatting :-)

[sergeche]

Issue with body { | } should be fixed in v.2.3.1

[mklusak]

Hi @sergeche, it looks good! Thank you!