Open tomrav opened 2 years ago
Demo for most language features
publishDiagnostics
Diagnostics are a way to indicate issues with the code.
For Stylable: info/warning/error diagnostics emitted by Stylable for any *.st.css
file
completion
Code completions provide context sensitive suggestions to the user.
For Stylable: completions for Stylable symbols and contexts
completion resolve
Support resolve providers that compute additional information for completion proposal the user selects. This information is displayed along-side the selected item.
For Stylable: further information about the completion including type and origin path
hover
Hovers show information about the symbol/object that's below the mouse cursor. This is usually the type of the symbol and a description.
For Stylable: we need to decide on this, but showing the target selector can be really nice, maybe specificity too.
signatureHelp
When the user enters a function or method, display information about the function/method that is being called.
For Stylable: relevant for some of our function syntax - formatters, mixins, states with params
declaration
For the next set of capabilities, we need to determine how the Stylable language maps out in terms of language syntax / capabilities. It is possible we will decide some of these are not relevant to our language.
Resolve the declaration location of a symbol at a given text document position
For Stylable: possibly not relevant to Stylable
definition
Allow the user to see the definition of variables / functions / methods right where the variables / functions / methods are being used.
For Stylable: enables click "go-to" definition behavior
typeDefinition
Resolve the type definition location of a symbol at a given text document position.
For Stylable: probably not relevant to Stylable
implementation
Resolve the implementation location of a symbol at a given text document position.
For Stylable: can be mapped out to the various language features showing implementation for selectors / variables / keyframes
references
Allow the user to see all the source code locations where a certain variable/function/method/symbol is being used.
For Stylable: enables showing all references of a class / element / var / keyframe
documentHighlight
Allow the user to see all occurrences of a symbol in the open editor.
For Stylable: highlight all occurrences of a Stylable symbol, not based on string matching
documentSymbol
Allow the user to quickly navigate to any symbol definition in the open editor.
For Stylable: navigate directly to certain Stylable symbols in the document
workspaceSymbol
Allow the user to quickly navigate to symbol definitions anywhere in the folder (workspace) opened in VS Code.
For Stylable: navigate directly to certain Stylable symbols in the the workspace
codeAction
Provide the user with possible corrective actions right next to an error or warning. If actions are available, a light bulb appears next to the error or warning. When the user clicks the light bulb, a list of available Code Actions is presented.
For Stylable: list of automatic fixes for certain Stylable diagnostics
codeAction resolve
Provide source code manipulation actions such as refactoring. For example, Extract Method.
For Stylable: automatic fixes for certain Stylable diagnostics, or code actions (e.g. extract to variable)
codeLens
Provide the user with actionable, contextual information that is displayed interspersed with the source code.
For Stylable: can be used to show selector specificity or resolved value()
inside the source.
codeLens resolve
Bind the CodeLens results to a command by responding to codeLens/resolve.
For Stylable: no immediate useful actions come to mind.
codeLens refresh
Use it to ask clients to refresh the code lenses currently shown in editors
For Stylable: used for updating whatever we decide to display in codeLens if at all
documentLink
Request the location of links in a document
For Stylable: request symbol or url navigation
documentLink resolve
Resolve the target of a given document (if not done in documentLink
)
For Stylable: resolve the target for documentLink
documentColor
Allow the user to preview colors in the document
For Stylable: shows color squares next to native colors and variable which resolve to a color
colorPresentation
Allow the user to modify colors in the document
For Stylable: provides a color picker to edit colorPresentation
colors
formatting
Provide the user with support for formatting whole documents.
For Stylable: formatting capabilities for *.st.css
files
rangeFormatting
Provide the user with support for formatting a selected range of lines in a document.
For Stylable: formatting capabilities for specific ranges in *.st.css
files
onTypeFormatting
Provide the user with support for formatting text as they type.
For Stylable: not very important for Stylable
rename
Allow the user to rename a symbol and update all references to the symbol.
For Stylable: rename any Stylable symbol in all occurrences
prepareRename
Setup and test the validity of a rename operation at a given location.
For Stylable: validation for rename actions
foldingRange
Return all folding ranges found in a given text document.
For Stylable: provides collapsing behavior
selectionRange
Return suggested selection ranges at an array of given positions. A selection range is a range around the cursor position which the user might be interested in selecting.
For Stylable: provides contextual expanding selection
semantic tokens
Used to add additional color information to a file that depends on language specific symbol information. A semantic token request usually produces a large result. The protocol therefore supports encoding tokens with numbers. In addition optional support for deltas is available.
For Stylable: provides dynamic syntax highlighting
linkedEditingRange
Return for a given position in a document the range of the symbol at the position and all ranges that have the same content. Optionally a word pattern can be returned to describe valid contents. A rename to one of the ranges can be applied to all other ranges if the new content is valid. If no result-specific word pattern is provided, the word pattern from the client’s language configuration is used.
For Stylable: multi-cursor editing on multiple instance of the same contentreserving comment space
reserving comment space
reserving comment space
reserving comment space
A New LSP on the Horizon (WIP)
This is currently blocked until our efforts on the selector and value parsers is complete
A language service designed to run in both Monaco and VSCode, providing language capabilities for Stylable.
See capabilities description below.
Capability priorities and high level tasks
@stylable/core
High level tasks
completion
Below is a mapping of all completions in which Stylable plays a part (not native CSS). The mapping is broken down into AST parts (ish),
at-rules
,rules
anddeclarations
.For each completion, its location and completion type are detailed.
location - is a list of all allowed places for this completion to appear, each completion should not appear outside of its allowed locations
completion - two options, either a general description of things that need to be computed (like, available symbols) or a template string representing the completion format, with the cursor tab-jumping to the next "$" in a descending order ($0 is implicitly the end of the string unless explicitly defined otherwise)
at-rules
@st-import
@st-import $1 from "$2";
keyframes()
@st-import
inner directivekeyframes($1)
keyframes(xxx)
inner parts - available keyframe symbols@st-import
named partfrom
- relevant path suggestions@st-import
directive@st-namespace
(or@namespace
)@st-namespace "$1";
@st-global-custom-properties
@st-global-custom-properties --$1;
@st-global-custom-properties
directive@keyframes
st-global(xxx)
- keyframe name wrapper@keyframes
definitionst-global($1)
@st-scope
@st-scope $2 {\n $1\n}
@st-scope
directive@st-custom-selector
(or `@custom-selector):--
@st-custom-selector :--$2 $1;
@st-custom-selector
directive@property
st-global(--xxx)
- css var name wrapper@property
definitionst-global(--$1)
@media
(explore other nativeat-rules
)value(xxx)
- in the params@media
definitionvalue($1)
@st-vars
(does not exist yet)@st-vars $2 {\n $1\n}
st-map
,st-array
and custom types (e.g.stBorder
when imported), including nesting@st-vars
st-map($1)
|st-array($1)
|st-border($1)
st-map
/st-array
valuesstring
rules
:import
:import {\n $1\n}
st-from
,st-default
,st-named
:import
directive-st-from: "$1";
|-st-default: "$1";
|-st-named: "$1";
-st-named
inner parts - available named symbols,keyframes()
-st-named
directive-st-from
- relevant path suggestions-st-from
directive:vars
@st-vars
:vars {\n $1\n}
:st-global()
(or:global()
):st-global($1)
st-global()
.part
Comp
:userSelected
:userSelected(xxx)
value(xxx)
as param (considering deprecation)value($1)
::myPart
- according to selector context:--xxx
parts.root
- inherently exists in every stylesheet (probably handled by.classes
completion).root {$1}
declarations
-st-extends
-st-extends: $1;
-st-extends
declaration-st-states
-st-states: $1;
myState(xxx)
-st-states
declaration, inside a state definition with parenthesisstring
|number
|tag
|enum()
myState(string(minLength(5)))
string
minLength
|maxLength
|contains
|regex
number
min
|max
|multipleOf
-st-mixin
-st-mixin: $1;
-st-mixin
declarationstring
value(xxx)
as nested argumentsvalue(xxx, yyy)
-st-global
-st-global: $1;
-st-global
directivevalue(xxx, yyy)
value($1)
xxx
is the name of a Stylable variable in scopevalue()
directive in a declaration valueyyy
is a list of comma-separated member accessors (keys) on the var based on its type (optional)value()
directive of the appropriate type in a declaration valuest-global(xxx)
(future)animation
oranimation-name
declaration valuesst-global($1)
var()
)st-global($1)
value(xxx)
as nested argumentsvalue(xxx, yyy)
hover
value(xxx)
@st-import
@st-namespace
@st-custom-global-properties
@st-scope
@st-custom-selector
@st-vars
:import
:global
- include in selectors?.root
- special case?-st-extends
-st-states
-st-mixin
-st-global
-st-from
-st-default
-st-named
st-global()
value()
- seevalue(xxx)
abovesignatureHelp
st-global()
- contextually aware (var/keyframe)value(x, y, z)
- according to var typest-map
,st-array
and custom oneskeyframes()
- in named import statementsNative CSS
Infra / Host / Configuration
monaco vs. vscode
Some differences exists between the two LSP possible consumers, needs further research.
semantic tokens
may work for both cases, needs validating)Testing
vscode-test
to test general feature flowsResearch References