matthojo/language-stylus

Adds syntax highlighting and snippets to Stylus files in Atom.

Stylus language support in Atom (with extra snippets)

Adds syntax highlighting and snippets to Stylus files in Atom.

Originally converted from the Stylus TextMate bundle and Stylus Plus bundle.

Massive hat-tip to https://github.com/billymoon/Stylus for a lot of the regex values.

Contributions are greatly appreciated. Please fork this repository and open a pull request to add snippets, make grammar tweaks, etc.

language-stylus's Issues

Incorrect indentation when creating a new line after class name

The title is not the best, but a code example should help:

Expected behavior

.class-name
    color #fa8072

Actual behavior

.class-name
color #fa8072

This issue is not about copy/pasting but simply when the user is typing line 1 in the example (.class-name) and presses enter for a new line, I personally would expect it to tab automatically. This is not the case however.

The .class-name is just an example. I believe this same behavior occurs with #id-name etc.

Edit: I apologize if this is unrelated to this package as I did read this package is to add syntax highlighting but just wanted to make this known and also see if anyone has experienced this.

Package.loadSettings is deprecated.

Store package settings files in the settings/ directory instead of scoped-properties/

Package.loadSettings (/Applications/Atom.app/Contents/Resources/app/src/package.js:565:9)
<unknown> (/Applications/Atom.app/Contents/Resources/app/src/package.js:187:43)

Autocomplete hangs Atom

c' // them press Tab

Is it ok?

Default mixin/function arguments value raise exception

The following snippet (and as far as I've tested every function/mixin with default argument value):

colored_btn(bg, txt, bevel=2px)
  border_color = darken(bg, 15%)

Trigger the following exceptions:

Popping rule because it loops at column 26 of line 'colored_btn(bg, txt, bevel=2px)' 
[Rule] 
 /Applications/Atom.app/Contents/Resources/app/node_modules/first-mate/lib/grammar.js:117
Uncaught TypeError: Cannot call method 'getNextTokens' of undefined 
 /Applications/Atom.app/Contents/Resources/app/node_modules/first-mate/lib/grammar.js:96

Syntax highlight issue

Hi :) I'm here to report a weird color on this line, looks like a function bur it isn't

Colons and semicolons

Stylus has support for using colons and semicolons as well as omitting them. I guess it comes down to personal preference which of the syntaxes you prefer. I for one like to keep my colons and semicolons :)

I regenerated the language map, using colons and semicolons, in my fork at https://github.com/hmps/language-stylus. I tried to find a way to give the user an option which syntax to use, but without success.

Do you know if there is anyway to create such an option?
If so, are you interested in adding that option to the package?

CSS keywords not highlighted

Is this intended? I tried the other package that goes by language-stylus, that package do syntax highlighting for the keywords margin, width etc.

Syntax theme: One Dark (UI: One Dark)

error on attribute selector

trying to type input[type="text"] selector stops editor

Enhanced to completion for variables

As now . I will get the completion for variables only when the variables and stylus code all in the same file . I am not sure if it supports to completion for when the variables via @import or import by webpack stylus-loader . But I cannot do it in my project.

I suggest that we can make a configuration in vscode setting.json to specify the variables file path to obtain the compeletion function when the variables file outside the current file.

Thank you

Property names no longer detected.

Hi there! I just noticed that as of the release a few days back, property names are no longer detected by this syntax. Stylus like this...

@import '~normalize.styl'

html
  height 100%
  position relative

body
  height 100%
  position relative

#app
  height 100%
  position relative

...gets highlighted like this:

You can see in the Web Inspector that the property names aren't wrapped in support.type.property-name classes, as they were previously.

Thanks for all your work on this package, and let me know if I can provide any more debugging info!

Various bugs after 2.0.0

Since the today's update, I'm seeing various bugs in both syntax highlighting and identation. Here's what I mean:

Let me know if I can help you with any other example. I'm on OS X 10.11.3 / Atom 1.4.3

Indenting increases on carriage return after declaring rem units

Example:

.className
  height 15rem
    <-- cursor position after hitting return

2.1.0 Oddities

@matthojo It looks like you broke the autocomplete 👎

This is because property value areas are not marked with meta.property-value.css.

Secondly .. it looks like we lost highlighting of property names. The name portion is no longer marked with support.type.property-name.css.

It looks like you started marking , with an over-arching meta.selector.css scope. This is good. However we now need to mark tag names in the selector with entity.name.tag.css (otherwise tags and commas are the same color, this is a step closer to how language-css looks so its good).

I'm thinking that to do proper autocomplete plus property name highlighting we have to do a property pattern that encloses the whole line and includes a property value pattern only if the name plus a :\s+ or \s+ is matched. I don't mind working on that but it won't be till later tonight.

bug for stylus variable

Stylus variable looks terrible
screens: http://i.imgur.com/cOva8I4.png

indentation gets screwed up on cut/paste

I'm not sure if this is actually a problem with this package, but it doesn't happen when I disable Stylus, so I think this is a good place to start looking...

When I cut a block that has indentation, and then paste that block back into atom, the indentation is screwed up:

yes, I realize how awful that code is... I didn't write that, it's from offerpop.com.

I can paste the code into other editors just fine, and code copied from other editors behaves the same way when pasted into atom. So the issue happens when the code is pasted, not when it is copied.

This only happens when pasting into a stylus file. If I paste code into any other type of file it behaves normally. And I'm running atom version 0.150.0 on Ubuntu.

publish stylus to npm

Could you please publish language-stylus to npm? we're using highlights for package READMEs now, and have patched the library so that grammars can be installed from npm modules:

atom/highlights#14

We'd love to pull this grammar in, since we use stylus at npm! thank in advance.

Using this package freezes atom upon opening a stylus file

Linux; Ubuntu 14.04; Atom 0.124.0

If I open a stylus file with this package installed, Atom will totally freeze for about 20s. It will freeze again if I try to do anything within Atom. It renders the editor totally inoperable.

Rename atom package to language-stylus (and ask for an unpublish of the existing package)

This seems like the package to use going forward.

Autocompletion adds semicolon

When I use Stylus I want it as skinny as possible, so I omit the semicolons. However when I use the autocompletion it adds a semicolon at the end. Would it be possible having a setting in the package to choose whether to insert the semicolon or not?

Syntax highlighting gets screwed up in some cases

Some charatcters cause syntax highlighting to go sideways, like $ in variables.

Add option to change multi-line and single-line comment use by default

I know how this two type of comments works
http://stylus-lang.com/docs/comments.html
and I need to use only single-line (not output) comments in all of my projects.
It would be great if it will be an option in plugin settings which type of comments use by default.
Thanks!

Small issue with variable syntax highlighting

I'm not real familiar with editing grammar files, so I'm not sure where to try fixing this. Any time I use a dollar sign $ at the beginning of, or a hyphen - anywhere in a variable it stops coloring that variable name correctly. Both of these are documented as being valid at the end of the first section here: http://learnboost.github.io/stylus/docs/variables.html.

For example the following variable would not be colored like other variables:

$font-size = 14px
body
  font: $font-size sans-serif

Is this something that would be an easy grammar fix?

Auto Indent on Paste indents incorrectly

It seems to paste as a sibling element instead of a property: https://www.youtube.com/watch?v=UI1zptE7tL0

Allow option to disable colon delimeter

Hello!

Now, after autocompletion between the property and the value appears colon.
Does it possible to make a custom option to disable it?

tab not wroks.

If the module is active, the tab is not working.
If not enabled, tab works

@extends not highlighted like @extend even though it's an alias

Hey, title is rather self-explanatory. I'd just rather use @extends (sounds more natural to me) so you should highlight both.

Syntax is incorrectly colored

I've attached screenshots below:

Option to disable snippets

This plugin used for support Stylus language, snippets are additional part - bonus functionality.
It should be possible to disable set of snippets, to have possibility use emmet or own stuff...

CSS Grid Properties

The CSS Grid Layout Module is in Candidate Recommendation for a while now. But language-stylus still show as unknow properties. Here's the list of the new properties to be added to the recognized ones:

column-gap
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-start
grid-row
grid-row-end
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
row-gap

Colour picker does not show

Versions

• language-stylus: 1.9.1
• vs code: 1.21.0-insider

On MacOS

The color-picker does not show up.

Syntax highlighting on "Parent Reference"

Hello!

I just switched from Sublime Text 3 to Atom and this syntax highlight is driving me crazy, let me show you:

Sublime Text 3:

Atom:

If you see, the text after the "&" is green in sublime, but white in Atom, Is there any way to fix it?

Thank you!

Better support for autocomplete

In order to support all the good work that's going on over at https://github.com/atom/autocomplete-css we need to properly tag scopes

SASS

Stylus (this package)

Support `perspective` and `perspective-origin` CSS property

Duplicate properties

Any way to show/detect duplicate properties?

I expect 'mb10' turn into 'margin-bottom 10', but nothing happends

syntax highlighting is broken when using string in transform functions

Consider this snippet:

transform translate3d("calc(%s - 100%)" % spaceRemaining, 0, 0)

The syntax highlighting is broken:

It does work with custom functions, though:

Inconsistent syntax colouring for certain HTML tag elements

Howdy there.

Thought I'd report another minor niggle related syntax colouring.

I put language-stylus side by side with language-css to illustrate a colouring inconsistency.

For certain HTML tags, language-stylus assigns the immediate term with the classes: support constant property-value stylus. Contrast this to language-css where it assigns the classes: entity name tag css instead.

Not a deal breaker, but would be nice to see it rectified. ✌️

Empty autocomplete

No more autocomplete in the latest version

Package Published Twice in Atom

if you go into the Packages section in Atom and search for stylus, this package comes up twice, once as 'Stylus' and once as 'Stylus language supp…".

They link to these package pages:
https://atom.io/packages/Stylus
https://atom.io/packages/Stylus%20language%20support%20in%20Atom
which both point to this repo.
The first one points at the 0.2.1 release and the 2nd the 0.2.0 release.

To avoid confusion you should remove the 2nd one, unless I'm missing something and there's a reason to keep the 0.2.0 release up.

Wrong Ident guide without trailing semicolon

repeated prefixes

Hi! first of all, sorry for my english.

When 2 prefix are the same, only the last "survives".

for example:

':first':
    'prefix': ':f'
    'body': ':first$0'
':focus':
    'prefix': ':f'
    'body': ':focus$0'

only the latter can be used.

I think the best in this case is use other prefixes and repeat the "most used" and repeat the "most used"

':focus':
    'prefix': ':f'
    'body': ':focus$0'
':first':
    'prefix': ':fi'
    'body': ':first$0'
':focus':
    'prefix': ':fo'
    'body': ':focus$0'

What do you think?