neoclide/coc-css

Css language server extension for coc.nvim

Neoclide is a rework of Nyaovim, the reason is I want it have best user experience.

Neoclide is an editor built with web technologies while emebed with neovim.

Neoclide is in early development, which means it could break easily, and you should not take it seriously.

Since I use Mac only, something could break on other platform, I need your help!

What have done

• Global session save and restore
• Fixed copy/paste behaviour
• Fixed drag and click position calculate
• Fixed trigger of VimLeave event
• Background transparent support
• Improved input method support
• Improved cursor support
• Accessable editor state object
• Automatic resize handler, no screen blink

How to use

Since it's in early age, no prebuild currently avaiable, you have to use it from souce code.

• Clone this repository

• Run following commands to install dependencies and build code

  npm run dep
  npm run build
  

• To start the app, use:

  npm run app
  

LICENSE

Copyright 2016 [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

coc-css's Issues

Does not complete variables that start with $

For whatever reason if you define a variable say:
$primary-color: #fff

you then try to use it in the same file (or more usefully) in another file

p {
color: $pri <--- no completion for variable
}

Can someone please point me in the right direction?

Bad response from 401

I've been trying to install for the last 30 minutes, dont know if is a problem with NPM but I'm getting 401 Unauthorized on running the install script.

Add comment css auto completion?

I was surprised to find that comment auto completion wasn't already a feature.
When /* is typed, I suggest it auto completes to /* */ with the cursor in the center.

no css.filetypes config option

Support for CSS custom properties imported via @import

This issue has been already raised on VSCode repository #28459
and on its own CSS language server #156.

Since then, there was no progress in this case. So, I thought I would try asking if your extension can be better than them.

Is there any chance that your extension can support this feature?

It could provide features such as:

• autocompletion for user-defined CSS variables
• go to the definition of specific CSS variable (moving to the module file where the variable was defined)
• quick renaming user-defined CSS custom properties in every file (in every module file) for faster refactoring

css.colorDecorators.enable not working

Hi, I'm relatively new to coc.nvim and Neovim in general.
I'm currently wondering why the colorDecorators aren't working, although they are enabled. The default settings haven't been changed.

Screenshots:

Info:
nvim version

on updating:

after a css file has been loaded:

issue with floating auto complete window

Hi,
I am a noobie with vim, when i use auto complete for css, floating window it's look like this,
is there a way i make it prettier?

Not adding semicolon after auto complete

I can't get any semicolon after auto completing css properties. Trying both <Enter> and <Tab> after selecting completion suggestion. I have tried both an empty coc-config and one where I explicitly defined css.completion.completePropertyWithSemicolon with same non working result.

vim version: NVIM v0.4.4
node version: v12.18.1
coc.nvim version: 0.0.79-b1288b0de4
coc.nvim directory: /Users/jesper/.vim/plugged/coc.nvim
term: iTerm.app
platform: darwin

Any ideas? And how would I even begin to debug something like this?

CSS nesting support

So I just found out that css now supports nesting. I tried it in vscode, but with this plugin, I keep getting syntax errors. Do we need to update this package's CSS language service to get nesting to work?

• https://twitter.com/wesbos/status/1696201171587809761?s=20
• microsoft/vscode-css-languageservice#300
• microsoft/vscode-css-languageservice#345

Clash with coc-tailwind in scss files

When using coc-css and coc-tailwind while editing a scss file, coc-css reports some errors.
This does not occur in css files.
coc-tailwind completion works as usual in scss files.

Thanks for the great work!

Edit:
Related question on VSCode: https://stackoverflow.com/questions/47607602/how-to-add-a-tailwind-css-rule-to-css-checker
There is a css.lint.unknownAtRules option, but it's missing for scss.

Edit 2:
Setting scss.validate to false hides the errors, but completion stops working.

<Plug>(coc-definition) in @<variables>

is it possible to go to the definition of variables in less files?
let's say I have @import "fonts" with @black = something

and I have in my less background= @black

is it possible to the definition with of @black with (coc-definition) ?

intellisense for sass `@use` imports

Everything is working as expected, I only added this to my init.vim:

autocmd FileType scss setl iskeyword+=@-@

But now, I don't get autocompletion for the imported variables and mixins by using @use of sass in both .scss and .sass files.

How to disable diagnostics/linting?

I'm using PostCSS with custom plugin like postcss-nested and coc is telling me I have syntax error. How do I disable this or configure it to allow custom postcss syntax?
Thank you.

SASS Modules support?

The plugin is working great for almost everything, but does not seem to support new SASS Modules. Is there anything specific I need to do to enable support?

https://sass-lang.com/documentation/modules

[Question] sass support

how to use this extensions on sass file type ?

--sorry if my english to bad

Question. Enable css lsp on html files

Hi is there any configuration to enable css lsp on html files? Thanks

[scss unknownAtRules] [W] Unknown at rule @use

From sass doc, @import usage is discouraged in favor of @use https://sass-lang.com/documentation/at-rules/import.

However, @use doesn't seems to be recognized using coc-css on vim but works on VS Code.

Any ideas?

Error on installation

I've tried with CocInstall coc-css but I get the following:

[coc.nvim] Error on install coc-css: Error: write EPROTO 140370308294464:error:1408F10B:SSL routines:ssl3_get_record:wrong version num
ber:../deps/openssl/openssl/ssl/record/ssl3_record.c:332:

Any hints? Thank you.

coc-css Installed by vim-plug not working correctly!

versions

vim version: NVIM v0.5.0-397-g96059d72e
node version: v12.13.1
coc.nvim version: 0.0.75-0b7b4043c8
term: undefined
platform: win32

Messages

...

When installing with a plugin manager, the completion not working, but when install with CocInstall, working normally 💃

Installed via a plugin manager (vim-plug for example) is oficial supported?

Feature request: intellisense for .sass files

The first time to writing in .sass file, but I don't get prediction or autocompeletion.

Variables separated with a '-' not being picked up correctly

Variables separated by a '-' are cut off.
Here is an example:

random css file

_vars.scss

The link path is wrong!!

Hello, this link opens a issue, instead of the coc-css main page!!!
https://github.com/neoclide/coc.nvim/wiki/Language-servers#csslesssass

The completion of variables not working well.

I tried writing

$color-white: #fff;

and then $col it only suggest $color instead of the whole variable $color-white.

The filetype I have is .scss

Any way to make it work better?

support format wxss file?

I always need change filetype to css , :Format and back to wxss ...

How to get SCSS Classname completion inside javascript.jsx filetype

With neovim trying to install plugin prompts for github credentials?

Is this right? This doesn't seem like correct behavior.

Code formatter

Please include a CSS formatter in this one. Prettier is not always available.

Not working at all in Neovim 0.5.0

Doesn't matter how this is installed, nothing works. I've tried using CocInstall coc-css and putting it in the init.vim and each time auto formatting or completion refuses to work.

I explored in the project and ran yarn install and got the following output:

sethen@zeus in ~/.config/coc/extensions/node_modules/coc-css
↪ yarn install 
yarn install v1.22.4
warning ../../package.json: No license field
info No lockfile found.
[1/5] Validating package.json...
warning [email protected]: The engine "coc" appears to be invalid.
[2/5] Resolving packages...
warning webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning webpack > watchpack > watchpack-chokidar2 > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning webpack > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning webpack > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
[3/5] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning " > @chemzqm/[email protected]" has incorrect peer dependency "tslint@^5.8.0".
warning "@chemzqm/tslint-config > [email protected]" has incorrect peer dependency "tslint@^5.1.0".
[5/5] Building fresh packages...
success Saved lockfile.
$ npx npm-run-all clean build
npx: installed 58 in 2.967s
yarn run v1.22.4
warning ../../package.json: No license field
warning [email protected]: The engine "coc" appears to be invalid.
$ rimraf lib
Done in 0.43s.
yarn run v1.22.4
warning ../../package.json: No license field
warning [email protected]: The engine "coc" appears to be invalid.
$ webpack

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: 4692319df93a97b98914
Version: webpack 4.44.1
Time: 35ms
Built at: 08/17/2020 7:55:43 PM

ERROR in Entry module not found: Error: Can't resolve './server/node/cssServerMain.ts' in '/home/sethen/.config/coc/extensions/node_modules/coc-css'

ERROR in Entry module not found: Error: Can't resolve './src/index.ts' in '/home/sethen/.config/coc/extensions/node_modules/coc-css'
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "build" exited with 2.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Looks like something is broken. You can't resolve it yourself by running yarn install. There isn't a node_modules directory when it first gets installed -- nothing in the lib directory either. Not sure how this is supposed to work but the directory structure is just this when installed:

sethen@zeus in ~/.config/coc/extensions/node_modules/coc-css
↪ llf
total 204
drwx------   4 sethen sethen   4096 Aug 17 19:55 .
drwxrwxr-x  16 sethen sethen   4096 Aug 17 19:51 ..
drwxrwxr-x   2 sethen sethen   4096 Aug 17 19:55 lib
-rw-r--r--   1 sethen sethen  25515 Oct 26  1985 package.json
-rw-r--r--   1 sethen sethen  12671 Oct 26  1985 Readme.md
-rw-r--r--   1 sethen sethen    729 Oct 26  1985 webpack.config.js

Compare this to the directory structure in the coc-html module:

sethen@zeus in ~/.config/coc/extensions/node_modules/coc-html
↪ llf
total 352
drwx------ 5 sethen sethen   4096 Aug 17 20:02 .
drwxrwxr-x 6 sethen sethen   4096 Aug 17 20:02 ..
-rw-r--r-- 1 sethen sethen 151937 Oct 26  1985 jquery.d.ts
drwxrwxr-x 2 sethen sethen   4096 Aug 17 20:01 lib
drwxrwxr-x 4 sethen sethen   4096 Aug 17 20:02 node_modules
-rw-r--r-- 1 sethen sethen   6466 Oct 26  1985 package.json
-rw-rw-r-- 1 sethen sethen 170559 Aug 17 20:02 package-lock.json
-rw-r--r-- 1 sethen sethen   1004 Oct 26  1985 Readme.md
drwxrwxr-x 2 sethen sethen   4096 Aug 17 20:01 .vim

V.services.registerLanguageClient problem

Hi, I am running this on a Raspberry Pi. The linting is working, but I get this error when I open a CSS file.
Am I missing a dependency? Does it matter?

[coc.nvim] Error on activate extension coc-css: V.services.registerLanguageClient is
not a function

No intelisense unless I open the file I am importing

I try to use variables in the root _vars.scss then import it into the scss file I am trying to use the variables in. If I do not open _vars.scss first; I don't get any completion, however If I open _vars.scss in another tab I get completion in all tabs.

How do I set it up to complete without opening the original file just like I get for typescript?

[Question] how to get suggestions appearing more conveniently

hi, i am not a vim wizard and i am struggling to workout how to make the suggestionbox appear when i manually type out element's, i would also love a way to put things like auto,inherit etc at the top above the 0 values.

CSS language server support for SASS files.

the CSS extensions seems to be working for only CSS and SCSS but not SASS.
Would love the support as I hate semicolons and unnecessary braces. XD

Support for PostCSS (parent-selector)

Not even VSCode has support for PostCSS in the main CSS plugin (nor they intend to add, looks like, even though they later did something and refined it, but only for @-rules).

But there are available plugins that would support PostCSS (like PostCSS Language Support), so is it possible to wrap also them?

In particular, I would like to have support for sass-like parent selector.
If it is too complicate to wrap another plugin, would it be too complicated to add support for this rule?

Support for template literals in js files

Many css-in-js libraries support writing css inside template strings. For instance, in Emotion you can do:

import { css, } from 'emotion';

const style = css`
  margin-bottom: 2rem;
  color:  red;
`

It would be great if there was a way to enable coc-css when editing these template literals

Property css.filetypes is not allowed

The readme mentions the setting css.filetypes but when I use it in coc-settings.json like "css.filetypes": ["css", "sass", "scss"] the settings linter says it is not allowed.

postcss support?

currently:

(but that's totally valid)

Rename breaks if scss mixin has a hyphen in the name

When trying to use coc-rename on a SCSS mixin, it gets confused and thinks hyphens are not part of the name.

Autocomplete does work, if I type @include nav- it will suggest @include nav-item-accessible-styles and pre-fill the param placeholders and everything — works perfect. But when I try to coc-rename the mixin, I get the behavior shown in the screenshot.

I've tried setting "coc.preferences.hyphenAsKeyword": true and that didn't change anything.

Any ideas?

Option to disable color highlight

For example, in this css:

color: red;

The color background for the word red is red. I'd like to disable the color highlight. I tried to set

  "coc.preferences.colorSupport": false,

on my coc-settings.json but if I go to insert mode and back to normal mode, the colors are highlighted again