Don't work as expected with blank class names

[dpmango]

Hey, Andrew! I really appreciate your work and SugarSS is my primary development tool now. It save tons of time and allow me to be more productive. SugarSS is the thing that makes me turn over sass to postcss as I don't see any need in; and brackets in modern web-dev in classic postcss syntax

The only thing that annoying me a lot is that blank class names, cause following it class breaks! For example, consider following example piece of code. Guess what happens with .char__mobile-header in that case? It will parse incorrectly and no styles to mobile header applies

As I do blank class names a lot during PSD to HTML (drafting the classes first from HTML and working it after) some solution to that problem would develop my confidence in SugarSS and I hope will help other developers as well

.chat
  &__header
    height: 210px
    display: flex
    flex-direction: column
    align-items: center
  &__some-class

  &__mobile-header
    height: 57px
    flex-wrap: nowrap
    justify-content: space-between

Compiled

.chat {}
.chat__header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-align-items: center;
            align-items: center;
    height: 210px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
        -ms-flex-align: center;
}
.chat__some-class

  .chat__mobile-header {
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-justify-content: space-between;
            justify-content: space-between;
    height: 57px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
}

Regards, Sergey

[ai]

Yeap, we should fix it. But I don’t know way to fix it right now.

The idea of SugarSS isto have easy way to write multiline selectors and multiline declaration values.

So, SugarSS can parse:

a
b
  color: black

into:

a b {
  color: black
}

What we could do here?

[FezVrasta]

Is it something useful? I mean, doesn't seem intuitive at all to allow the example you posted (@ai), adding it breaks this other functionality, may be worth to remove it.

[ai]

Multi-line selectors is very useful. Here is code example from my current project:

.button.is-add, .button.is-next, .button.is-post, .button.is-done,
.button.is-pay, .button.is-redo, .button.is-calendar, .button.is-play,
.button.is-unlock, .button.is-remove, .button.is-notice, .button.is-email,
.button.is-vkontakte, .button.is-facebook, .button.is-twitter,
.button.is-linkedin, .button.is-telegram, .button.is-messenger
  padding-left: 40px

[FezVrasta]

but there you have a trailing comma

[ai]

Sure, but in my opinion good API should be based on visible thing. Trailing command is not best thing to be based.

So think about it as SugarSS API — no declarations, we will join a selectors.

[FezVrasta]

What if you detect empty lines?

a
b
  color: red

a

b
  color: red

.a .b {
  color: red;
}

.a { }
.b {
  color: red;
}

[ai]

What is the reason to have empty rules? :) If it was made my mistake, just add Stylelint to show them.

[FezVrasta]

Mostly during prototyping. But some times I end up with a class that doesn't have any style assigned but that I want to keep around because the UX team in the near future will want to use.

You could also read an indentation without anything after it and interpret it as empty class.

.a
  // nothing here
.b
  color: red

[ai]

New lines algorithm looks as too complicated for me.

When I do prototyping, I just remove empty rules, because it is easy to forget them.

[FezVrasta]

I usually lay out all the classes I want to use later, so that the React component (with react-css-modules) will render properly.

.Button
  &--primary

  &--flat

And later I add the styling.

But nothing impossible to live with, it's just annoying.