Add support for literally every modern CSS feature #99

Alhadis · 2016-10-22T19:14:04Z

There're too many things happening with this PR, so I won't bother summarising. The commit log holds the full details.

Most notable improvements:

Support for every current CSS property/keyword
Support for @keyframes
Support for @supports
Case-insensitive matching of all CSS tokens
~~Uninvasive support for the proposed nesting syntax~~ Removed upon @50Wliu's request

Fixes: #24, #42
Supersedes: #50, #65

It's extremely unlikely this is only intended to match one space only.

CSS doesn't use dollar signs to introduce variables, and it never did.

@charset

* Now matched only at the start of a document * Unquoted strings are marked invalid * Scope-name choices improved * Word boundaries fixed to avoid matching @charset"UTF-8"; See: https://developer.mozilla.org/en-US/docs/Web/CSS/@charset

@charset

Note that @charset statements don't allow injected comments.

@charset

These rules have a very rigid syntax; the spec mandates that exactly one space be used to separate the rule from the quoted character set. Things like case-insensitivity, comments and extraneous whitespace invalidate a @charset. Note that while the spec states that double-quotes be used to enclose an encoding type, agents permit single-quotes for certain identifiers. This behaviour isn't consistent between browsers: @charset 'iso-8859-15'; # Valid in Firefox and Chrome @charset 'US-ASCII'; # Invalid in Chrome; okay in Firefox References: * https://www.w3.org/TR/CSS22/syndata.html#x57 * https://developer.mozilla.org/en-US/docs/Web/CSS/@charset

The CSS 2.2 spec states that an underscore may also introduce a vendored extension, though this is rare in practice. Several historical extensions have also been added, as documented in the spec - https://www.w3.org/TR/CSS22/syndata.html#vendor-keyword-history

Support for the following missing keywords has also been added: * currentColor * rebeccapurple * transparent

Introduced in CSS Colour Module Level 4. References: * http://mdn.io/color_value#rgba() * https://drafts.csswg.org/css-color/#hex-notation

Functional values are composed of the function's name affixed to an open bracket. Whitespace is permitted in the arguments list, but not before: rgb(0,0,0); # Valid rgb (0,0,0); # Invalid References: * https://drafts.csswg.org/css-values-3/#functional-notations * https://www.w3.org/TR/css-syntax-3/#function-token-diagram

References: * https://developer.mozilla.org/docs/Web/CSS/@font-face/unicode-range * https://drafts.csswg.org/css-fonts-3/#descdef-unicode-range

References: * http://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values * https://drafts.csswg.org/css-fonts-3/#font-feature-values

Alhadis · 2017-01-08T07:48:09Z

BTW, I didn't notice the missing question mark, and thought you were referring to the removal of ;|(?=[@{]). So in other words, the middle part was actually doing nothing all along and should have been dropped ages ago.

winstliu · 2017-01-08T17:19:03Z

Glad we're on the same page, finally. The missing question mark was what I was referring to the whole time; probably could have made that a bit clearer.

I'll give a few more days for esdoppio and in case anyone else wants to review. I already said that I'm done, so anything else I spot will come in the form of post-merge revisions.

winstliu

🎉

hediyi · 2017-01-09T03:18:42Z

grammars/css.cson

+                  (?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter
+                  (?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier
+                    |\\\\(?:[0-9a-fA-F]{1,6}|.)
+                  )*


Could you show me which "pattern for matching numbers is tested first?" And since you have decided to support escape sequences, care to also cover situations like "foo\ae bar"?

hediyi · 2017-01-09T03:23:11Z

grammars/css.cson

+                'match': '''(?xi)
+                  (?<![\\w-]) (from|to) (?![\\w-])         # Keywords for 0% | 100%
+                  |
+                  ([-+]?(?:\\d+(?:\\.\\d+)?|\\.\\d+)%)     # Percentile value


Care to make this stricter to match only percentages from 0% to 100%, or tokenize percentages smaller or higher as invalid? Up to you.

hediyi · 2017-01-09T03:25:42Z

grammars/css.cson

+                'name': 'keyword.control.at-rule.document.css'
+              '1':
+                'name': 'punctuation.definition.keyword.css'
+            'end': '(?=\\s*{)'


Missing a ;?

Fixed in 3f7fb1e and 807168b, respectively.

hediyi · 2017-01-09T09:00:31Z

grammars/css.cson

+      }
+      # Shapes
+      {
+        'begin': '(?i)(?<![\\w-])(circle|ellipse|inset|polygon|rect)(\\()'


rect() is not a Shapes function, and it is used along with the deprecated feature clip. And there would probably be named a rectangle() rather than rect() in the future. Consider removing it.

No. I'm well-aware that rect() is non-standard, but it (along with clip) is still used in a lot of boilerplate code in the wild. Hence the reason for its inclusion.

hediyi · 2017-01-09T14:15:14Z

grammars/css.cson

+        'patterns': [
+          {
+            'name': 'variable.argument.css'
+            'match': '--[\\w-]+'


How about making it "any valid identifier that starts with two dashes?"

Done in 687567b.

hediyi · 2017-01-09T15:41:55Z

grammars/css.cson

+                'match': '(?<=["\\s])[a-zA-Z*]+(-[a-zA-Z0-9*]*+)*+(?=["\\s])'
+                'name': 'support.constant.language-range.css'
+              }
+            ]


This doesn't tokenize quoted language code containing escapes as intended.

I believe you were the one who added this. I left it alone because I wasn't sure what it was you were trying to do, and the possessive capturing suggested it needed to be very specific. Can you explain exactly what it was your code was trying to do?

Don't know what I was thinking lol, it should be fine to just replace those possessive quantifiers. Fwiw, I think we should just leave out the escapes part here (who would really use that in language range? -> code not needed). Also, if you decide to support escapes, you'll also need to take care of the trailing whitespace. It's just not worth it. Let's waste our energy on something more important.

Now you're speakin' my language! :D And yeah, you're right: every language-code is just pure ASCII, I can't imagine anybody in their right mind would be using escape-codes for es-CO or whatever.

(I'll get to this in a moment, I'm in the middle of attempting a "delicate" fix for Nuclide and File-Icons v2. And by "delicate", I mean this.

Lol. No problem.

Ugh, finally. Sorry that took so long, let me tend to this...

See: #99 (comment)

hediyi · 2017-01-10T09:26:48Z

grammars/css.cson

+            'name': 'keyword.other.unit.percentage.css'
+          '2':
+            'name': 'keyword.other.unit.${2:/downcase}.css'
+        'match': '''(?xi) (?<!\\w|-)


Let's keep it consistent: (?<![\\w-]).

hediyi · 2017-01-10T09:41:14Z

grammars/css.cson

+
+          (?:                                 # Scientific notation
+            (?<=[0-9])                        # Exponent must follow a digit
+            [Ee]                              # Exponent indicator


Since we're in case-insensitive mode, make it just e if not too much trouble.

... how the f-

No idea how I let that one slip past...

hediyi · 2017-01-10T10:04:00Z

grammars/css.cson

+      '2':
+        'name': 'invalid.illegal.colon.css'
+    'match': '''(?xi)
+      (:)(:*)


:* is for?

To extend angry red highlighting across every repeated colon. Unless for some reason only the second colon of a::::::::first-child should be marked as invalid...

hediyi · 2017-01-10T10:14:26Z

grammars/css.cson

+        'include': '#font-features'
+      }
+      {
+        # Custom properties
        'match': '--[\\w-]+'


Forgot to update this?

hediyi · 2017-01-10T12:11:22Z

grammars/css.cson

-          | first|left|right                                        # @page
-          | host                                                    # shadow DOM
-          )(?![\\w-])
+            -?+                             # possessive to avoid matching '-' followed by [0-9]


Is this possessive quantifier still necessary?

Nope. Killing it.

hediyi · 2017-01-10T12:24:58Z

grammars/css.cson

-          )(?![\\w-])
+            -?+                             # possessive to avoid matching '-' followed by [0-9]
+            (?![0-9])
+            (?:[-a-zA-Z_0-9]|[^\\x00-\\x7F]|\\\\(?:[0-9a-fA-F]{1,6}|.))+


Again, if we are to support escapes, we should also take care of the whitespace separating the seqences and normal characters—this is not good enough. Still, we can't expect to make things perfect in one PR. Up to you if you wanna take it into subsequent PRs.

To be honest, I think this is something that can be left for a follow-up PR, should it ever be needed. I'm itching to see this thing merged so I can get it used across GitHub.

Alhadis · 2017-01-10T17:47:19Z

@50Wliu Sorry to take our progress backwards, but I'll need you to review b6081eb and tell me if there's anything that needs improvement.

Rather than use possessive capturing to avoid matching invalid patterns, I decided to flag them as errors instead. Not only does this simplify implementation, but it's also more informative for users.

winstliu · 2017-01-10T18:11:16Z

grammars/css.cson

@@ -1080,7 +1080,7 @@
                'include': '#escapes'
              }
              {
-                'match': "(?<=['\\s])[a-zA-Z*]+(-[a-zA-Z0-9*]*+)*+(?=['\\s])"
+                'match': "(?<=['\\s])[a-zA-Z*]+(-[a-zA-Z0-9*]*+)*(?=['\\s])"


It looks like you missed the inner possessive match with this one compared to L1063.

winstliu · 2017-01-10T18:17:08Z

I like it. Only one comment.

Alhadis · 2017-01-10T18:21:05Z

Ah, good catch. Fixed!

winstliu · 2017-01-11T03:40:03Z

Wheeeeeee
Only took 250 comments and 3 1/2 months. Thanks for sticking with this.

Alhadis · 2017-01-11T03:41:30Z

This is the happiest day of my life.

Will hook this into the Less and Sass grammars later-ish. Will probably only limit those PRs to keyword-embedding only, because I'm really not that confident in my knowledge of precompilers (certainly not compared with CSS).

pchaigno · 2017-01-11T06:09:08Z

Wow! Congrats @Alhadis! 🎉

Alhadis · 2017-01-11T06:10:20Z

Merci!

(Haven't even started on the Shell and Make grammars yet... hahhaha)

Alhadis added 30 commits October 18, 2016 02:44

Replace "comment properties" with real comments

caf195d

Allow variable-length whitespace in namespaces

48fc207

It's extremely unlikely this is only intended to match one space only.

Expand extended regular expressions

fad8906

Delete redundant syntax

2bcc653

Delete incorrect variable-matching pattern

67fdc41

CSS doesn't use dollar signs to introduce variables, and it never did.

Improve matching accuracy of @charset rules

37d0ee4

* Now matched only at the start of a document * Unquoted strings are marked invalid * Scope-name choices improved * Word boundaries fixed to avoid matching @charset"UTF-8"; See: https://developer.mozilla.org/en-US/docs/Web/CSS/@charset

Fix boundary-matching of @import statements

6963661

Fix boundary-matching of @media and @page rules

5e4c43b

Improve support for injected comments in at-rules

6f254ab

Note that @charset statements don't allow injected comments.

Improve accuracy and coverage of media queries

c288cd4

Permit injected comments before feature names

731801a

Extend specs for @import statements

071a154

Merge @namespace rules and add specs

9bcb5c8

Add support for namespace prefixes

96d9bf0

Fix annotation alignment

9f1b50f

Clean up colour-keyword lists

0d3f59a

Support for the following missing keywords has also been added: * currentColor * rebeccapurple * transparent

Add support for #RGBA and #RRGGBBAA notation

ed5f2d5

Introduced in CSS Colour Module Level 4. References: * http://mdn.io/color_value#rgba() * https://drafts.csswg.org/css-color/#hex-notation

Refactor patterns to match functional values

c5eadca

Clean up and extend keyword lists

5b1e5b5

Enforce case-insensitivity

24471a9

Add missing scopes to semicolons after at-rules

314f735

Fix inconsistent comma scopes

0c0c471

Fix selector boundary-matching and add new specs

9e7c240

Add support for Unicode-range values

2800173

References: * https://developer.mozilla.org/docs/Web/CSS/@font-face/unicode-range * https://drafts.csswg.org/css-fonts-3/#descdef-unicode-range

Add support for the :dir() pseudo-class

fd2a11e

Add support for @font-feature rules

527dd32

References: * http://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values * https://drafts.csswg.org/css-fonts-3/#font-feature-values

Add support for @page, @counter-style, @document and @Viewport

351dac9

winstliu approved these changes Jan 8, 2017

View reviewed changes

hediyi reviewed Jan 9, 2017

View reviewed changes

Alhadis added 3 commits January 10, 2017 12:37

Highlight escape sequences inside identifiers

3f7fb1e

Check for semicolon in @document's closing pattern

807168b

See: #99 (comment)

Extend variable-pattern to accept all identifiers

687567b

See: #99 (comment)

hediyi reviewed Jan 10, 2017

View reviewed changes

Alhadis added 2 commits January 11, 2017 04:34

Highlight invalid identifiers in ID/class selectors

b6081eb

Fix pattern missing in 687567b and clean up code

39ae662

winstliu reviewed Jan 10, 2017

View reviewed changes

Remove possessive capture in language-tag patterns

a2c17d3

hediyi approved these changes Jan 11, 2017

View reviewed changes

winstliu merged commit 2f8e02c into atom:master Jan 11, 2017

Alhadis deleted the fruit-basket branch January 11, 2017 03:41

winstliu mentioned this pull request Jan 11, 2017

Add support for custom properties #48

Closed

winstliu mentioned this pull request Jan 27, 2017

Element with attribute selector not hightlight correctly atom/language-less#70

Closed

1 task

WoodyWoodsta mentioned this pull request Jan 29, 2017

Can't autocomplete css-next vars and mixins atom/autocomplete-css#56

Open

clchen28 mentioned this pull request Apr 2, 2017

Fix #110: Recognize keyframes at-rule with vendor prefixes #111

Merged

maxbrunsfeld mentioned this pull request Apr 19, 2017

Avoid UTF8 to UTF16 character offset conversions atom/node-oniguruma#63

Closed

winstliu mentioned this pull request Jun 22, 2017

Inserting <style> tag in HTML document with long lines = Doom atom/atom#14856

Closed

nathansobo mentioned this pull request Aug 12, 2017

Eliminate catastrophic backtracking that hangs Atom #119

Merged

Add support for literally every modern CSS feature #99

Add support for literally every modern CSS feature #99

Conversation

Alhadis commented Oct 22, 2016 • edited Loading

Alhadis commented Jan 8, 2017

winstliu commented Jan 8, 2017

winstliu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hediyi Jan 9, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Alhadis Jan 10, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Alhadis Jan 10, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Alhadis commented Jan 10, 2017

Choose a reason for hiding this comment

winstliu commented Jan 10, 2017

Alhadis commented Jan 10, 2017

winstliu commented Jan 11, 2017 • edited Loading

Alhadis commented Jan 11, 2017

pchaigno commented Jan 11, 2017

Alhadis commented Jan 11, 2017

Alhadis commented Oct 22, 2016 •

edited

Loading

hediyi Jan 9, 2017 •

edited

Loading

Alhadis Jan 10, 2017 •

edited

Loading

Alhadis Jan 10, 2017 •

edited

Loading

winstliu commented Jan 11, 2017 •

edited

Loading