Add support for CSS definitions from JavaScript files in the zeit/styled-jsx format

[pungggi]

Hi for people using css in js solutions would be great to have this too..

It should be possible extracting the css from literals?

Similar to #69
But should be easier to accomplish.

[zignd]

It is possible to extract, but it's tricky to differentiate a JavaScript object literal used for a specific purpose in the application of an object literal containing CSS definitions. But I'm open to ideas on how to interpret the code in this use case.

[pungggi]

Yes thats true but most of the time it is just about find startTag endTag of a specfic function.. Example startTag: cssʼ endTag: ʼ If these were configurable, it would be flexible enough.. See for example https://github.com/zeit/styled-jsx/blob/master/readme.md#keeping-css-in-separate-files

[zignd]

Are we talking about the same thing? At first, I thought you were suggesting a parsing engine for JS, one that would traverse the JavaScript files in a workspace looking for CSS class definitions inside object literals. But now it seems that you're talking about auto completion inside JavaScript files.

[pungggi]

I really mean traverse js and or jsx to find css classes..

[pungggi]

Shouldn t autocomplete already work with react?

[pungggi]

I tried hacking a little bit with this extension, and what I see right now is that, when including javascript files the caching process takes some time. (especially when using npm..)
It should be possible to include or exclude certain pathes to search for. (maybe with regex?)

Basically what already stated here: #91

[zignd]

I really mean traverse js and or jsx to find css classes..
See for example https://github.com/zeit/styled-jsx/blob/master/readme.md#keeping-css-in-separate-files

Oh, so you're suggesting support for CSS definitions in the format defined by the styled-jsx project you recently linked up there? Their format is possible to parse and there will be no conflicts with object literals.

Shouldn t autocomplete already work with react?

It already works, but you shows you auto completions only, it doesn't parse React code looking for CSS definitions.

[pungggi]

yes this would be a good step..

[pungggi]

@zignd Can I suggest a PR for this?

[zignd]

Sure, I'd gladly review. Are you planning to work on those two formats?

<style jsx>{`
      p {
        color: red;
      }
    `}</style>

export default css`div { color: green; }`

[pungggi]

Yes both.