CSS auto complete popup no longer working

[titoBouzout]

From @onetrev on May 9, 2014 18:44

Previously, in Sublime Text 2, you could type the beginning of a class name (or ID) in your CSS file and a pop-up box with related class names would appear, as per attached image. Now in Sublime Text 3, this box can only be brought up through the "Ctrl + Space" command.

OS: Windows 7 SP1 & Windows 8.1 Update 1 Sublime: Build 3059

There is a thread discussing this issue here: http://www.sublimetext.com/forum/viewtopic.php?f=3&t=15037&p=57978. In my testing at least the posted temporary fix for this doesn't work on either machine I have tried it on.

* EDIT * -> actually no CSS auto complete popup is working. This is both for class names and element names, ie. "article, fieldset, etc". The only way to bring up any auto-complete window in CSS documents is with "Ctrl+Space", so clearly the auto-complete is there it's just not auto any more.

Edit by @FichteFoll: temporary solution

Copied from original issue: SublimeTextBugs/Issues#283

[titoBouzout]

From @nickfmc on July 8, 2014 19:14

I would love to see this issue resolved, I can also confirm the fix not working on win8.1 sublime build 3059

[titoBouzout]

From @onetrev on July 25, 2014 23:8

Sorry to add on to this issue, but just thinking about it again and having continue to work around it, I really to feel this bug status should be upgraded beyond "trivial". This auto complete functionality is a huge time saver and would be a big loss to any file format it is missing from. Luckily it's only CSS from what I've seen so far. Thanks!!

[titoBouzout]

From @FichteFoll on August 1, 2014 23:22

Did some investigation. The problem is this file called CSS/Completion Rules.tmPreferences with this content:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>scope</key>
    <string>source.css meta.selector</string>
    <key>settings</key>
    <dict>
        <key>cancelCompletion</key>
        <string>.*</string>
    </dict>
</dict>
</plist>

It effectively means that auto completion is cancelled when editing or adding css selectors. You can retrieve the current setting for the first cursor with the following command line: view.meta_info("cancelCompletion", view.sel()[0].a), however I have not yet been successful at overriding that. The usual method (by copying the file to Packages/CSS and editing there) doesn't trigger the change immediately, I have to change a seperate file in Packages/User to make ST regenerate its meta info summary ...

I can't make any sense of this right now, but this is a different issue.

---

Anyway, even after removing everything in the <dict> tags and verifying (with the console command) that the changes triggered, I still don't get a popup. And even with ctrl+space I don't get word completions, only the pre-defined ones. The latter is caused by the way ST provides the (dynamic) CSS completions via plugin (Packages/CSS/css_completions.py) and particularly by the lines 156, 185 and 194:

        if (view.match_selector(locations[0], "meta.property-value.css") or
            # This will catch scenarios like .foo {font-style: |}
            view.match_selector(locations[0] - 1, "meta.property-value.css")):
            # [...]
        else:
            # [...]
            return (l, sublime.INHIBIT_WORD_COMPLETIONS)

I don't know about the first problem though.

[titoBouzout]

From @FichteFoll on August 10, 2014 15:39

Okay, time for a solution.

1. Get https://sublime.wbond.net/packages/PackageResourceViewer
2. Run PackageResourceViewer: Open Resource and browse CSS/css_completions.py

3. Apply this change (line 185):

   @@ -185,1 +185,1 @@
   -        else:
   +        elif view.match_selector(locations[0], "meta.property-list.css"):

4. Just save.
5. Run PackageResourceViewer: Open Resource and browse CSS/Completion Rules.tmPreferences

6. Apply this change:

   @@ -10,1 +10,1 @@
   -            <string>.*</string>
   +            <string></string>

7. Save to Packages/User/CSS Completion Rules.tmPreferences (because of #411).

[titoBouzout]

From @onetrev on August 11, 2014 1:40

Patch works perfectly! Thanks for that, such a relief to finally have this fixed and working again...

[titoBouzout]

From @fanathysm on August 20, 2014 18:5

Doesn't work for me. I followed exactly what you wrote, FichteFoll. The file paths are also exactly as shown above. What did I do wrong?

[titoBouzout]

From @FichteFoll on August 21, 2014 0:11

@fanathysm Did you try to restart ST?

[titoBouzout]

From @fanathysm on August 21, 2014 12:57

@FichteFoll yes I tried

[titoBouzout]

From @jwhitmarsh on August 21, 2014 15:35

Same here - followed the patch exactly but it hasn't worked. I'm in build 3059 on OSX 10.9.3

[titoBouzout]

From @FichteFoll on August 21, 2014 15:40

Can you both please check if the first file (Packages/CSS/Completion Rules.tmPreferences) exists? It could be a bug in PackageResourceViewer.

Other than that, I have no idea. Do you perhaps have other plugins installed that could interfere?

[titoBouzout]

From @jwhitmarsh on August 21, 2014 15:46

I had the same thought, and it does exist. Is that as expected?

I had Sublime Extend Completions installed, which I've now removed to see if that was affecting it - no difference.

[titoBouzout]

From @jwhitmarsh on August 21, 2014 16:1

I got it working by following your solution in Issue #411 so Packages/User/CSS Completion Rules.tmPreference should end up looking like this

  <?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
      <key>scope</key>
      <string>source.css meta.selector</string>
      <key>settings</key>
      <dict>
      </dict>
  </dict>
  </plist>

[titoBouzout]

From @jwhitmarsh on August 21, 2014 16:1

Thank you btw!

[titoBouzout]

From @FichteFoll on August 21, 2014 16:18

@jwhitmarsh are you sure you followed the instructions in 7.?

Save to Packages/User/CSS Completion Rules.tmPreferences

Clearing the settings key should not override any of the previously set metadata so you likely saved the changes from step 6 to the CSS package instead of User.

[titoBouzout]

From @fanathysm on August 21, 2014 16:25

I made the changes exactly according to 6) - saved everything to CSS Completion Rules.tmPreferences within Packages/User as described - but that didn't work. Do I have to do anything related to Issue #411 in addition to that?

Also I have checked. The file Packages/CSS/Completion Rules.tmPreferences does exist.

Packages I am using atm:

Advanced new File All Autocomplete Emmet Package Control Package Resource Viewer Pyv8 Sidebar Enhancements SublimeCodeIntel Tag

[titoBouzout]

From @FichteFoll on August 21, 2014 16:48

Try disabling Emmet and see if it helps. Otherwise I'm lost, without digging through like everything.

[titoBouzout]

From @fanathysm on August 21, 2014 16:53

Nope that did not work either :( At least snippets would be working in css then, but without Emmet, that's not a solution for me. Also autocompletion does not pop up. But why does it work for onetrev c and jwhitmarsh and not for me? I am using win7 and latest version of ST3.

[titoBouzout]

From @jwhitmarsh on August 22, 2014 8:43

@FichteFoll yeah I definitely saved it with that name, at that location.

I just reset everything to see if I could get it to work following your initial instructions, but no luck, and then it didn't work using the #411 fix either!

I've now got it working again, using your initial code and I think the issue is a part of Sublime not loading in the User config file - initially I was leaving User/CSS Completion Rules.tmPreferences open when restarting Sublime, and it was only when I closed that file BEFORE the restart that it started working again.

I'm not au fait enough with native app dev, so that deduction might be completely wrong, but that's what appears to be the issue.

[titoBouzout]

From @fanathysm on August 22, 2014 19:16

@jwhitmarsh Ok so does it work for you correctly now? Edit: In my case only the manual completion works if I am using Emmet. Disabling Emmet only makes snippets usable in css-files, but not autocompletion.

[PierBover]

Hey @FichteFoll you said here

It's also not a bug actually. It's explicitly disabled.

Why would this be disabled?

[FichteFoll]

Probably because Jon thought that auto complete in css selectors was not needed while he was drafting the other css property completions.

[PierBover]

I hope this gets fixed enhanced soon.

Completions on CSS selectors is a crucial feature for front end devs.

[benfrain]

Agreed, from an authoring perspective we don't gain anything from disabling auto completion of selectors in CSS. Would love to see the default state amended.

[PierBover]

To add more info to this problem, it is indeed intended. It was added on build 3019 on March 2013.

CSS: Completions will not be offered when typing in selectors

[floq-design]

In case anyone finds this thread in search of a solution to this issue...

CSS Extended Autocompletions

Plugin for SublimeText 3 works very well: https://packagecontrol.io/packages/CSS%20Extended%20Completions

Just make sure you save your CSS / SCSS / LESS files to cache your classes before use.

[Kristinita]

We wait a time, when patch will be added to new Sublime Text release.

Thanks.