I work use vue.Is there have any configeration to set file extname?

Btw, no way to auto add one indent after for example a class, id or element is written? (This is the behavior in Brackets/Atom)

e.g. With an enter should be

.hola
  width 3px

But it currently is

.hola
width 3px

It doesn't recognize that next will be a property so it should have one indent, it's something really small but I really like how fast it is in other IDE when the extension adds that indent after each element when going to the next line.

color preview square show twice on CSS files,
this bug only occurs if a stylus file is open in other tab.

Every time that we open a curly brace the pop up with the autocompletion suggestion come up.
It's pretty annoying because I always hit enter just after open the brace and I end up accepting the firts suggestion on list..
Is there a way to revert it?

Hi, @d4rkr00t. I am stylus maintainer. Thanks for your awesome stylus-support vscode extension. It help many stylus user around the world. You are hero! Now we decide restart stylus iteration ! code editor support is one of main work. What do you think about restart vscode-stylus development ? Stylus team fork it ? or transfer repo to stylus github org ? or just continue development on d4rkr00t/language-stylus repo ! Looking forward to your reply ！Thanks

I send you a email ([email protected]) but no reply

Is there any option to add autoindent in VS Code? For example, I write div and after I hit Enter I don't need to make Tab to write styles. This is so super annoying. I had all set up in Sublime, but can't solve it in VS Code. Please help.

What about this setting to stylus like css
"css.lint.duplicateProperties": "ignore"
Is it possible?

Highlight fail after interpolate a var and a string inside url.

• Screenshot

• The code I've used

FONTS_PATH = '../assets/fonts'

@font-face
  font-family: 'Akrobat'
  font-weight: 600
  src: url(FONTS_PATH + '/Akrobat-Bold.woff2') format('woff2'),
       url(FONTS_PATH + '/Akrobat-Bold.woff') format('woff')

@font-face
  font-family: 'Akrobat'
  src: url(FONTS_PATH + '/Akrobat-Regular.woff2') format('woff2'),
       url(FONTS_PATH + '/Akrobat-Regular.woff') format('woff')

• Issue Type: Performance
• Extension Name: language-stylus
• Extension Version: 1.11.0
• OS Version: Linux x64 4.18.0-16-generic
• VSCode version: 1.32.0

⚠️ sysoev.language-stylus-unresponsive.cpuprofile.txt ⚠️

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

Could you extend the Stylus syntax highlighing to work when Stylus syntax is written inside js, similar to how styled-components syntax highlighting works?

From @vimcaw on August 17, 2017 1:37

• VSCode Version: Code 1.15.0 (8b95971d8cccd3afd86b35d4a0e098c189294ff2, 2017-08-09T20:16:18.034Z)
• OS Version: Windows_NT x64 10.0.15063
• Extensions:

(1 theme extensions excluded)

Steps to Reproduce:

Color picker doesn't work in stylus file (*.styl), maybe it only work in *.css file.

Reproduces without extensions: Yes

Copied from original issue: microsoft/vscode#32678

It does not look like Emmet uses :

Related to #16

There are three cases I found where color decorators incorrectly do not show up:

• Any color after a ?= or := conditional assignment operator
  
• Color functions without commas
  
• In function calls
  

Would be nice to provide users with an option to opt out of using the built in Stylus functions for autocompletion.

Something like "languageStylus.useBuiltinFunctions": false

Add this please

is there any way to automatically add css prefixes?

I ran into an "Extension host terminated unexpectedly" error and console showed this.

Note at the very bottom it indicates it is related to this repo.
I wasn't even using stylus at the time of the crash.

[Extension Host]% ObjectacceptSuggestionOnCommitCharacter: trueacceptSuggestionOnEnter: "on"accessibilitySupport: "auto"autoClosingBrackets: trueautoIndent: falsecodeLens: truecolorDecorators: truecursorBlinking: "blink"cursorStyle: "line"detectIndentation: truedragAndDrop: trueemptySelectionClipboard: truefind: Objectfolding: truefontFamily: "Fira Code"fontLigatures: truefontSize: 12fontWeight: "normal"formatOnPaste: falseformatOnSave: trueformatOnType: falseglyphMargin: truehideCursorInOverviewRuler: falseinsertSpaces: trueletterSpacing: 0lightbulb: ObjectlineHeight: 0lineNumbers: "on"links: truematchBrackets: trueminimap: ObjectmouseWheelScrollSensitivity: 1mouseWheelZoom: falsemultiCursorModifier: "ctrlCmd"occurrencesHighlight: trueoverviewRulerBorder: trueoverviewRulerLanes: 3parameterHints: truequickSuggestions: ObjectquickSuggestionsDelay: 5renderControlCharacters: falserenderIndentGuides: falserenderLineHighlight: "line"renderWhitespace: "none"roundedSelection: truerulers: Array(0)scrollBeyondLastLine: trueselectionHighlight: trueshowFoldingControls: "mouseover"smoothScrolling: truesnippetSuggestions: "top"stablePeek: falsesuggestFontSize: 0suggestLineHeight: 0suggestOnTriggerCharacters: truetabCompletion: falsetabSize: 4tokenColorCustomizations: ObjecttrimAutoWhitespace: trueuseTabStops: truewordBasedSuggestions: truewordSeparators: "`~!@#$%^&*()-=+[{]}\|;:'",.<>/?"wordWrap: "off"wordWrapColumn: 80wrappingIndent: "same"__proto__: Object
extensionHost.ts:191 [Extension Host] debugger inspector at %cFATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: %cnode::Abort() [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
 2: node::DLOpen(v8::FunctionCallbackInfo<v8::Value> const&) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
 3: %cv8::internal::FatalProcessOutOfMemory(char const*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
 4: v8::internal::FatalProcessOutOfMemory(char const*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
 5: %cv8::internal::Factory::NewFixedArray(int, v8::internal::PretenureFlag) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
 6: v8::internal::Factory::NewScopeInfo(int) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
 7: %cv8::internal::compiler::Scheduler::MovePlannedNodes(v8::internal::compiler::BasicBlock*, v8::internal::compiler::BasicBlock*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
 8: v8::internal::Scope::AllocateScopeInfosRecursively(v8::internal::Isolate*, v8::internal::MaybeHandle<v8::internal::ScopeInfo>) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
 9: %cv8::internal::DeclarationScope::AllocateVariables(v8::internal::ParseInfo*, v8::internal::AnalyzeMode) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
10: %cv8::internal::DeclarationScope::Analyze(v8::internal::ParseInfo*, v8::internal::AnalyzeMode) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
11: %cv8::internal::Compiler::Analyze(v8::internal::ParseInfo*, v8::internal::ThreadedList<v8::internal::ThreadedListZoneEntry<v8::internal::FunctionLiteral*> >*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
12: v8::internal::Compiler::PostInstantiation(v8::internal::Handle<v8::internal::JSFunction>, v8::internal::PretenureFlag) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
13: %cv8::internal::Compiler::CompileDebugCode(v8::internal::Handle<v8::internal::SharedFunctionInfo>) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
14: v8::internal::Compiler::Compile(v8::internal::Handle<v8::internal::JSFunction>, v8::internal::Compiler::ClearExceptionFlag) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
15: %cv8::internal::RegisterConfiguration::AreAliases(v8::internal::MachineRepresentation, int, v8::internal::MachineRepresentation, int) const [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libnode.dylib]
16: %c0x1c3ae098437d
17: 0x1c3ae09846b9
18: 0x1c3ae42a6d9e
%c
<--- Last few GCs --->

[1751:0x7fb9ca010400] 28222139 ms: Mark-sweep 2050.2 (2120.0) -> 2050.2 (2091.0) MB, 1766.4 / 0.0 ms  (+ 0.0 ms in 0 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 1766 ms) last resort 
[1751:0x7fb9ca010400] 28223581 ms: Mark-sweep 2050.2 (2091.0) -> 2050.2 (2091.0) MB, 1440.5 / 0.0 ms  last resort 


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0xef9641ab959 <JS Object>
    2: selectorToken [~/.vscode/extensions/sysoev.language-stylus-1.8.0/node_modules/stylus/lib/parser.js:~398] [pc=0x1c3ae42a6d9e](this=0x4cc9e3d2d89 <a Parser with map 0x1af1a6f1d1c1>)
    3: selectorParts [~/.vscode/extensions/sysoev.language-stylus-1.8.0/node_modules/stylus/lib/parser.js:~1561] [pc=0x1c3ae42a3ac4](this=0x4cc9e3d2d89 <a Parser with map 0x1af1a6f1d1c1...

Nested tags (built-ins) with operators with white space do not get formatted correctly. Note however that classes, non-nested occurances, and operators without white space do get formatted correctly.

.child+.child
.child>.child + .child>.child
.child~.child + .child~.child
.child,.child + .child,.child

label+label
label>input + label>input
label~input + label~input
label,input + label,input

.child + .child
.child > .child + .child > .child
.child ~ .child + .child ~ .child
.child , .child + .child , .child

label + label
label > input + label > input
label ~ input + label ~ input
label , input + label , input

.parent
  .child+.child
  .child>.child + .child>.child
  .child~.child + .child~.child
  .child,.child + .child,.child

  label+label
  label>input + label>input
  label~input + label~input
  label,input + label,input

  .child + .child
  .child > .child + .child > .child
  .child ~ .child + .child ~ .child
  .child , .child + .child , .child
  
  label + label                   /* broken */
  label > input + label > input   /* broken */
  label ~ input + label ~ input   /* broken */
  label , input + label , input   /* broken */

Syntax highlighting for CSS Grid spec does not highlight correctly. I have attached a screenshot to help.

• Issue Type: Performance
• Extension Name: language-stylus
• Extension Version: 1.11.0
• OS Version: Linux x64 4.15.0-43-generic
• VSCode version: 1.30.2

⚠️ Make sure to attach this file from your home-directory: /home/diego/sysoev.language-stylus-unresponsive.cpuprofile.txt ⚠️

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

Steps to Reproduce:
Create an styl file with a simple variable
Create another styl file that is importing the previously created styl file
Try to implement a class in the second styl file and try to use the variable in there. Intellisense is not working outside the file.

• Issue Type: Performance
• Extension Name: language-stylus
• Extension Version: 1.11.0
• OS Version: Darwin x64 18.5.0
• VSCode version: 1.33.1

⚠️ Make sure to attach this file from your home-directory:
⚠️/Users/ayemia/sysoev.language-stylus-unresponsive.cpuprofile.txt

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

• Issue Type: Performance
• Extension Name: language-stylus
• Extension Version: 1.11.0
• OS Version: Darwin x64 18.2.0
• VSCode version: 1.30.2

⚠️ Make sure to attach this file from your home-directory: /Users/arieaditya/sysoev.language-stylus-unresponsive.cpuprofile.txt ⚠️

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

I'm dying. I had this problem last year. I don't know how to solve it

I have bug in developer console.

Cannot read property 'document' of undefined: TypeError: Cannot read property 'document' of undefined
    at vscode_1.window.onDidChangeActiveTextEditor.editor (/Users/exdeniz/.vscode/extensions/sysoev.language-stylus-1.7.2/out/src/color-decorators.js:103:20)
    at e.invoke (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:30930)
    at e.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:34737)
    at /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:346482
    at e.invoke (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:30930)
    at e.fire (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:34737)
    at t.$acceptDocumentsAndEditorsDelta (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:300894)
    at t.e.handle (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:266424)
    at s (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:154927)
    at h (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:155604)

I don't know if it is a language-stylus or an emmet issue, but here it is:

This will autocomplete (ie on tab press):

.class1
  display block
  m10 // <-

.class2
  display block

This will not:

.class1
  display block
  m10 // <-

.class2 {
  display block
}

To reproduce:

$gray = {
	"50": #fafafa
	"100": #f4f4f5
	"200": #e4e4e7
	"300": #d4d4d8
	"400": #a1a1aa
	"500": #71717a
	"600": #52525b
	"700": #3f3f46
	"800": #27272a
	"900": #18181b
	"950": #09090b
}

Current behavior:

Environment information:

• Stylus extension version: 1.16.0
• VSCode version: 1.77.1
• operating system: Windows

VS Code now supports color preview swatches:

It'd be nice to see this in Stylus files too. Currently I see this kind of thing, which is harder to work with:

Is it possible to disable editor.quickSuggestions for stylus files?

• Issue Type: Bug
• Extension Name: language-stylus
• Extension Version: 1.11.0
• OS Version: Windows_NT x64 6.1.7601
• VSCode version: 1.42.1

{
	"messages": [],
	"activationTimes": {
		"codeLoadingTime": 9765,
		"activateCallTime": 30,
		"activateResolvedTime": 166,
		"activationReason": {
			"startup": false,
			"extensionId": {
				"value": "sysoev.language-stylus",
				"_lower": "sysoev.language-stylus"
			},
			"activationEvent": "onLanguage:stylus"
		}
	},
	"runtimeErrors": []
}

For most selectors* when you insert curly-braces and hit ENTER, the closing brace does not land on its own newline below the cursor. (See image)

The extra keystrokes needed to push the closing brace to its place, slowly drive anyone insane....

*) Note this does not happen when your selector starts with a plain element - like div > .foo - then the closing brace lands on its own newline. Weird.

To reproduce:

$color-scheme-light {
    --text-color: #3f3f3f;
    --text-color-hover: black;
    --link-color: #13348f;
    --link-color-hover: #071438;
    --semitransp-bg-color: rgba(245, 245, 245, .2);
    --more-info-btn-color: #0f2a75;
    --navbar-text-color: #474747;
}
$color-scheme-dark {
    --text-color: #dadada;
    --text-color-hover: #8e8e8e;
    --link-color: #97b3ff;
    --link-color-hover: #aaa;
    --semitransp-bg-color: rgba(60, 60, 60, .2);
    --more-info-btn-color: #79f;
    --navbar-text-color: #d2d2d2;
}

Current behavior:

Highlighting confusion w/ CSS variables and hex color:

Expected behavior:

They displays neatly.

Environment information:

• Stylus extension version: v1.16.0
• VS Code version: 1.69.1
• operating system: Arch Linux (kernel: 5.18.6-arch1-1)

Hey @d4rkr00t, this is Pine from VS Code team. I work on https://github.com/Microsoft/vscode-css-languageservice and https://github.com/vuejs/vetur. Recently I got this PR: vuejs/vetur#953, so I thought I should upstream it.

I have made a lot of improvements to browsers.ts in the last few months, using data from MDN. Would be great to see these changes propagate to Stylus in a similar way: https://code.visualstudio.com/updates/v1_25#_new-css-pseudo-selectors-and-pseudo-elements-from-mdn

Here's a rough plan:

• Add css-languageservice as a dependency.
• Start to add things such as browser compatibility data, css property syntax to the completion items.

What do you think? I can work on PRs.

Color previews seem to break when using hex to define a color.

I do use SynthWave '84, however, the modification from the extension does not affect the color preview in any other language, so I have come to believe that the bug stems from the addon itself.

Hello and thank you for this great extension.

It would be great if, during symbol navigation, the final class name would be print instead of stylus specific hacks &__

That might be configurable as well!

@apply rules is an unknown property, so the highlight is not working.

To reproduce:

ul
    margin-left 0
    margin-block-start 0
    margin-block-end 0

Current behavior:

While margin-left is highlighted as known property (red), margin-block-start, margin-block-end and many other newer CSS properties are not highlighted as known properties.

Note: margin-block-start, ... are offered in VS Code intellisense properly, even with a tooltip.

Expected behavior:

margin-block-start, margin-block-end should be highlighted the same way as other known properties (i.e. red).

Environment information:

• Stylus extension version: v1.16.0
• VSCode version: 1.77
• operating system: Windows

Is it possible to add auto compile feature on settings like on Easy LESS, it automatic compile the .less file to .css. Can we also include nib. We can have something like this on the settings:

{

  "languageStylus.useSeparator": false,
  "languageStylus.useBuiltinFunctions": true,
  "languageStylus.previewColors": true,

  // Generates a .css file each time you save a .styl file.
  // e.g. styles.styl --> styles.css
  "languageStylus.autoCompile": true,
  "languageStylus.autoCoompress": true,
  // Include nib for mixins, utilities, components, and
  // gradient image generation
  "languageStylus.includeNib": true

}

To reproduce:

div.content
    p
        margin 0.5em 0em
    ul, ol
        margin 0
    p + ul, p + ol
        margin-top -0.5em

Current behavior:
p, and ul, ol are properly highlighted as selectors, while p + ul, p + ol is not highlighted.

Expected behavior:

p + ul, p + ol should be highlighted as a selector, too.

Environment information:

• Stylus extension version: v1.16.0
• VSCode version: 1.77
• operating system: Windows

Love stylus and this extension.
Also just switched to VSCodium to limit a bit the potential analysis of my behaviour^^

Unfortunatley I could not find this extension on https://open-vsx.org/ which would be super awesome 😎

For now I use it without this extension - until the pain grows too severe that I would manually download, build and install it.

Thank you and best Regards!

Nested tags (built-ins) with pseudo classes do not get formatted correctly. Note however that classes and non-nested tags do get formatted correctly.

.child
.child:hover
.child.toggle
label
label:hover
label.toggle

.parent
  .child
  .child:hover
  .child.toggle
  label
  label:hover     /* broken */
  label.toggle

Do you have any objections about adding support to autoclosing quotes?

When this extension is enabled and after I open a Stylus file, the editor.colorDecorators custom setting is definitively suppressed, even for pure CSS files.

The setting :

language-stylus disabled or until I open a Stylus file for the first time:

language-stylus enabled and after a Stylus file has been opened for the first time:

At a glance, maybe the updateDecorators function should check for the user settings.

I don't personally use the built-in vs code color previews, but when they are enabled they act funny in multi-line hash with new lines.

See screenshot below for bug.

Or option to disable it