Auto complete for Atom? about styled-components

[gandm]

@whmountains @mxstbr @kachkaev Can you try language-babel 2.52.0 with auto-complete support. Let me know if you have any comments or issues with it.

[gandm]

language-babel 2.45.0 now has it's own css grammar styled CSS that supports both styled CSS out of the box, and normal CSS files, provided the grammar selected is styled CSS. I think I've added all CSS features, @rules etc that appeared missing from language-css. It now supports autocomplete.

[gandm]

@whmountains Sorry, just saw your comment. I've just taken a copy of autocomplete-css and begun modifying it. It seems to be working ok but needs a bit more tweaking. I'll probably incorporate it into language-babel rather than have yet another package. Got to do something else first but hopefully I'll roll it out soon.

[gandm]

Fyi. The latest release now positions the cursor after the semi-colon. If you add a value with parens the cursor is positioned inside the parens and pressing tab moves it to after the value/semi.

[gandm]

@shanecav The autocomplete bit is provided by Atom's autocomplete-css which assumes that the css is in a proper CSS file. e.g. properties appear inside braces, media statements appear at a top level, etc. That's why you are seeing this issue. If I change the scopes to fix this to allow property autocomplete at the top level then the autocomplete for media, keyframes,... stop working, as these shouldn't appear inside a property block! I may have to provide my own autocomplete to fix this. Bit of a chore but I'll take a look.

[gandm]

@zaynv @whmountains Actually, it appears there maybe a way for me to do this but I need to get some time to look at it. Emmet seems to have a call that may allow this emmetio/emmet-atom#508 (comment)

[gandm]

@zaynv @whmountains I've just pushed 2.80.0 that supports emmet in css for styled-components. It's under a flag in the package settings. It uses autocomplete plus to provide a emmet snippet (hopefully) at the top of the pick list. Let me know if you have any issues.

[EmilTholin]

I asked gandm and the new css grammar parsing is currently being worked on. When complete, other css features in Atom should work in styled-components template strings!

[shanecav]

This is awesome, thanks for the great work @gandm!

One thing I noticed is that autocomplete for CSS rules only seems to work within curly brackets, but isn't working for styled-components where I'm just listing rules within tagged template literals.

e.g. this doesn't enable auto-complete:

const Wrapper = styled.div`
  display: flex;
`

but this does:

const Wrapper = styled.div`
  & {
    display: flex;
  }
`

Is there a way around that?

[whmountains]

I hacked together a basic version here: https://github.com/whmountains/autocomplete-css.git. Only thing missing is the psuedo-classes don't auto-complete.

I don't understand the specifics of scopes and I'm having a hard time distinguishing between a psuedo-selector and a property value. @gandm would you mind taking a look? I expect someone who's a seasoned plugin developer would be able to spot the problem right away.

[whmountains]

Thanks for your work @gandm. It will be great to have this come standard!

[zaynv]

Thank you for the amazing work on this. I just have a question about using Emmet with styled-components. In normal CSS files, I can write something like:

ta-c

And then if I press tab, it would autocomplete to text-align: center;

Or doing something like

m0-a

would autocomplete to something like margin: 0 auto;

Is there some way to replicate this Emmet support within styled-components in Atom or is it not possible?

[mxstbr]

Not yet! I'd love if somebody could hack around on that!

[mxstbr]

Amazing!

[mxstbr]

(I'll close this for now, but feel free to continue discussing)

[shanecav]

Totally makes sense. Thanks for the explanation!

[kachkaev]

@gandm @shanecav have you worked out the solution by a chance? I also wondered if it is possible to enjoy autocomplete in Atom :)

[whmountains]

I really want this! Hope you find the time to do it.

[mxstbr]

That's amazing @whmountains! Let's hope @gandm knows the way 😊 Would love to have this!

[whmountains]

@mxstbr Thanks to you for making styled-components. It's awesome!!!

In case anyone wants to try out the version that I just made:

git clone "https://github.com/whmountains/autocomplete-css.git"
cd autocomplete-css
apm link

Now start up Atom, and go to Settings->packages. Disable the autocomplete-css that's listed under "core packages". You should be left with the modified version under "community packages"

[whmountains]

Works great! Thanks @gandm.

Only thing I noticed is that there isn't any autocomplete for media queries. @me doesn't start auto-completing to @media. Really that's nitpicking though. I wouldn't care much if it never got fixed. Thanks again for your work!

[gandm]

@whmountains yes, the completes.json file provided by atom doesn't have any @ completions. I could easily add these.

One thing I don't much like is it adding the semi-colons after a property. I feel inclined to remove that behaviour, but it is how autocomplete-css does it so i left it in here Any views?

[mxstbr]

People are loving it! 🎉 Good job @gandm and @whmountains https://twitter.com/mxstbr/status/826840687127752705

[mxstbr]

One thing I don't much like is it adding the semi-colons after a property.

I feel like the annoying part is how the semi-colon is after the cursor. Instead of that, it should just be at the end of the line, I think that'd make it better?

[mxstbr]

Awesome @gandm, this feels amazing! Well done 👏

[gandm]

@zaynv , @whmountains No it doesn't look possible. You'd have to change emmet to support this. Firstly you'd have to change the tab key binding to some other key for emmet e.g.

'atom-text-editor[data-grammar="source js jsx"]:not([mini])':
  'ctrl-shift-l': 'emmet:expand-abbreviation-with-tab'

but even then emmet checks the scope name of the editor panel here and if it sees JS or JSX in the scope list it returns that as the syntax. This check takes precedence over the following checks for CSS. The scope that is checked in by the above line when inside a styled-componenets string is source.js.jsx source.inside-js.css.styled so JSX is found in preference to CSS, as it appears earlier in the scope list.

Just using the above keymap means that ta-c Ctrl-Shift-l would generate some open/close tags as it assumes JSX.

[whmountains]

Nice sleuthing @gandm. You really seem to know your way around the Atom API! 🤓

[gandm]

@zaynv @whmountains Looking at the code for the atom emmet integration there are two repos - the existing code and a newer one that may be released at some point. In either case there isn't any way of doing this unless emmetio would accept a PR to specifically support this use case. I guess this is a non-starter!

[zaynv]

Hmm, that's unfortunate. Thanks for taking the time to check it out, it is much appreciated!

[zaynv]

Late on this, but thanks so much @gandm you are doing amaznig work

[selrond]

Probaby worth noting - styled-components autocomplete should be enabled first in Atom's laguage-babel plugin settings like so: