Prepare for the future of CSS about language-css HOT 12 CLOSED

Here is a snippet that atom can't highlight correctly:

@custom-media --lg screen and (max-width: 1100px);
@custom-media --md screen and (max-width: 900px);
@custom-media --sm screen and (max-width: 500px);

.sidebar {
  lost-column: 1/3;

  @media (--lg) {
    lost-column: 2/4;
  }
  @media (--md) {
    lost-column: 5/12;
  }
  @media (--sm) {
    lost-column: 4/4;
  }
}

.sidebar-inner {
  position: relative;
    padding: 40px;

  @media (--lg) {
    padding: 35px 20px 0;
  }
  @media (--md) {
    padding: 30px 20px 0;
  }
  @media (--sm) {
    padding: 25px 20px 0;
  }
}

from language-css.

Never mind, already included support for @nest and & in #99. The proposed syntax is quite reasonable and appears well-founded.

Custom selectors, on the other hand, definitely looks too volatile to include at this point. Especially since @custom-media got pushed back to level 5 MQ (see w3c/csswg-drafts#493). So @thangngoc89, I'm afraid neither Atom or web browsers will be supporting @custom-media any time soon. ;-)

However, I have amended the custom-element pattern to not match after @ (38e1635). Which means it should theoretically be possible for a package to inject their own patterns into Atom's CSS grammar. offering a means with which to build upon the existing highlighting.

from language-css.

Custom variables have been added. Custom selectors and nesting aren't officially in the spec yet and will have to wait until they are.

from language-css.

Actually, I am going to close this issue. Nothing is actionable at this point, and it's best to have one concern per issue. Feel free to create new issues now, or after they're in the spec.

from language-css.

What exactly are you proposing? What would I, or anyone else interested in fixing this, have to do to consider this Issue closed?

from language-css.

This issue could obviously have been broken down into more, separate, issues. However, as the title suggests, “preparing for the future of CSS” could be broken down into a few key features: nesting, custom selectors and custom variables.

The implementation of said features could lead to the closing of this issue. Making the language parse them, that is.

from language-css.

Also, CSS Modules, e.x. the composes keyword.

from language-css.

composes is not in CSS specs while nesting and other stuff mentionned are.

from language-css.

I'm interested in helping out with this. Could someone point me in the right direction as to where to start / which files to look at?

from language-css.

@athyuttamre grammars/css.cson is where all the tokenizing is handled. It's all regex-based. If you need more help, feel free to contact me on Slack (https://discuss.atom.io/t/join-us-on-slack/16638?u=wliu) where my username is @wliu.

from language-css.

Thanks @50Wliu! I realized I may not find enough time for this for the next month or so, so it might be better for someone else to take this on in the meantime. Sorry about that.

from language-css.

Guys, once #99 has been reviewed and merged, I'll eagerly take care of nesting and custom selectors.

I would've added nesting support to my pull request, but it's already monolithic as-is.

from language-css.