Skip to content

Conversation

FabioDiMonte
Copy link

Lots of CSS syntax recognition enhancements, including:

  • grouping feature (explained in examples below)
    • eg:
      2em -> constant.numeric
      2em -> keyword.unit.relative
    • eg:
      a, .myClass, span.extra {...} -> selector
      a, .myClass, span.extra {...} -> entity.name.class
  • attribute selector
    • eg:
      input[type=button] -> selector
      input[type=button] -> entity.name.tag
      input**[type=button]** -> entity.name.attribute
      input[type=button] -> support.attribute-name
      input[type=button] -> support.text-value (or string if inside quotes)
  • media queries (full grouped syntax, including mediaquery.feature , mediaquery.expression, ...)
    • eg:
      @media not print and (max-width: 1160px) {...} -> media-query
      (at)media not print and (max-width: 1160px) {...} -> at-directive
      (at)media not print and (max-width: 1160px) {...} -> mediaquery.query
      (at)media not print and (max-width: 1160px) {...} -> mediaquery.reserved
      (at)media not print and (max-width: 1160px) {...} -> mediaquery.type
      (at)media not print and (max-width: 1160px) {...} -> mediaquery.expression
      (at)media not print and (max-width: 1160px) {...} -> mediaquery.feture
      (at)media not print and (max-width: 1160px) {...} -> constant.numeric
      (at)media not print and (max-width: 1160px) {...} -> keyword.unit.absolute
  • css methods (like rgb(), url(), linear-gradient() )
    • eg:
      background-image: url(/path/to/image.jpg); -> css-property
      background-image: url(/path/to/image.jpg); -> css-method
      background-image: url(/path/to/image.jpg); -> method-name
      background-image: url**(/path/to/image.jpg); -> method-params
      background-image: url(
      /path/to/image.jpg**); -> constant.path (or string if inside quotes)
  • exceptions (ie: !important)
  • IE hacks recognition

.. and much more!

@FabioDiMonte
Copy link
Author

FabioDiMonte commented Apr 22, 2016

some screenshots made using the code in this PR (including the changed CSS theme "solarized dark")

most of the css syntax now recognizable with rainbow

schermata 2016-04-22 alle 15 21 50

attribute selectors, pseudo elements and pseudo classes, media queries, css-methods...

schermata 2016-04-22 alle 15 22 21

IE hacks

schermata 2016-04-22 alle 15 26 00

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant