Flow JavaScript – CSS grammar not injected for custom styled-components

[edahlseng]

Prerequisites

• Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem in Safe Mode: http://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
  • Followed all applicable steps in the debugging guide: http://flight-manual.atom.io/hacking-atom/sections/debugging/
  • Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq
  • Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom
  • Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages

Description

Note: This issues applies only to the Flow JavaScript source type. As far as I can tell that's provided by this package, but if not then I can redirect this issue elsewhere.

The CSS grammar is not properly injected for styled-components using custom components. This appears to be a regression from the tree-sitter update.

Steps to Reproduce

The following correctly syntax highlights:

const TestComponent = styled.div`
	h1 {
		color: green;
	}
`;

The following does not correctly syntax highlight:

const TestComponent = styled(UnstyledComponent)`
	h1 {
		color: green;
	}
`;

Versions

$ atom --version
Atom    : 1.37.0
Electron: 2.0.18
Chrome  : 61.0.3163.100
Node    : 8.9.3

$ apm --version
apm  2.1.7
npm  6.2.0
node 8.9.3 x64
atom 1.37.0
python 2.7.16
git 2.21.0

Additional Information

This issue is closely related to #634, which reproduced the same error in the context of a vanilla JavaScript file. (That issue was resolved with PR #639.)

[rsese]

Thanks for the report! Reproduced with 1.37.0 on macOS 10.12.6 - I'm not familiar with Flow but from my poking around and testing, seems like you need the // @flow to reproduce?

[edahlseng]

Ahh, yes @rsese! // @flow is needed at the top in order for the file to receive the correct source type. I've also noticed that after adding // @flow, the file needs to be closed and then re-opened in order for the Flow-specific syntax highlighting to take effect.