Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css language enhancements #191

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

css language enhancements #191

wants to merge 13 commits into from

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