liuderchi / ide-css

:atom: Atom-IDE for CSS, LESS and SCSS language

ide-css

Atom-IDE for CSS, LESS and SCSS language

Features

• CSS rules Outline in Outline View
  • Quick navigation by clicking
  • Quick CSS rule selection by double clicking
  • Searching by entering element name or class name in selector
• Tooltips for
  • CSS selector
  • CSS property
  • Linter message
• Support other CSS preprocessor grammars: LESS, SCSS

Requirements

you need to install following requirements before installing ide-css:

• Atom editor 1.21.0-beta0 or higher version
• Atom package atom-ide-ui

FAQ

Why I could not download this Atom package?

Please make sure you have installed all softwares in Requirements section.

---

I've installed ide-css. Why there is still nothing shown in Outline View when css opened?

Please check the file exists in the Project Tree View so that it can be handled by ide-css.

In addition, to show outline view, use Atom command Outline View: Toggle.

---

How can I customize this package?

Please read CONTRIBUTING.md for more details.

---

• 😕 Still feeling confused? Please provide feedbacks via issues to make ide-css better. 🙏

Notes and References

• ide-css acts as a client of language server basing on atom-languageclient
• vscode-css-languageserver-bin acts as a language server and analyze your CSS in separate process
• language servers and clients are talking with Language Server Protocol (LSP)

License

MIT License

ide-css's Issues

Nested @supports shows errors

Atom: 1.21.0
ide-css: 0.2.0

I'm not sure if this is a bug or a feature (and the errors are pointing out that I'm using @supports incorrectly). But the resulting CSS is correct and behaves as expected.

I have the following LESS code:

.PermissionRoles {
  &__list {
    @supports (display: grid) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      grid-gap: 16px;
    }

    @supports not (display: grid) {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-left: -8px;
      margin-right: -8px;
    }
  }
}

IDE-CSS is reporting:
) expected on line 3
{ expected on lines 10-14
at-rule or selector expected on line 16

Uncaught Error: Message header must separate key and value using :

Not sure how to reproduce this, I just have a project open in atom. Even if atom isn't the focused application, the message will still pop up.

Atom: 1.28.0 ia32
Electron: 2.0.3
OS: Microsoft Windows 10 Home
Thrown From: ide-css package 0.3.0

Stack Trace

Uncaught Error: Message header must separate key and value using :

At C:\Users\xxxx\.atom\packages\ide-css\node_modules\vscode-jsonrpc\lib\messageReader.js:68

Error: Message header must separate key and value using :
    at /packages/ide-css/node_modules/vscode-jsonrpc/lib/messageReader.js:68:23
    at Array.forEach (<anonymous>)
    at MessageBuffer.tryReadHeaders (/packages/ide-css/node_modules/vscode-jsonrpc/lib/messageReader.js:65:17)
    at StreamMessageReader.onData (/packages/ide-css/node_modules/vscode-jsonrpc/lib/messageReader.js:194:43)
    at /packages/ide-css/node_modules/vscode-jsonrpc/lib/messageReader.js:185:19)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at addChunk (_stream_readable.js:263:12)
    at readableAddChunk (_stream_readable.js:250:11)
    at Socket.Readable.push (_stream_readable.js:208:10)
    at Pipe.onread (net.js:594:20)

Commands

Non-Core Packages

atom-autocomplete-php 0.25.6 
atom-beautify 0.32.4 
atom-debug-ui 1.0.4 
atom-handlebars 1.3.0 
atom-ide-ui 0.12.0 
atom-jinja2 0.6.0 
atom-material-syntax 1.0.8 
atom-material-syntax-dark 1.0.0 
atom-material-ui 2.1.3 
atom-save-all 0.4.1 
atom-ternjs 0.18.3 
atom-typescript undefined 
autocomplete 0.47.0 
autocomplete-modules 2.0.0 
autocomplete-php 0.3.7 
docblockr 0.9.1 
file-icons 2.1.21 
fonts 3.0.3 
git-plus undefined 
highlight-bad-chars 1.0.7 
hyperclick 0.0.0 
ide-css 0.3.0 
ide-html 0.4.2 
ide-php 0.7.14 
ide-typescript 0.7.6 
intentions 1.1.5 
isotope-ui 2.8.5 
jquery-snippets 11.0.0 
language-ansible 0.2.2 
linter 2.2.0 
linter-csslint 2.0.1 
linter-htmlhint 1.4.0 
linter-js-yaml 1.3.0 
linter-php 1.5.1 
linter-tslint 1.9.1 
markdown-preview-plus undefined 
markdown-writer 2.7.3 
merge-conflicts 1.4.5 
monokai 0.24.0 
monokai-dark 1.5.0 
package-cop 0.2.10 
php-cs-fixer 4.1.1 
php-debug 0.3.4 
php-hyperclick 1.2.1 
php-integrator-annotations 1.2.0 
php-integrator-autocomplete-plus 1.6.2 
php-integrator-base undefined 
php-integrator-navigation 1.2.1 
php-integrator-refactoring 1.4.1 
php-twig 4.0.0 
project-manager 3.3.5 
sass-autocompile 0.13.5 
symbol-gen 1.3.1 
symbols-tree-view undefined 
todo-show 2.3.0 
xml-formatter 0.11.0 

Uncaught Error: Header must provide a Content-Length property.

[Enter steps to reproduce:]

1. Have ide-css-package installed
2. Open any file

Atom: 1.34.0 x64
Electron: 2.0.16
OS: Mac OS X 10.14.3
Thrown From: ide-css package 0.3.2

Stack Trace

Uncaught Error: Header must provide a Content-Length property.

At /Users/mariogmz/.atom/packages/ide-css/node_modules/vscode-jsonrpc/lib/messageReader.js:163

Error: Header must provide a Content-Length property.
    at StreamMessageReader.onData (/packages/ide-css/node_modules/vscode-jsonrpc/lib/messageReader.js:163:27)
    at Socket.readable.on (/packages/ide-css/node_modules/vscode-jsonrpc/lib/messageReader.js:148:18)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at addChunk (_stream_readable.js:263:12)
    at readableAddChunk (_stream_readable.js:250:11)
    at Socket.Readable.push (_stream_readable.js:208:10)
    at Pipe.onread (net.js:594:20)

Commands

     -1:28.1.0 settings-view:check-for-package-updates (atom-workspace.workspace.scrollbars-visible-always.theme-one-dark-syntax.theme-one-dark-ui)
  2x -0:56.4.0 core:close (input.hidden-input)
     -0:54.3.0 core:save (input.hidden-input)
     -0:51.1.0 core:backspace (input.hidden-input)
     -0:50.8.0 markdown-writer:insert-new-line (input.hidden-input)
     -0:50.8.0 editor:newline (input.hidden-input)
     -0:49.1.0 core:backspace (input.hidden-input)
     -0:49 markdown-writer:insert-new-line (input.hidden-input)
     -0:49 editor:newline (input.hidden-input)
     -0:47.6.0 core:backspace (input.hidden-input)
     -0:47.5.0 markdown-writer:insert-new-line (input.hidden-input)
     -0:47.5.0 editor:newline (input.hidden-input)
     -0:42 core:save (input.hidden-input)
     -0:27.6.0 settings-view:check-for-package-updates (atom-workspace.workspace.scrollbars-visible-always.theme-one-dark-syntax.theme-one-dark-ui)
     -0:23.1.0 core:confirm (input.hidden-input)
     -0:11.3.0 core:save (input.hidden-input)

Non-Core Packages

atom-beautify 0.33.4 
atom-ide-ui 0.13.0 
color-picker 2.3.0 
docker 0.8.0 
ide-css 0.3.2 
ide-html 0.5.0 
ide-ruby 0.3.0 
ide-yaml 0.4.4 
language-docker 1.1.8 
language-haml 0.32.1 
language-nginx 0.8.0 
linter 2.3.0 
linter-rubocop 2.2.4 
linter-ruby 1.3.0 
markdown-writer 2.11.5 
multi-cursor 2.1.5 
ruby-block 0.3.6 

Nothing shows up in Outline.

Outline says:

Autocomplete for class names causes second period

Issue:

When using the autocomplete and typing out an existing class name with a period in front of it the auto complete adds a second period after.

Expected behavior:

Autocomplete consumes or ignores the original period typed.

Example:

With an existing class .item-list, typing out the partial class .item- and pressing Tab or Enter causes the autocomplete to return ..item-list

Versions:

ide-css 0.3.2
Atom 1.35.1
atom-ide-ui 0.13.0

Autocompletion appear in the fourth letter.

Hi,
is it possible to make an autocompletion list appear when typing the fourth letter?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency eslint to v9
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v2
• actions/setup-node v2

npm

package.json

• atom-languageclient ^1.10.0
• vscode-css-languageserver-bin ^1.4.0
• eslint ^7.27.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Uncaught Error: Connection is closed.

[Enter steps to reproduce:]

1. ...
2. ...

Atom: 1.21.0 x64
Electron: 1.6.9
OS: Unknown Windows version
Thrown From: ide-css package 0.2.0

Stack Trace

Uncaught Error: Connection is closed.

At C:\Users\emelendez\.atom\packages\ide-css\node_modules\vscode-jsonrpc\lib\main.js:606

Error: Connection is closed.
    at /packages/ide-css/node_modules/vscode-jsonrpc/lib/main.js:131:28)
    at throwIfClosedOrDisposed (/packages/ide-css/node_modules/vscode-jsonrpc/lib/main.js:606:19)
    at Object.sendNotification (/packages/ide-css/node_modules/vscode-jsonrpc/lib/main.js:660:13)
    at LanguageClientConnection._sendNotification (/packages/ide-css/node_modules/atom-languageclient/build/lib/languageclient.js:244:15)
    at LanguageClientConnection.didChangeWatchedFiles (/packages/ide-css/node_modules/atom-languageclient/build/lib/languageclient.js:145:10)
    at ServerManager.projectFilesChanged (/packages/ide-css/node_modules/atom-languageclient/build/lib/server-manager.js:262:33)
    at Function.module.exports.Emitter.simpleDispatch (~/AppData/Local/atom/app-1.21.0/resources/app/node_modules/event-kit/lib/emitter.js:25:20)
    at Emitter.module.exports.Emitter.emit (~/AppData/Local/atom/app-1.21.0/resources/app/node_modules/event-kit/lib/emitter.js:141:34)
    at ~/AppData/Local/atom/app-1.21.0/resources/app/src/project.js:297:40
    at PathWatcher.onNativeEvents (~/AppData/Local/atom/app-1.21.0/resources/app/src/path-watcher.js:671:15)
    at ~/AppData/Local/atom/app-1.21.0/resources/app/src/path-watcher.js:567:31
    at Function.module.exports.Emitter.simpleDispatch (~/AppData/Local/atom/app-1.21.0/resources/app/node_modules/event-kit/lib/emitter.js:25:20)
    at Emitter.module.exports.Emitter.emit (~/AppData/Local/atom/app-1.21.0/resources/app/node_modules/event-kit/lib/emitter.js:141:34)
    at NativeWatcher.onEvents (~/AppData/Local/atom/app-1.21.0/resources/app/src/path-watcher.js:448:26)
    at handler (~/AppData/Local/atom/app-1.21.0/resources/app/src/path-watcher.js:177:15)

Commands

     -1:07.5.0 editor:toggle-line-comments (input.hidden-input)
     -1:04.5.0 core:save (input.hidden-input)
     -0:44 core:undo (input.hidden-input)
     -0:40.4.0 core:save (input.hidden-input)
     -0:22.2.0 build:trigger (input.hidden-input)

Non-Core Packages

atom-beautify 0.30.5 
atom-css-clean 2.23.0 
atom-ide-ui 0.4.0 
build 0.69.0 
build-gulp 0.11.0 
compare-files 0.8.1 
cssnano 1.1.0 
file-icons 2.1.12 
gulp-control 0.5.0 
ide-css 0.2.0 
ide-html 0.3.0 
ide-json 0.1.0 
ide-typescript 0.6.1 
language-asp 1.0.0 
language-babel undefined 
language-hjson 0.5.0 
language-javascript-jsx 0.3.7 
linter 2.2.0 
linter-sass-lint 1.8.2 
linter-stylelint 4.0.2 
linter-ui-default 1.6.10 
minimap 4.29.7 
pigments 0.40.2 
platformio-ide-terminal 2.7.0 
prettier-atom 0.40.0 
project-manager 3.3.5 
Remote-FTP 1.2.4 
sass-autocompile 0.13.3 
sourcerer 2.0.0 
Sublime-Style-Column-Selection 1.7.4 
sync-settings 0.8.3 

Multiple conditions in @supports show weird errors

This is a reduced code snippet that errors:

@supports (caret-color) and (color) {
	
}

The error is ) expected.

@media rule

It would be great to see @media like Brackets outline. Also hierarchic in viewer would be cool.

Linting Inside of a JS String

ide-css lets me modify the scopes it can operate in. Is there a way to get it to operate within a template literal of JS? The syntax highlighting already works, just need to know if there is a scope I can tell ide-css to look at to make this work.

Failed to activate the ide-css package

[Enter steps to reproduce:]

1. Click enable in settings menu
2. ...

Atom: 1.21.2 x64
Electron: 1.6.15
OS: Microsoft Windows 10 Pro
Thrown From: ide-css package 0.2.0

Stack Trace

Failed to activate the ide-css package

At Package not initialized

Error: Package not initialized
    at /packages/atom-ide-ui/modules/nuclide-commons-atom/createPackage.js:48:15)
    at Provider.module.exports.Provider.provide (~/AppData/Local/atom/app-1.21.2/resources/app/node_modules/service-hub/lib/provider.js:34:58)
    at ServiceHub.module.exports.ServiceHub.provide (~/AppData/Local/atom/app-1.21.2/resources/app/node_modules/service-hub/lib/service-hub.js:30:26)
    at Package.module.exports.Package.activateServices (~/AppData/Local/atom/app-1.21.2/resources/app/src/package.js:446:77)
    at Package.module.exports.Package.activateNow (~/AppData/Local/atom/app-1.21.2/resources/app/src/package.js:256:22)
    at ~/AppData/Local/atom/app-1.21.2/resources/app/src/package.js:225:38
    at Package.module.exports.Package.measure (~/AppData/Local/atom/app-1.21.2/resources/app/src/package.js:99:21)
    at ~/AppData/Local/atom/app-1.21.2/resources/app/src/package.js:218:32
    at Package.module.exports.Package.activate (~/AppData/Local/atom/app-1.21.2/resources/app/src/package.js:215:40)
    at PackageManager.activatePackage (~/AppData/Local/atom/app-1.21.2/resources/app/src/package-manager.js:690:42)
    at packagesToEnable.forEach.name (~/AppData/Local/atom/app-1.21.2/resources/app/src/package-manager.js:439:51)
    at Array.forEach (native)
    at disabledPackagesSubscription.config.onDidChange (~/AppData/Local/atom/app-1.21.2/resources/app/src/package-manager.js:439:30)
    at ~/AppData/Local/atom/app-1.21.2/resources/app/src/config.js:693:26
    at Function.module.exports.Emitter.simpleDispatch (~/AppData/Local/atom/app-1.21.2/resources/app/node_modules/event-kit/lib/emitter.js:25:20)
    at Emitter.module.exports.Emitter.emit (~/AppData/Local/atom/app-1.21.2/resources/app/node_modules/event-kit/lib/emitter.js:141:34)
    at Config.module.exports.Config.emitChangeEvent (~/AppData/Local/atom/app-1.21.2/resources/app/src/config.js:884:35)
    at Config.module.exports.Config.setRawValue (~/AppData/Local/atom/app-1.21.2/resources/app/src/config.js:670:25)
    at Config.module.exports.Config.set (~/AppData/Local/atom/app-1.21.2/resources/app/src/config.js:248:20)
    at Config.module.exports.Config.removeAtKeyPath (~/AppData/Local/atom/app-1.21.2/resources/app/src/config.js:407:18)
    at Package.module.exports.Package.enable (~/AppData/Local/atom/app-1.21.2/resources/app/src/package.js:84:32)
    at PackageManager.enablePackage (~/AppData/Local/atom/app-1.21.2/resources/app/src/package-manager.js:245:18)
    at HTMLButtonElement.enablementButtonClickHandler (~/AppData/Local/atom/app-1.21.2/resources/app/node_modules/settings-view/lib/package-card.js:361:31)

Commands

     -9:55.6.0 editor:toggle-line-comments (input.hidden-input)
  7x -9:53.1.0 core:backspace (input.hidden-input)
     -9:33.5.0 core:undo (input.hidden-input)
 22x -7:16.8.0 core:backspace (input.hidden-input)
     -7:10 core:confirm (input.hidden-input)
  2x -1:33.6.0 application:open-folder (atom-workspace.workspace.scrollbars-visible-always.theme-one-dark-syntax.theme-one-dark-ui.find-visible)
  3x -1:23.5.0 outline-view:toggle (div.panels-item)

Non-Core Packages

atom-formatter-jsbeautify 1.1.2 
atom-ide-ui 0.5.4 
atom-languageclient 1.0.7 
block-comment-lines 0.2.4 
busy-signal 1.4.3 
color-picker 2.2.5 
console-log 1.10.0 
file-watcher 1.2.6 
flow 0.5.3 
ftp-remote-edit 0.12.6 
highlight-selected 0.13.1 
ide-css 0.2.0 
ide-html 0.4.1 
ide-typescript 0.6.2 
indent-guide-improved 1.4.13 
intentions 1.1.5 
language-dust-ng 0.1.1 
less-than-slash 0.17.0 
linter 2.2.0 
linter-csslint 2.0.0 
linter-eslint 8.4.0 
linter-jscs 4.1.3 
linter-jshint 3.1.6 
linter-scss-lint 3.1.1 
linter-spell 0.15.0 
linter-spell-html 0.7.0 
linter-ui-default 1.6.10 
minimap 4.29.7 
minimap-autohide 0.10.1 
minimap-bookmarks 0.4.2 
minimap-codeglance 0.4.7 
minimap-cursorline 0.2.0 
minimap-find-and-replace 4.5.2 
minimap-highlight-selected 4.6.1 
minimap-linter 2.1.3 
minimap-pigments 0.2.2 
minimap-quick-highlight 1.0.1 
minimap-selection 4.5.0 
pigments 0.40.2 
platformio-ide-terminal 2.7.0 
sublime-block-comment 0.5.1 
sync-settings 0.8.3 

Unknown property: 'place-self'

Given

#submit {
  grid-column: 2/3;
  place-self: end;
}

ide-css reports:

Unknown property: 'place-self'

place-self is widely supported:

https://developer.mozilla.org/en-US/docs/Web/CSS/place-self

Please add it to ide-css.

Thanks for publishing this project.

Unknown property: 'appearance' in Diagnostics view

The property 'appearance' is not recognized by the CSS language server in the Diagnostics view. There is an alert next to the line where the property appearance is declared and a message shows up in Diagnostics:

However, the vendor prefixed versions are recognized and no error is thrown. Most developers like to include the unprefixed version as well, despite it being not used by any browsers, for future proofing and adherence to CSS standards and specifications.

Sass?

Will there be Sass support? only scss works..

@rule and other modern Dart Sass not supported

I'm using the modern Dart Sass with modules (@rule and namespaces) and would love to see support

Currently I just get tons of "errors" (due to ide-css not understanding the new SCSS

You need Dart Sass 1.23.0, while LibSass and Ruby Sass still haven't implemented it.

This compiles just fine in Dart Sass

Uncaught Error: Cannot find module 'atom-languageclient'Require stack:- $ATOM_HOME/packages\ide...

[Enter steps to reproduce:]

1. ...
2. ...

Atom: 1.58.0 x64
Electron: 9.4.4
OS: Microsoft Windows 10 Pro
Thrown From: ide-css package 0.4.0

Stack Trace

Uncaught Error: Cannot find module 'atom-languageclient'
Require stack:

• C:\Users\Tomas.atom\packages\ide-css\src\main.js
• C:\Users\Tomas\AppData\Local\atom\app-1.58.0\resources\app.asar\static\index.html

At internal/modules/cjs/loader.js:800

Error: Cannot find module 'atom-languageclient'
Require stack:
- C:\Users\Tomas\.atom\packages\ide-css\src\main.js
- C:\Users\Tomas\AppData\Local\atom\app-1.58.0\resources\app.asar\static\index.html
    at Module._resolveFilename (internal/modules/cjs/loader.js:797:17)
    at o._resolveFilename (electron/js2c/renderer_init.js:43:689)
    at Function.get_Module._resolveFilename (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:11:157920)
    at Module.require (/app.asar/static/index.js:61:43)
    at require (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:11:149207)
    at /packages/ide-css/src/main.js:2:32)
    at /packages/ide-css/src/main.js:38:3)
    at Module.get_Module._compile (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:11:149891)
    at Object.value [as .js] (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:11:153485)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at Module.require (/app.asar/static/index.js:72:46)
    at require (internal/modules/cjs/helpers.js:74:18)
    at customRequire (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:1:802772)
    at requireModule (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:14:1195622)
    at Package.requireMainModule (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:11:3520513)
    at Package.activateConfig (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:11:3509801)
    at PackageManager.packageHasSettings (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:11:908520)
    at PackageCard.hasSettings (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:14:2729736)
    at PackageCard.updateSettingsState (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:14:2720004)
    at PackageCard.updateInterfaceState (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:14:2719827)
    at new PackageCard (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:14:2711346)
    at PackageDetailView.completeInitialization (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:14:857941)
    at PackageDetailView.loadPackage (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:14:858508)
    at new PackageDetailView (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:14:855094)
    at SettingsView.getOrCreatePanel (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:11:930599)
    at SettingsView.showPanel (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:11:931320)
    at SettingsView.showDeferredPanel (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:11:931244)
    at SettingsView.initializePanels (~/AppData/Local/atom/app-1.58.0/resources/app/static/<embedded>:11:928701)

Commands

Non-Core Packages

atom-ide-base 3.4.0 
atom-ide-code-format 1.0.2 
atom-ide-datatip 0.25.0 
atom-ide-definitions 0.4.2 
atom-ide-hyperclick 1.0.11 
atom-ide-markdown-service 2.1.0 
atom-ide-outline 3.1.0 
atom-ide-signature-help 0.16.0 
atom-python-run 0.9.7 
busy-signal 2.0.1 
emmet 2.4.3 
ide-css 0.4.0 
ide-python 1.9.6 
intentions 2.1.1 
linter 3.4.0 
linter-ui-default 3.4.1 
platformio-ide-terminal 2.10.1 
script 3.32.2 

!important rules in scss logic are showing as errors.

Atom: 1.23.0
ide-css: 0.2.0

My code is compiling and working as expected but is being marked with errors.

I have the following SCSS code:

/**
 * This file contains mixins that are only applicable to the styleguide.
 */

@function get-mixin-important-var($important) {
	//If important is true it will add an important tag to everything.
	@return if($important, !important, null);
}

The error underlines directly underneath the !.

IDE-CSS is reporting

Example Usage:

@mixin heading($important: false) {
	$i: get-mixin-important-var($important);

	font-family: 'arial' $i;
	font-weight: 600 $i;
        color: #000 $i;

	font-size: 16px $i;
}

.heading {
      @include heading(true);
}

<div class="heading">My Heading</div>

Output CSS from example:

Pin for example

Option to disable diagnostics

This package is very useful for the outline mode, but the diagnostics less so. There doesn't seem to be any way to configure them, and they are rather buggy. It would be great to have an option to disable diagnostics, so one can still use this package for the outline view.

Less variables ask for { on lint

I was declaring some variables on a less file. Lint is marking some of these lines as (red sign) and saying that it expects {
On this code, lines 2 and 3 are marked:
@manual-bgcolor: #fff; @manual-bgcolor-hover: #efefef; @site-color-base: #fff; @site-color-gray-1: #f7f7f7; @site-color-gray-2: #efefef;

How can i fix it?

Uncaught Error: Header must provide a Content-Length property.

[Enter steps to reproduce:]

1. Have this package installed
2. Open atom (I opened on a Rust source file which also uses the atom-ide package)

Atom: 1.24.0 x64
Electron: 1.6.16
OS: Debian GNU/Linux
Thrown From: ide-css package 0.2.0

Stack Trace

Uncaught Error: Header must provide a Content-Length property.

At /home/bruno/.atom/packages/ide-css/node_modules/vscode-jsonrpc/lib/messageReader.js:200

Error: Header must provide a Content-Length property.
    at StreamMessageReader.onData (/packages/ide-css/node_modules/vscode-jsonrpc/lib/messageReader.js:200:27)
    at /packages/ide-css/node_modules/vscode-jsonrpc/lib/messageReader.js:185:19)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at readableAddChunk (_stream_readable.js:176:18)
    at Socket.Readable.push (_stream_readable.js:134:10)
    at Pipe.onread (net.js:551:20)

Commands

  2x -0:40.2.0 core:move-down (input.hidden-input)
  2x -0:39.8.0 core:move-up (input.hidden-input)
     -0:39.1.0 core:save (input.hidden-input)

Non-Core Packages

atom-ide-ui 0.9.2 
atom-ternjs 0.18.3 
autocomplete-racer 0.1.3 
build-gradle 0.6.0 
busy-signal 1.4.3 
color-picker 2.2.5 
GAS-x86_64-highlighter 0.3.7 
ide-css 0.2.0 
ide-java 0.8.1 
ide-php 0.7.8 
ide-rust 0.14.0 
ide-scala 0.5.0 
ide-typescript 0.7.5 
intentions 1.1.5 
language-assembly 0.7.2 
language-ats 0.1.6 
language-ebnf 0.1.0 
language-elixir 0.22.0 
language-erlang 3.2.0 
language-gradle 0.0.5 
language-groovy 0.7.0 
language-haskell 1.17.3 
language-htaccess 0.2.0 
language-idris 0.4.10 
language-jasmin 0.2.0 
language-latex 1.1.1 
language-luajit 1.2.0 
language-qcl 0.5.0 
language-rust 0.4.12 
language-scala 1.1.9 
language-smalltalk 1.0.2 
language-twig 1.6.3 
language-x86 1.0.1 
linter 2.2.0 
linter-coffeelint 1.3.1 
linter-rust 0.8.4 
linter-ui-default 1.7.1 
php-getters-setters 0.5.5 
php-integrator-autocomplete-plus-legacy-php56 1.0.1 
php-integrator-base-legacy-php56 1.0.1 
php-integrator-call-tips-legacy-php56 1.2.3 
php-integrator-linter-legacy-php56 1.3.1 
php-integrator-navigation-legacy-php56 1.0.1 
php-integrator-refactoring-legacy-php56 1.0.1 
php-integrator-tooltips-legacy-php56 1.1.6 
project-manager 3.3.5 
Sublime-Style-Column-Selection 1.7.4 

CTRL + ALT + C interferes with Colorpicker

When using CTRL + ALT + C it copies the details about a entity, although this is "nifty" it gets in the way of the very popular color pickers default command to be used.

Would be nice if you could change this as the color picker is more widely used with 1.5 million + downloads.

Was able to change color pickers default to E key luckily, but cause a bit of confusion and Im sure it has for others also.

Style tag in .html and .vue file

Hi,

It would be nice if the plugin supported <style> tag inside .htm, .php or .vue (single file component).
I tried adding them as Additional grammars (experimental) to no luck.

I understand that outline view would not work in those case as these file type already use the outline view for other purpose, but it would be nice to still see the CSS propriety tooltip description.

Indentation in the Outline View

I think it would help a lot to have the selectors in the outline view indented like the CSS/SCSS itself. So you can easier identify the child selectors from the parent ones.

If it's unclear what I'm meaing I can create a mock-up.

PS: I don't know if it's part of your package or the Atom IDE UI one.

Edit: I just noticed that ide-typescript is already doing something like that.