CSS auto complete popup no longer working #79

titoBouzout · 2014-12-22T14:52:49Z

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: sublimehq/sublime_text#283

titoBouzout · 2014-12-22T14:52:50Z

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 · 2014-12-22T14:52:51Z

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 · 2014-12-22T14:52:52Z

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 · 2014-12-22T14:52:54Z

From @FichteFoll on August 10, 2014 15:39

Okay, time for a solution.

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

Apply this change (line 185):

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

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

Apply this change:

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

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

titoBouzout · 2014-12-22T14:52:55Z

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 · 2014-12-22T14:52:57Z

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 · 2014-12-22T14:52:58Z

From @FichteFoll on August 21, 2014 0:11

@fanathysm Did you try to restart ST?

titoBouzout · 2014-12-22T14:53:00Z

From @fanathysm on August 21, 2014 12:57

@FichteFoll yes I tried

titoBouzout · 2014-12-22T14:53:01Z

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 · 2014-12-22T14:53:02Z

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 · 2014-12-22T14:53:04Z

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 · 2014-12-22T14:53:05Z

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 · 2014-12-22T14:53:07Z

From @jwhitmarsh on August 21, 2014 16:1

Thank you btw!

titoBouzout · 2014-12-22T14:53:08Z

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 · 2014-12-22T14:53:10Z

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 · 2014-12-22T14:53:11Z

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 · 2014-12-22T14:53:12Z

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 · 2014-12-22T14:53:14Z

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 · 2014-12-22T14:53:15Z

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 · 2015-03-21T23:53:39Z

Hey @FichteFoll you said here

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

Why would this be disabled?

FichteFoll · 2015-03-22T00:48:08Z

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

PierBover · 2015-03-22T01:48:29Z

I hope this gets ~~fixed~~ enhanced soon.

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

benfrain · 2015-03-22T09:04:12Z

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 · 2015-03-24T16:52:53Z

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 · 2016-06-28T13:14:41Z

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 · 2017-04-09T12:58:02Z

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

Thanks.

Fixes jskinner/DefaultPackages#79 This commit removes Completion Rules.tmPreferences from CSS package to allow completions in CSS selectors. Example: .my-class .sub-class { } .my-class .other-sub-class { } .my-class .yet-another-sub-class { } A plain CSS file may contain several rule sets with the same classes used in selectors. Therefore writing experience may benefit from word completions.

Fixes jskinner/DefaultPackages#79 This commit removes Completion Rules.tmPreferences from CSS package to allow completions in CSS selectors. Example: .my-class .sub-class { } .my-class .other-sub-class { } .my-class .yet-another-sub-class { } A plain CSS file may contain several rule sets with the same classes used in selectors. Therefore writing experience may benefit from word completions. Note: That's possible as PR sublimehq#2556 makes sure not to suggest property names in selector scope.

Fixes jskinner/DefaultPackages#79 This commit removes Completion Rules.tmPreferences from CSS package to allow completions in CSS selectors. Example: .my-class .sub-class { } .my-class .other-sub-class { } .my-class .yet-another-sub-class { } A plain CSS file may contain several rule sets with the same classes used in selectors. Therefore writing experience may benefit from word completions. Note: That's possible as PR #2556 makes sure not to suggest property names in selector scope.

Fixes jskinner/DefaultPackages#79 This commit removes Completion Rules.tmPreferences from CSS package to allow completions in CSS selectors. Example: .my-class .sub-class { } .my-class .other-sub-class { } .my-class .yet-another-sub-class { } A plain CSS file may contain several rule sets with the same classes used in selectors. Therefore writing experience may benefit from word completions. Note: That's possible as PR sublimehq#2556 makes sure not to suggest property names in selector scope.

titoBouzout added S: minor T: bug with patch C: Completions labels Dec 22, 2014

titoBouzout added C: CSS and removed C: Completions labels Dec 22, 2014

FichteFoll mentioned this issue Mar 21, 2015

CSS auto complete popup no longer working sublimehq/sublime_text#283

Closed

FichteFoll added the T: enhancement label Mar 21, 2015

deathaxe mentioned this issue Feb 27, 2021

[CSS] Enable selector completions sublimehq/Packages#2727

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS auto complete popup no longer working #79

CSS auto complete popup no longer working #79

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

PierBover commented Mar 21, 2015

FichteFoll commented Mar 22, 2015

PierBover commented Mar 22, 2015

benfrain commented Mar 22, 2015

PierBover commented Mar 24, 2015

floq-design commented Jun 28, 2016

Kristinita commented Apr 9, 2017

CSS auto complete popup no longer working #79

CSS auto complete popup no longer working #79

Comments

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

titoBouzout commented Dec 22, 2014

PierBover commented Mar 21, 2015

FichteFoll commented Mar 22, 2015

PierBover commented Mar 22, 2015

benfrain commented Mar 22, 2015

PierBover commented Mar 24, 2015

floq-design commented Jun 28, 2016

CSS Extended Autocompletions

Kristinita commented Apr 9, 2017