No syntax highlighting with styled-components

[ghost]

Hi,

I understood babel-sublime could work with styled-components, I removed/re-installed the package but I've always this:

🔥 👀

[thadjbullet]

I confirm. No syntax highlight for styled-components.

[djstein]

Can also confirm unfortunately :[ wasn't this merged with #289 ??

[Zip753]

May be related to #320

[Marinolinderhof]

any progress on this?

[Marinolinderhof]

let me share a workaround. It isn't pretty but it works. So @Zip753 you're right with #320.

so what needs to be done is to make a new tag. until then you can DIY.
first i would recommend disable or remove the babel package in sublime

• Press ⌘/Ctrl + ⇧ + P to open the command palette.
• Type Package Control: Disable Package and press enter. Then search for Babel and press enter.
• if you open a JS file that used the babel that will go to no syntax sugar.

then open a terminal or git shell and go to the sublime package folder:
Preferences > Browse Packages in sublime text will show you where your packages are.
something like ~/.config/sublime-text-3/Packages/
enter this in your terminal git clone https://github.com/babel/babel-sublime.git --depth=1
it will clone the repo/package in the folder but this time with the latest code (with styled components)

most likely sublime would picked up the package but it wouldn't hurt to restart sublime. After that
set the default syntax like the readme describes only Babel becomes babel-sublime

To set it as the default syntax for a particular extension:

• Open a file with that extension,
• Select View from the menu,
• Then Syntax -> Open all with current extension as... -> babel-sublime -> JavaScript (Babel).
• Repeat this for each extension (e.g.: .js and .jsx).

[ghost]

thank you @Marinolinderhof it's much better!

I still have some issue for "nested styles" (L33 to L51):

[Marinolinderhof]

@tchret
i think (not tested) you could do something like:

import styled, {css} from 'styled';

${props => props.isActive && css`background:red;`}

let me know if that works

[emilgoldsmith]

Yeah it would really be great if the latest version could be published soon? Last publish was in January.

[jasan-s]

is there a manual method to download the latest babel-sublime repo and install it on sublime instead of package control?

[philipbordallo]

@jasan-s You can add git repos manually with Package Control via the Add Repository command, see here

[selrond]

@philipbordallo Tried that, not working. Added https://github.com/babel/babel-sublime via Add Repository, but can't even see Babel syntax in available syntaxes.

[selrond]

Ok, my fault. I didn't install the plugin from the added repo.

Steps:

1. Type Add Repository into command palette as @philipbordallo suggested
2. Install Package
3. Choose babel-sublime, not Babel (which is the outdated one provided by packagecontrol.io)
4. Change syntax to babel-sublime > JavaScript (Babel)

Styled Components - working! 🎉

[GreLI]

The step before works with styled, or styled.tag but not with styled.attrs() (styled.tag.attrs()).

Also, Emmet doesn't work within styles.

[borela]

Try https://github.com/borela/naomi it supports styled components, emmet for JSX and it also supports many stage 0 features.

[davidcalhoun]

@borela Thanks! That works great.

[jonleung]

Thanks @borela ❤️️

[williamli]

thanks @borela , Naomi rocks!
I almost had to switch to VS Code.

[coreyward]

For others coming across this, using Naomi as @borela suggests is a drastic change and not without significant issues of its own (e.g., using styled components with Naomi interferes with prettier, causing it to attempt to validate a file as CSS, and prevents Emmet from working properly in most circumstances).

[adrianblynch]

Thanks for the suggestions @philipbordallo and @selrond - I installed from the repo and it doesn't work well for me:

Might be time to switch to VS Code like I've been telling myself to do for the last few years 😛

[AuthorProxy]

any updates?

[mcissel]

I switched to this: https://github.com/Thom1729/Sublime-JS-Custom.
I liked it better than Naomi.

[Thom1729]

This should be fixed in v10.0.0-beta.2. See #379 for more information on the new release. Please report any problems with v10 in a new issue.