Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No syntax highlighting with styled-components #333

Closed
ghost opened this issue Jun 17, 2017 · 22 comments
Closed

No syntax highlighting with styled-components #333

ghost opened this issue Jun 17, 2017 · 22 comments

Comments

@ghost
Copy link

ghost commented Jun 17, 2017

Hi,

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

image

🔥 👀

@thadjbullet
Copy link

I confirm. No syntax highlight for styled-components.

@djstein
Copy link

djstein commented Jun 28, 2017

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

@Zip753
Copy link

Zip753 commented Jun 28, 2017

May be related to #320

@Marinolinderhof
Copy link

any progress on this?

@Marinolinderhof
Copy link

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
Copy link
Author

ghost commented Jul 14, 2017

thank you @Marinolinderhof it's much better!

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

image

@Marinolinderhof
Copy link

Marinolinderhof commented Jul 14, 2017

@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
Copy link

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

@jasan-s
Copy link

jasan-s commented Aug 14, 2017

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

@philipbordallo
Copy link

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

@selrond
Copy link

selrond commented Aug 21, 2017

@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
Copy link

selrond commented Aug 21, 2017

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
Copy link

GreLI commented Nov 2, 2017

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
Copy link

borela commented Mar 8, 2018

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

@davidcalhoun
Copy link

@borela Thanks! That works great.

@jonleung
Copy link

jonleung commented May 3, 2018

Thanks @borela ❤️️

@williamli
Copy link

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

@coreyward
Copy link

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
Copy link

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

Screen Shot 2019-04-05 at 09 49 24

Screen Shot 2019-04-05 at 09 49 07

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

@AuthorProxy
Copy link

any updates?

@mcissel
Copy link

mcissel commented Sep 6, 2019

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

@Thom1729
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests