wixplosives / stylable-intelligence

Stylable extension for Visual Studio Code

stylable-intelligence

Overview

Stylable Intelligence is an extension implementing the Language Server Protocol that provides IDE support for Stylable.

Stylable Intelligence is currently only supported in VSCode (version 1.20.0 and later). Support for JetBrains IDEs (WebStorm, IntelliJ) is planned.

Currently supported: Code Completions, Diagnostics, Go to Definition, Syntax Highlighting

All CSS language support functionality is also supported (hover hints, inline color picker, etc.). Some CSS diagnostics were removed in order to support custom Stylable syntax.

Installation

From VSCode Marketplace

Install 'Stylable Intelligence' from the VSCode Extension Marketplace or inside VSCode in the Extension panel, search for "stylable-intelligence".

Known Issues

Known issues may be found in the Stylable Intelligence repo.

Development

Information about running the Stylable Intelligence development enviroment can be found here.

stylable-intelligence's Issues

isIllegalLine("") = true

An illegal line is replaced by "", so this is unnecessary.

NamedImportCompletionProvider

For providing importables to complete after -st-named:

Fix sort order so Stylable appears before CSS

When completing from empty line at top level, :import appears before ::hover, etc.
When entering : then completing, :import is at the end.

Change all unit test files to .st.css

Fix build script to copy test case properly

Currently a part of "build" in package.json, needs to be automatic

Handle duplicate completions

When returning final completions, remove all the ones that are the same (for a given value of 'same')

Find a way to add files to TextDocuments from server side

Currently client reads all .css files on activation. We need the server to be able to add docs for, e.g., dependencies not inside the folder. Also for tests.

Add TextEdits with .replace()

Currently all completions are with .insert(), so when typing ':im' and selecting ':import' you get ':im:import'

Create mechanism for test variants

Use one base case, with variants that:

1. Add one or ore spaces
2. Add one or more colons
3. Add semi-colon at end of string
4. Replaces spaces with \n and vice-versa

Completions break, and are only restored on save

Open this doc:
.baga {
color: red;
}

::

Place cursor after ::, and ctrl+space - no ':import'. Deleting one or both : and ctrl+space still has no ':import' or '.root'.
Save the doc, type : and ':import' is in the list. Type another :, and it's still in.

Grouped selectors

Selectors separated by ,

Return meaningful info in statSync so we can cache docs

In FileProcessor supplied in createProvider(...)
Currently returns now() on any call, so no caching at all.

Get debugger working in server

We only have console logs

E2E needs to use vscode GUI

currently e2e uses the vscode workspace to load files and open an editor, but does not position the caret and call vscode's triggerCompletion command, instead calling the extension itself

Fix position of :<> completions when no : typed

.root| sends :state with position starting before the 't' so is ignored.

AST DRP

When asking for completions, code is usually broken.
This throws PostCSS into a tizzy.
We currently check if the current line is illegal, and ignore this line in parsing.
This is fragile, and does not solve cases where the error is not on the typed line.
Better algorithm suggestion is to identify the problem spots and expand deleted scopes around them until we have valid code.

resolveExtends complodes when resolving a class that doesn't extend

Should return an array of only the class symbol itself.
Instead returns:
TypeError: Cannot read property '_kind' of undefined
Which isn't nice.

Change completions that don't close line to not use MAX_VALUE

• Named value completions

Fix TestResolver to include extra files

TestResolver simply ignores extra files at present.
This causes multi-file tests to give false positive results.

No completion of states or elements if selector already has ruleset

Comp| {
}

does not complete, even if there are completions.
Failure in pathFromPosition, need to check actually inside the selctor's ruleset.

Multiple values in -st-named

Comma separated

Paths break on Windows when crossing files

Completions depending on parsing other files cause an error and don't work.
Related to Stylable FS paths when file:// is used.

No value completions in -st-extends when text present

.gaga {
-st-extends: |;
}

completes state 'lala'

.gaga {
-st-extends: la|;
}
doesn't

completion icons

Completions
CompItemKinds for icons:
. - Class
value() -> Variable
-st-named -> (var -> Variable, cls -> Class)
: -> Enum
:vars -> Keyword
:import -> Keyword
-st-* directive -> Keyword

Change implementation to use language server protocol

Register Stylable as language, and make it activate the extension

Currently extension is activated when opening .st.css file
We should register stylable as a language, and:

1. Declaring file language to be stylable should activate the extension
2. Language name in VSCode status bar

Import directives completed after closing }

:import {
-st-from: './import.st.css';
-st-named:
}|

suggests st-default, st-theme

When extension installation fails - show error message

Scenario:

1. Visual Studio code version was not supported by extension
2. Installation succeeded, however 'reload' appeared on the extension and reloading did not work.

Solution:
Show an error message like the one below using the existing mechanism:

Pseudo-States are completed after ::

Shouldn't happen

Remove transpiled server from client folder

add ./packages/client/server to .gitignore or something

-st- completes from 2nd -

So we get -st-st-from, etc.

ignore anything that is not *.st.css

Right now the vscode plugin try to work on *.css files, this is annoying when working in a project with no stylable, or on a none stylable file.

Following :import interpreted as part of complex selector

:import{
-st-from: '../components/auto-form/entry.st.css';
-st-default: Entry;
}

Entry:

:import{
-st-from: '../components/auto-form/auto-form.st.css';
-st-default: AutoForm;
}

Complete available class/tags after space

Complete available class/tags after space

.shlomo |
should suggest .shlomo again, as well as other classes/tags available

Default import not showing as tag name

in auto-views, prob. due to path issue

Remove extraFiles field and re-add al single-line checks in tests

Completions tests. Waiting for me to remove the extraFiles parameter from getCompletions();

Diagnostics

Die, Agnostics!
To be broken down into smaller issues...

Completions E2E tests

• Stylable completions appear before CSS completions. [Can't be tested in server, no CSS completions]
• Completions suggest file names from local FS for '-st-from:'. [Can't be tested in server, client loads the files]

CI Hangs forever

Both Jenkins and Travis are hang forever when they are running npm run test command.
Jenkins:
https://cijoe.wixcore3.com/job/build-generic/897/console
Travis
https://travis-ci.org/wixplosives/stylable-intelligence/builds/274689101?utm_source=github_status&utm_medium=notification

Ive isolated issue on Jenkins agent.
internal-jenkins-slave3a.core-3.wixcore3.com

I can see vscode process running in background when test hangs

ps aux | grep vscode output

ubuntu   21536  0.0  0.0  12944  1028 pts/2    S+   07:36   0:00 grep vscode
ubuntu@internal-jenkins-slave3a:~$ ps aux | grep vscode
ubuntu   21648  2.9  0.9 1082840 74804 pts/1   Sl+  07:36   0:00 /home/jenkins-slave/workspace/build-generic/packages/client/.vscode-test/VSCode-linux-x64/code --extensionDevelopmentPath=/home/jenkins-slave/workspace/build-generic/packages/client --extensionTestsPath=/home/jenkins-slave/workspace/build-generic/packages/client/dist/test /home/jenkins-slave/workspace/build-generic/packages/client/test/cases
ubuntu   21650  0.0  0.3 330832 28544 pts/1    S+   07:36   0:00 /home/jenkins-slave/workspace/build-generic/packages/client/.vscode-test/VSCode-linux-x64/code --type=zygote --no-sandbox
ubuntu   21676  0.5  0.7 478500 55220 pts/1    Sl+  07:36   0:00 /home/jenkins-slave/workspace/build-generic/packages/client/.vscode-test/VSCode-linux-x64/code --type=gpu-process --no-sandbox --supports-dual-gpus=false --gpu-driver-bug-workarounds=7,23,74 --disable-gl-extensions=GL_KHR_blend_equation_advanced GL_KHR_blend_equation_advanced_coherent --gpu-vendor-id=0x0000 --gpu-device-id=0x0000 --gpu-driver-vendor --gpu-driver-version --gpu-driver-date --service-request-channel-token=084DCB1699055152DF6670A30EAEBF3D

if i kill all vscode processes and run
/home/jenkins-slave/workspace/build-generic/packages/client/.vscode-test/VSCode-linux-x64/code

it will hang with following message

{ errorCode: 'load',d-generic/packages/client/.vscode-test/VSCode-linux-x64/code
  moduleId: 'keytar',
  neededBy: [ 'vs/platform/credentials/node/credentialsService' ],
  detail:
   Error: libsecret-1.so.0: cannot open shared object file: No such file or directory
       at process.module.(anonymous function) [as dlopen] (ELECTRON_ASAR.js:173:20)
       at Object.Module._extensions..node (module.js:598:18)
       at Object.module.(anonymous function) [as .node] (ELECTRON_ASAR.js:173:20)
       at Module.load (module.js:488:32)
       at tryModuleLoad (module.js:447:12)
       at Function.Module._load (module.js:439:3)
       at Module.require (module.js:498:17)
       at n (/home/jenkins-slave/workspace/build-generic/packages/client/.vscode-test/VSCode-linux-x64/resources/app/out/vs/loader.js:4:10954)
       at Object.<anonymous> (/home/jenkins-slave/workspace/build-generic/packages/client/.vscode-test/VSCode-linux-x64/resources/app/node_modules/keytar/lib/keytar.js:1:169)
       at Object.<anonymous> (/home/jenkins-slave/workspace/build-generic/packages/client/.vscode-test/VSCode-linux-x64/resources/app/node_modules/keytar/lib/keytar.js:55:3) }

When i run tests locally on my machine i can see error message like this

Error: certificate has expired
    at TLSSocket.<anonymous> (_tls_wrap.js:1088:38)
    at emitNone (events.js:86:13)
    at TLSSocket.emit (events.js:188:7)
    at TLSSocket._finishInit (_tls_wrap.js:610:8)
    at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:440:38)

So my guess it has some problem with certificate and it causes VScode to crash and not exit in CI environment.

Integrate new stylable

Multi-file dependencies not working currently.
Waiting for @barak007 to help integrate new stylable and use its resolver.

build issues

While installing the extension in a real running vscode I've encountered the following issues:

• we need to remove adding all files. This adds everything in the node_modules, etc.
• we need to remove all console.logs and trace since it dumps everything in vscode output.
• remove trace

Add assertions on ranges to completions tests

Completions may be received but not displayed in IDE if ranges are wrong.

When completing same class twice, don't override the first.

.gaga{
-st-states:hello,goodbye;
}

.gaga|

Suggests .gaga (good) but uses it to override current .gaga (bad) due to wrong range.

Shouldn't complete ':import' inside selectors

Including other ':import's

Add handling of several initial strings in relevant completions

-st-states, etc. need to go over all completion candidates and generate initial strings.

Make resolver load all css files in folder in test mode

When running/debugging extenssion, the client loads all the docs to the doc manager.
When runnin in test mode on the server, need to load all the files on init.

make tests run in terminal

Note that server tests run from client folder (which is weird)

value() completions appear on a par ranking with css

Find a way to make them appear on top...

Snippet Tabstops not working

Theoretically, can use $0, $1, ${2:index} to make snippet behavior more intelligent.
Can't get it to work.

Refactor asserters in tests for readability and extensibility

Make it easy to add a 'No completions' asserter, as well as specifying strict/exact mode.