[HowTo] JSX styled components CSS highlighting

[Jones-S]

Hi there

I know that your nice work already implemented part of my request: to have proper syntax highlighting.

I am currently using styled components (actually vue-styled-components) for a project and within style.js files the syntax highlighting works.

But I am also writing sass-like mixins for mediaqueries. By using the css function of styled components, the syntax highlighting works too (check image) If I use it nested the highlighting does not work anymore though (all of the rules are green):

Any idea how to solve this problem? Maybe with something from here: https://github.com/gandm/language-babel#javascript-tagged-template-literal-grammar-extensions

I am not quite sure if I could use this, but I assume I could define, that if a pattern like this ${media.medium comes up, the code will be formatted like css as well. Am I right?

I guess I would have to adapt this example "(?:css\.(?:[a-z])+)":source.css, /* @html */:text.html.basic, sql:source.sql But I don't really know how, and I also do not know how to put it into my .languagebabel config file. The atom settings are missing any section about JavaScript Tagged Template Literal Grammar Extensions

My guess would be "REGULAR EXPRESSION TO FIND PATTERN ${media.xyz":source.css

Thanks for the help here.

EDIT: It was the first setting on the settings page. I'll keep trying

[Jones-S]

I thought entering something like this into the language-babel settings of atom: \${media\.([^\s]+):source.css Should actually work...? The regex tester the pattern above would match for example ```${media.handheld````

But somehow I think I am missing something, because it does not work. Also I would like to know how to set this setting within the projects .languagebabel config file only.

[gandm]

You just need a simple string match so no need to use a regex as such. All you need is media.handheld:source.css.styled

[gandm]

[Jones-S]

Thanks gandm, I tried your suggestion, but somehow it still does not work like I want it to. Do I have to define the end of a template literal somehow?

Also: how would I use this in the .languagebabel config file?

[gandm]

It works for me.

It should have ceated a new grammar file ttl-74ad33e45d1d9dc1ebdb2558ca9da40f71a4061f1f36d44caa995f6105273af2.json inside my package.

You can't use this inside a .languagebabel file. This is because grammars are global inside Atom and .languagebabel settings are project based. e.g. you couldn't have two projects open with different tagged template grammars referenced.

[Jones-S]

Thanks for your comment on the languagebabel file. I wanted to have everyone on the project automatically enjoying the syntax highlighting.

Anyway. 👍 for the working example at your side. But I still don't get your appearance. Do I have to set another setting? Or do I always have to restart atom (although this did not help)? And which syntax setting do you use (in the bottom right corner)? I use Babel ES6 Javascript. Anything else you could think of? I double checked that the settings are right: media.medium:source.css.styled.

I also tried different syntaxes. But I think it really messes up with those backticks...

[gandm]

No it's just that setting. You shouldn't have to restart Atom to get this to work as it is dynamic.

Once you enter the tagged template grammar string into the config the system waits for 10 seconds to ensure that more changes are made to the string (Atom limitation) and then creates the grammar extension and loads it. You should see a notification as shown below.

[Jones-S]

Oh I see... That blue box did never pop up. So I disabled and enabled the package and I got error messages:

Failed to activate the language-babel package
Maximum call stack size exceeded
Show Stack Trace
The error was thrown from the language-babel package. This issue has already been reported.
View Issue

Uncaught RangeError: Maximum call stack size exceeded
/Applications/Atom.app/Contents/Resources/app/node_modules/underscore/underscore.js:219
Show Stack Trace
This is likely a bug in Atom. This issue has already been reported.

I had some of them before, but did not realize that this probably intervened with the babel package. I don't really know how to solve this though. Hints are welcome. :) But I'll keep trying

EDIT: I don't get the error at all times. Now I just deactivated and activated the package without any problems. But I still don't get this blue box popping up...

Atom lead me to this issue: https://github.com/gandm/language-babel/issues/331 Where I posted the error code

[gandm]

Could you uninstall language-babel, stop Atom, clear the ~/.atom/compile-cache (it gets rebuilt at start), restart Atom and then re-install and see if that fixes it?

[Jones-S]

So fresh and so clean! 🎉

Thanks man. This solved my problem!

[gandm]

Glad it worked. Atom does get issues like this more often than it should!

[Jones-S]

It does indeed. I just had to redo everything. I tried to add a regex expression instead of media.medium. Because I have 5-6 breakpoints I am using, so I wanted a regex to target all of this: media.small:source.css.styled, media.medium:source.css.styled, media.large:source.css.styled etc. So I got back to my regex, but atom crashed again because of the stack size thing... So as a last question: Would I use "\${media\.([^\s]+)":source.css.styled or something else? It keeps crashing when I enter this into my babel settings...

[gandm]

I have no idea why Atom is crashing the stack trace seems to be some form of recursion inside Atom when enabling the grammar! . I'm using Atom 1.18 Beta and it seems fine.

If you want a catchall regex then "media\.\w+":source.css.styled

[Jones-S]

Thank you a lot @gandm Your help has been awesome. Hope it helps at least some other people trying to get the styled components highlights right. I may bump to v1.18 too if it keeps bothering me. I will try the regex soon. Right now atom seems to give me the blue update box anymore. I will have to repeat the cache clearing steps... 😢

[joaoreynolds]

I know this is closed. But since media.{size} seems to be a best practice and is suggested on the styled-components docs, would it be bad if "media\.\w+":source.css.styled was a default behavior? I just wonder how many users are adding this grammar extension anyway?