styled-component filetype overrides javascript.jsx

[sylvainbannier]

Thanks for this plugin. Had to disable it though because of this issue : when I edit a file with styled-components imports, the javascript.jsx filetype is replaced with styled-component, thus causing various issues (code completion, snippets based on filetype...) Is there a way to avoid that ? (installed with vim-plug)

[fleischie]

Yes, this bugged me from the beginning as well.

I think I may be technically able to extend javascript.jsx as a file type for styled components, I just have not figured out, yet, how. But I will in time.

Thanks for the honesty, I'll let you know, when this changes. ☺

[fleischie]

@sylvainbannier How are the code completion and snippets bound in to the javascript.jsx filetype?

If these are additional vim plugins, I may be able to copy their workflow in some way or another? I unfortunately was not able to find a way to simply extend an external filetype, I appreciate any tips and help. :smiley:

[houshuang]

Same problem, this disabled syntastic checking with eslint, flow etc.

[fleischie]

Hmm, can someone provide an example I could try out?

I usually don't have much functionality in my styled components but only the basic presentational components definition:

import styled from 'styled-components';

const Button = styled.button`
  <CSS definitions of button>
`;

export default Button;

But I can imagine use-cases. So if you got one, gimmegimmegimme and I'll see what I can do. :bowing_man:

[houshuang]

No, it seems like it changes the file type for the entire file, so syntastic checking is turned off for the entire file, not just the styled component.

[fleischie]

@houshuang The filetype is determined from a import * from 'styled-components'; and thus the javascript/typescript file, that defines a styled component has neither linting, flow, etc. yet.

I now need a non-trivial presentational component, that has a necessity for flow and lint expressions, so I can test this more thorougly. I usually don't mix presentational and more functional components, mine are usually just one styled component per file, thus the filetype determination algorithm is sufficient. If you can provide a more complex example I would be glad to take a look at linting and flowing.

P.S.: What linting do you use? eslint, jslint, standard (is this even a linter), anything else?

[houshuang]

Thanks for getting back to me. Here's the example that triggered this. Note that I'm not necessarily proud of this code, and it was also part of me trying out styled-component. I'm actually refactoring this right now, however it will still have the presentational components and a component that has a data connection and thus I would like type-checked etc.

https://github.com/chili-epfl/FROG/blob/develop/frog/imports/ui/svg/index.js

(And I am using syntastic with flow and eslint. Flow is the most important to me.)

[fleischie]

@houshuang Thanks. I'll check it out. :+1:

[fleischie]

@houshuang @sylvainbannier Please checkout the latest master commit. I think I might actually have found a suitable solution for this specific issue.

Feedback is appreciated, if anything breaks, please feel free to open a new issue. :smiley: