Wrong space after colon in CSS (bug in default CSS package)

[kubiqsk]

Description of the bug

There is an extra space added when you write colon(:) in CSS file in selector when you try to create some pseudo selector like :after, :before, :hover * | means cursor position

imagine you have this .selector|{} after I write : then the result is .selector: |{} so when you continue writing and you will not notice this, then it will ends up with eg. .selector: hover{} which is invalid selector

when I disable CSS package then it's not happening, but I need this package enabled because it's dependency for another packages I use

Steps to reproduce

1. Open some CSS file
2. Have activated default CSS package
3. Write .selector{} and put cursor before brackets
4. Write colon :
5. You will see it will add colon AND SPACE after and that's wrong

Expected behavior

add extra space only when it is inside {} but be careful because it can be inside media query or similar wrappers that can cause same problems then

Actual behavior

Everything mentioned above...

Sublime Text build number

4126

Operating system & version

Windows 11

(Linux) Desktop environment and/or window manager

No response

Additional information

No response

OpenGL context information

No response

[BenjaminSchaaf]

Not seeing that here. Does it happen in safe mode?

[kubiqsk]

@BenjaminSchaaf yes, exactly the same behavior https://img.kubiq.sk/2022-05-09_16-28-47.png

[jwortmann]

This happens due to a key binding in the CSS package for :, and there were discussions in the https://github.com/sublimehq/Packages repo to remove the space. Eventually https://github.com/sublimehq/Packages/pull/3262 was merged to only add the space if the auto_complete_trailing_spaces setting is true (the default), but this is not yet incorporated in a stable (non-dev) ST build.

Apparently, the formerly used scope selector for the key binding was not precise enough, so that it was also active when there is no space between the tag/class/id name and the opening brace, like in your example (it was only intended to be active after property names). But this should also be fixed now with the merged PR.

As a temporary solution for now, you could add a custom key binding to override the built-in one:

{
    "keys": [":"], "command": "insert", "args": {"characters": ":"}, "context": [{"key": "selector", "operand": "source.css - meta.selector.css"}]
},

or if you want to keep the space after property names:

{
    "keys": [":"], "command": "insert", "args": {"characters": ":"}, "context": [{"key": "selector", "operand": "source.css meta.property-list punctuation.section.block.begin"}]
},

[kubiqsk]

@jwortmann thanks, the first one is working, but yes it removes also space for property names unfortunately the second one is not working for me - there is no change after I use this

[jwortmann]

Actually I was wrong and the space was removed entirely in the key binding for : from the linked PR. But it should still be inserted when you select an autocomplete item for the property names.

If you still want to keep the space when typing the colon manually, it seems you will need to copy and adjust the default key binding into your user bindings. It should be this one, just with : $0; instead of :$0;: https://github.com/sublimehq/Packages/blob/23d939e0f23f0f49c65b5bc5f72969053ef6c7ed/CSS/Default.sublime-keymap#L4-L12 I think that should work.

[deathaxe]

PR https://github.com/sublimehq/Packages/pull/3262 removes behavior of adding space after colon via key binding due to several complains about "typing a char should not add unexpected extra characters", especially not in a single syntax only.

PR https://github.com/sublimehq/Packages/pull/3376 takes some more counter meassures to avoid property completions between selectors and property lists, but that's not directly related with this issue.

Close it as fixed by ST4131.