Highlighting stops after comma in font-family declaration

[simlrh]

This affects #30.

import styled from 'styled-components';

const Div styled.div`
  font-family: 'Times New Roman', serif;
`;

const P = styled.p`
  font-family: Arial, sans-serif;
`;

const A = styled.a`
  font-family: system-ui;
`;

In the above example, the highlighting on Div works ok although serif is not highlighted.

However on P since sans-serif is not highlighted, the hyphen breaks highlighting for the rest of the page, and A is incorrectly highlighted.

A workaround for now is to put sans-serif and system-ui in quotes.

[fleischie]

Hey @simlrh thanks for the edge case. :smile:

Just to make sure I don't misinterpret your example: There is an equal sign between Div and styled.div, right?

Also is it possible, that the described issue is only due to sans-serif breaking the highlighting? Try putting this in quotes and the rest should work normally.

I suspect that this is due to how vim handles precedences on highlighting keywords. I will try to find out, whether giving sans-serifan increased precedence will handle this edge case, but I cannot promise anything at this moment.

[simlrh]

Yes, there should be an equals sign, and there was in the code where I came across the problem.

The reason I thought it was the comma is, in font-family: sans-serif; 'sans-serif' is highlighted in orange and highlighting on the next row is correct, while in font-family: Arial, sans-serif 'sans-serif' is half white and half yellow, and highlighting on the next line is incorrect. Anything after the first comma is unhighlighted, but sans-serif and system-ui cause problems because of the hyphen.

I'm happy to put work into this and #33 as I really want styled-components highlighting at work, but both these issues affect our code and our eslint rules disallow the workarounds. It's just going to take me some time to understand javacsript.vim :)