Standardize syntax

[corysimmons]

https://github.com/stylus/stylus/wiki/1.0.0#what-to-change-in-syntax proproses some great changes to the syntax:

• $ preluding every variable
• : separating property: value's in declarations
• etc.

This has been in the proposal since Dec. 30th 2013.

Can we please just make this the standard already so every Stylus project in the world isn't using a different syntax flavor and people like the maintainer of Emmet don't keep forcing colonless syntax down everyone's throat because they personally like colonless syntax.

Using Stylus on CodePen is really annoying because I can't configure Emmet to not be stupid.

2013..

[mehcode]

Additionally can we decide on braces/semicolons vs indent/no-semicolons for the strict syntax? It doesn't even have to be a released version. If the three of you agree on X it would drive a dozen projects to stop supporting one of the versions and with that a dozen dozen users.

Of course since I'm here I'll throw my 🎩 in the ring to braces/semicolons as it would mean stylus is an extension of CSS vs. a replacement. Also I just finished adding autocomplete to the atom package for stylus and I found out it doesn't work in its braceless mode.

//cc @kizu / @Panya

[corysimmons]

Braceless as Stylus should be an extension of a good language. :)

[mehcode]

I'd be fine with whatever going forward. As long as the maintainers can agree on it and document it somewhere official.

One more reasoning for braces. The web development community is in the process of moving from coffee script to babel because of it being future javascript. The community at large that uses CSS is more likely to adopt a preprocessor that strictly extends the syntax rather than adjusting it.

I'd be estatic if we can enforce colons at the compiler level. It'd make so many things (like autocomplete) not need to be as hacked to pieces.

[corysimmons]

JS community isn't moving towards braces. It's moving towards ES6 and StandardJS which removes as many unnecessary characters as possible (e.g. you don't need to wrap arrow functions that return one liners, removing semicolons, etc.). Extra characters suck and make it hard to read vs sweet, sweet, indentation.

There's a reason Python is pretty much universally thought of as a beautiful/simple language, and it's also the same reason I hate using SCSS/LESS.

[mehcode]

I didn't say braces. I meant standard/future-standard JS. An interesting note here is that a couple ES7 proposals (class properties) actually require semicolons in the grammar (explicitly disallowing ASI in some places). So JS is moving towards semicolons at any rate.

I don't care about whether it looks nice or not. I use and like python as well.

[corysimmons]

An interesting note here is that a couple ES7 proposals (class properties) actually require semicolons in the grammar (explicitly disallowing ASI in some places). So JS is moving towards semicolons at any rate.

Ah really? Crap.

[mehcode]

tc39/proposal-class-public-fields#26

[corysimmons]

lol, that's what I get for being a hipster. Time to move to semistandard I suppose. Thanks for the heads up!

[flying-sheep]

@corysimmons @mehcode read to the end. it’s a bug, the semicolon isn’t really required, and babel will stop requiring it soon

[corysimmons]

But it's soooo much to read. I got halfway through before it seemed like they already picked what they were doing (contrary to your good ideas).

I just don't want to write a bunch of JS that isn't future proof. :(

[flying-sheep]

uh, just read the summary here then.

[corysimmons]

@flying-sheep okay so standardjs is cool to use then? (sorry i don't know what any of that class stuff means)

[flying-sheep]

sure.

[eddiemonge]

: separating property: value's in declarations

Please don't do this. To me, this is what really separates Stylus from Sass. It makes writing code so much easier since I don't have to worry about punctuation. I know that it probably does make the code harder to maintain but the point of tools like this are to make it easier for the end user.

the maintainer of Emmet don't keep forcing colonless syntax down everyone's throat because they personally like colonless syntax

Its not just their opinion but seems to be pretty popular despite what that one stylus syntax guide says.

[darsain]

: separating property: value's in declarations

Please don't do this.

Apart of other issues, no colons means you can't use hashes, as this will be recognized as a selector:

hash = {
  value: 100%
}
.foo
  width hash.value // selector with no props below, lets throw an error

And code looks horrible if you use colons only when you need it, so colons were always in my coding style guide for stylus.

I agree with everything on that list, and my vote would be for indentation significant no-braces python-like syntax. Main selling point for stylus was always its simplicity and nice syntax, so keep it as close to it as possible. Will definitely hate the $, but understand the need for it 😐.

[eddiemonge]

Why couldn't you use a virtual hash?

hash.value = 100%

.foo
  width hash.value // selector with no props below, lets throw an error

I'm not sure what part of your example breaks since I've never used a hash in my stylus like that before. Is it the parsing of the hash (which should be doable since it has the equal and brackets so regexing it shouldn't be too bad [I don't know what the regex looks like so thats a purely speculative guess])?

[Panya]

The problem with the hash example is not about defining the hash, but about using the hash's value:

.foo
  width hash.value // this is ambiguous with a nested selector and parser will look for a related block with declarations if : is omitted.

[janwirth]

@eddiemonge I could not agree more. I wrote a small paper comparing SASS/LESS/Stylus and Stylus had by far the most terse syntax, powerful features in general as well as transparency. If I got a kick from shitting $$$ all over my codebase I would write PHP. Supporting both indent and braces syntax severely shallows the learning curve as you are using a CSS superset with the possibility to outgrow the last millenium.

I do not understand the need for all the sigils. In fact, I think it may actually screw up many existing stylus projects.
We could solve the hash-semicolons problem through prefixing hashes with a sigil to distinguish them from primitives and selectors.

If the stylus syntax is being castrated I will fork it and call it io.styl or something 🎌 as the syntax is what makes stylus so great.

[spiralx]

Surely given the proposal for enforcing the $ prefix for variables, it would be:

$hash = {
  value: 100%
}
.foo
  width $hash.value // selector with no props below, lets throw an error

My personal view is that

• the $ prefix for variables is something I do anyway now and you get used to it quickly

• enforcing : between property names and values seems unnecessary with var-prefixes:

  $color = #444
  $hash = {
    margin: 1em,
    width: 40vw
  }
  
  div
    {$hash}
    color $color
  
    h3
      color $color
      margin 0 0 $hash.margin

  and it should cope better with current selector vs. variable ambiguity.

• brace-less and indented layout is by far the biggest reason for me to use Stylus - without it I might as well use SASS and take advantage of its larger development community and usage.

[flying-sheep]

yes. if var-sigils are coming, enforcing : is superfluous