Any plan to support Styled Jsx syntax highlighting?

[ghost]

https://github.com/zeit/styled-jsx

[gandm]

Not directly, but you can add the string below to one of my package settings (Please update to v2.54.0 first). Having added it. wait 10 seconds and you should see a new extension grammar being created that will do what you want. For more info see the readme

"(?<=<style jsx>{)|(?<=<style jsx global>{)":source.css

should give you something like

[gandm]

If you also need to embed interpolations like ${something => something} then you may want to use my css grammar instead. This is used by styled-components.

e.g.
"(?<=<style jsx>{)|(?<=<style jsx global>{)":source.css.styled

[ghost]

Thanks that works perfectly

[waliurjs]

@gandm Noob here. Can't seem to find the 'settings' tab. Closest i got to it, is this:

[gandm]

@oleole90 Atom settings for the editor itself as well as all package options are available via the settings menu option or via the shortcut ctrl+, or Cmd+, From there goto to the packages and select language-babel.

[waliurjs]

@gandm I've selected Packages > language-babel and there is just a Readme file there.

No editable input field found like yours

Another thing is confusing me is that:
inside: packages/language-babel/grammars/Babel Language.json there is a valid json there but "(?<=<style jsx>{)|(?<=<style jsx global>{)":source.css looks like a reverse json to me! How can I even put something like this inside a json (as mentioned here about scopeName)?

[gandm]

@oleole90 If you don't see any settings it looks like the package isn't installed correctly. Uninstall it and re-install & restart Atom and try again. Please do not attempt to change any of the language-babel JSON files directly.
You should see:-

The setting you mention actually creates a new grammar file. language-babel changes the setting provided to a valid JSON grammar file. Also, use "(?<=<style jsx>{)|(?<=<style jsx global>{)":source.css.styled as this allow for syntax, interpolation and auto-completion of styled CSS.

The grammar file created byt the above would look something like.

[waliurjs]

Yayyy! It's working after uninstall>Restart>Install!
Thank you so much dude! You're awesome!

[kudorori]

If i need to let him support

export default `div {display: inline-block}`

How do i do it

[gandm]

@kudorori The tagged template literal could contain any type of data. In your case it is CSS but it could easily be SQL, GraphQL,.... and I have no way of knowing. You could do:-

export default /*css*/`div {display: inline-block}`

and then in my tagged template grammar configuration option add the following

/*css*/:source.css.styled

If you are using Zeit's styled JSX then the string in this config will look like

"(?<=<style jsx>{)|(?<=<style jsx global>{)":source.css.styled,/*css*/:source.css.styled

[kudorori]

@gandm It works for me, great!

[ArtyomResh]

Can't make it work with nuclide atom IDE, before nuclide it works great