Add support for styled-components #289

AriTheElk · 2016-10-15T11:19:27Z

This PR adds support for styled-components. They're a pretty big deal right now and have a good chance of becoming a standard. I think it would be awesome if you considered merging this upstream 😄

You can view a preview of the implementation here: http://garetmckinley.github.io/styled-babel-sublime

mxstbr · 2016-10-15T11:27:42Z

Syntax highlighting is a part of a great experience when usingstyled-components. It's non-intrusive, meaning users who do not use styled-components won't notice any difference – but those who do definitely will.

In fact, the same syntax highlighting support was also added to Atom's language-babel package and people have only loved it so far!

We're working really hard to make styled-components the default solution for react apps. We think we nailed the development experience, and now we're working on further tools to get a slimmer filesize and even better performance.

have a good chance of becoming a standard

See this tweet 👍

zertosh · 2016-10-24T12:55:21Z

Cool. We can do this. A few things: (1) What's with all of the unrelated changes? (2) Docs? (3) Tests?

AriTheElk · 2016-10-24T15:01:43Z

What unrelated changes are you referring to? The branch attached to this PR should only have changes related to integrating styled-components. I have been patching things in this branch for a week though, so it got a little cluttered up. If you'd prefer I can start back from upstream and patch in only the final changes as a single commit.

For docs, want me to add a new section to the README to talk about styled-components integration with a few examples?

For testing, do I just need to create a new test/syntax_test_styles with all the possible matches? Or is there a way these files are getting generated?

Thanks

zertosh · 2016-10-24T18:06:46Z

What unrelated changes are you referring to?

The firstLineMatch removal.
Re-sorting the rules.
Removing the comments.

If you'd prefer I can start back from upstream and patch in only the final changes as a single commit.

Yes please :)

For docs, want me to add a new section to the README to talk about styled-components integration with a few examples?

That would be great!

For testing, do I just need to create a new test/syntax_test_styles with all the possible matches? Or is there a way these files are getting generated?

I don't know if you can auto-generate them. Just something that tests that the source.react.css scope is applied where you expect.

AriTheElk · 2016-10-24T18:10:08Z

Ok, thanks! I appreciate your input and the consideration of this PR 👍 I'll get to these changes this afternoon.

AriTheElk · 2016-10-25T12:38:09Z

I do have one question about this repo, what is the point of the JavaScript (Babel).tmLanguage file? In the README, it specifies that only ST3 is supported, which means that with the sublime-syntax file present, the tmLanguage file is ignored. Correct me if I'm wrong on this.

zertosh · 2016-10-25T15:25:12Z

Correct me if I'm wrong on this.

You're right, but only if you're using the latest ST3 beta build - not all ST3's supported sublime-syntax. Very shortly (2 weeks maybe? I have an 8 hrs flight coming up to do this), I'm removing the sublime-syntax and only keeping the tmLanguage. The idea is to have one grammar that works in ST3, Atom and VSCode. The current tmLanguage sucks. However, TypeScript's just got a re-write, and it's perfect to adapt to Flow-typed JS. This why I'm asking you for a test - I don't use styled-components, so I want to be able to catch breakage when I make the switch.

mxstbr · 2016-10-25T16:33:46Z

This why I'm asking you for a test - I don't use styled-components, so I want to be able to catch breakage when I make the switch.

That sounds very reasonable 👌

AriTheElk · 2016-10-25T18:43:33Z

Ah, that makes sense. I'm working on the test file now, almost done. I already had implemented the support for styled-components in both the tmLanguage and sublime-syntax files, do you want me to include the changes in both those files until you actually remove the sublime-syntax from the repo?

It's no extra work for me either way since I had already written the code, just wanna make sure I include only the changes you want.

zertosh · 2016-10-25T19:52:19Z

Yes please, include both. I suspect that most (if not all) users will use the sublime-syntax implementation, but it would be nice if I had something already in the tmLanguage that I can copy/paste 😄

bhough · 2016-12-01T20:36:17Z

garetmckinley @zertosh anything I can help with to move this along?

AriTheElk · 2016-12-01T20:45:24Z

Hmm, I see that the repo has been updated recently! Basically we just need to make a fresh fork of the master repo and then patch in some of my changes. The main changes are in the new Styled Components.tmLanguage file.

I don't have time today, but I can definitely get to this and have it wrapped up tomorrow.

zertosh · 2016-12-01T21:17:07Z

@garetmckinley can you rebase it onto master and only do the tmLanguage?

mxstbr · 2016-12-02T10:09:46Z

Amazing, can't wait to land this! 🎉

AriTheElk · 2016-12-02T21:29:12Z

So I cleaned up this branch's history and got it ready for merging 😸

I added better language definitions to the Styled Components.tmLanguage file. It even supports using css-only sublime extensions inside the embedded CSS! Like the css color preview extension shown in the screenshot 😄

I also added fairly extensive tests for the Styled Components.tmLanguage file.

Let me know if there's anything else you need me to do before we get this merged!

mxstbr · 2016-12-03T09:26:05Z

That's amazing, looks really really good @garetmckinley!

zertosh · 2016-12-06T12:07:55Z

@garetmckinley did you edit JavaScript (Babel).tmLanguage directly? Check out https://github.com/babel/babel-sublime#contributing.

AriTheElk · 2016-12-06T12:36:34Z

Yup. That section confused me, as theres no YAML-tmKittens file. I thought maybe it was referring to the YAML-tmLanguage file, but looking at the repo that file hasnt been updated in nearly a year. Let me know what you want me to edit and ill get it changed.

At this point im just moving around regex haha so its no big deal.

zertosh · 2016-12-06T12:41:04Z

yes, please update the YAML-tmLanguage file since that's what is used to generate the tmLanguage file.

AriTheElk · 2016-12-06T12:41:49Z

You got it 👍

AriTheElk · 2016-12-13T14:54:33Z

This PR should be ready to go @zertosh. The styled-components blocks were ported to the YAML file and I rebuilt the tmLanguage file using the updated template as well. I also got all 112 syntax tests passing as well 👍

zertosh · 2016-12-14T01:23:08Z

Thanks @garetmckinley! I need to get a few more changes in before I put out a release, so it'll be a few more days.

AriTheElk · 2016-12-14T01:26:29Z

No worries, I'm glad we were able to get this merged! I apologize for my misunderstanding how to use the DevTools, this was my first time working on a syntax package. I feel like I learned a lot though and I really appreciate your patience and willingness to help ☺️

AriTheElk · 2017-01-04T18:35:34Z

Yeah, just clone the repo to your sublime packages directory.

ericbiewener · 2017-01-29T18:02:48Z

Great job with this! I'm using this PR with my Sublime and noticed the following syntax highlighting issues:

styled(...) syntax loses all highlighting
transform: property isn't highlighted correctly

AriTheElk · 2017-01-29T18:05:15Z

Thanks for reporting @ericbiewener! I've been pretty busy the past few weeks, but I have a little free time this afternoon, so I'm going to try and fix the issues that have been reported in this thread. Let me know if there's any other rules that don't work!

The CSS highlighting was based off of the original CSS language file from sublime, so I think it's a little dated in terms of modern css rules. I don't think things like flex are highlighted either, I may be wrong though; I don't use sublime as my primary editor.

ericbiewener · 2017-01-29T18:15:44Z

Well, since you're working on it, let me add one more highlighting request ;)

Although the CSS highlighting doesn't work with the styled(...) syntax, normal JS string interpolation highlighting does. It would be great to get this within the CSS-highlighted syntax. Compare the ${props => ... } syntax highlighting below to the version in Container in the first screenshot I posted above.

AriTheElk · 2017-01-29T18:19:11Z

This is definitely something on my list, but I'm unsure currently how to go about doing that since the CSS is an embedded language file. I'll have to do some research on it, so no promises on that one yet 😉

mxstbr · 2017-01-29T19:00:35Z

Yo dawg, I heard you like syntax highlighting so I added an embedded language in an embedded language file in an embedded language... 😉

const Box = styled.div`
  background: yellow;
  ${props => props.big && css`
    font-size: 2em;
    color: ${props => props.red ? 'red' : 'blue'}
  `}
`

mxstbr · 2017-02-02T14:39:20Z

Wait @zertosh was this shipped?!

declanelcocks · 2017-02-03T06:38:46Z

Also noticed that it doesn't work in this case:

And the syntax highlighting for &:hover is not working in this case:

I assume the above is not working anyway as it normally looks like this:

AriTheElk · 2017-02-03T14:11:19Z

If anyone else wants to take a stab at these fixes, please feel free to. My schedule hasn't allowed me to spend very much time on things like this 😕

zertosh · 2017-02-03T14:48:31Z

Checking when I get to my desk :) - AS

…

On Feb 3, 2017, at 9:11 AM, Garet McKinley ***@***.***> wrote: If anyone else wants to take a stab at these fixes, please feel free to. My schedule hasn't allowed me to spend very much time on things like this 😕 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

mxstbr · 2017-02-04T11:03:06Z

Thanks @zertosh!

zertosh · 2017-02-06T05:35:42Z

@garetmckinley I made a lot of fixes in 1955e69. Can you give it a quick look before I publish?

mxstbr · 2017-03-02T12:12:34Z

@zertosh I just tried this on a big project, and found this code ^ being syntax highlighted incorrectly. (using the master branch of babel-sublime) Any ideas why?

Another instance:

zertosh · 2017-03-02T12:18:18Z

@mxstbr can I get the code and the name of theme you're using?

mxstbr · 2017-03-02T12:25:03Z

Code

export const Bubble = styled.p`
	display: inline-block;
	flex: 0 0 auto;
	padding: 8px 16px;
	vertical-align: middle;
	border-radius: 16px
	margin-top: 2px;
	font-size: 14px;
	max-width: 60%;
	line-height: 20px;

	&:first-of-type {
		margin-top: 0;
	}

	a {
  		text-decoration: underline;
  		word-wrap: break-word;
  		line-height: inherit;
  		word-break: break-all;
  	}
`;

export const BubbleGroup = styled.div`
	width: 100%;
	margin-top: 8px;

	&:first-of-type {
		margin-top: auto;
	}

	> p {

		background-color: ${props =>
  props.me ? props.theme.brand.default : props.theme.generic.default};
		background-image: ${props =>
  props.me
    ? Gradient(props.theme.brand.alt, props.theme.brand.default)
    : Gradient(props.theme.generic.alt, props.theme.generic.default)}
		color: ${props =>
  props.me ? props.theme.text.reverse : props.theme.text.default};
		float: ${props => props.me ? `right;` : `left;`}
		font-weight: ${props => props.me ? `500` : `400`};
		clear: both;

		&:not(:first-of-type) {
			${props =>
  props.me ? `border-top-right-radius: 4px` : `border-top-left-radius: 4px`};
		}

		&:not(:last-of-type) {
			${props =>
  props.me
    ? `border-bottom-right-radius: 4px`
    : `border-bottom-left-radius: 4px`};
		}

		&::selection {
		  background-color: ${props =>
  props.me ? props.theme.text.default : props.theme.brand.alt};
}
	}
`;

@zertosh Color scheme: SublimeLinter/base16-ocean.dark (SL).tmTheme, theme: Spacegray.sublime-theme, font: Operator Mono

zertosh · 2017-03-02T12:35:46Z

@mxstbr it's working as expected.

The s-c section is matched by a CSS grammar that's very close to the one included by Sublime. So if you grab your s-c css code, put it in a new view, and set the grammar to CSS, that should approximate what the s-c code should look like with your theme – and your code looks like your screenshots under base16-ocean.

As far as the interpolations in BubbleGroup, that brokeness is a limitation of the grammars. The content of styled.div is matched as CSS, and CSS doesn't have ${} interpolations, which is why it looks broken.

mxstbr · 2017-03-02T13:53:12Z

Ah that's fair. Other than that everything works perfectly!

danreeves · 2017-03-17T10:40:34Z

@zertosh does that mean it would be possible to add ${} interpolations and CSS grammar together as a new styled-components grammar so we could have it highlighting properly, or is that a terrible idea?

Edit: looking at the atom impl, I think that's exactly what they've done

Edit2: I've opened a WIP pull request 👉 #311

mxstbr · 2017-08-31T12:41:47Z

Any news on this being published? It's been sitting there for a while now... 😢

zertosh · 2017-08-31T13:28:18Z

This implementation is not so great. I made lots of fixes in 1955e69, but I'm afraid to release it because it's still not-so-great and I don't really want to "support" it (in the address issues kinda way - not that it shouldn't be in the grammar). From what I understand of how styled-components works, the existing grammar's handling of CSS leaves a lot to be desired. So I don't really know how to proceed :/

mxstbr · 2017-08-31T13:38:02Z

I'm happy to make it its own plugin under the styled-components org with what we have right now? What do you think about that, then at least we have something 😉

zertosh · 2017-08-31T20:43:10Z

@mxstbr not sure what you mean by that... are you saying that instead of - include: source.js.css it includes some other grammar?

mxstbr · 2017-08-31T20:51:38Z

No I mean extracting that part and making it it's own plugin, or can Sublime not run two syntax highlighters side-by-side?

zertosh · 2017-08-31T20:52:47Z

@mxstbr that's not how grammars work :/

mxstbr · 2017-08-31T21:06:54Z

That sucks, I guess we just gotta fork it then and publish it as styled-babel-sublime or something?

mxstbr mentioned this pull request Oct 16, 2016

Support Sublime Text syntax highlighting styled-components/styled-components#69

Closed

AriTheElk mentioned this pull request Oct 24, 2016

Convert existing CSS styles into styled-components electron-react-boilerplate/electron-react-boilerplate#462

Closed

AriTheElk force-pushed the babel-sublime branch from 8b61498 to 1bf8ac4 Compare December 2, 2016 21:26

jstaffans mentioned this pull request Dec 5, 2016

Support for styled-components fxbois/web-mode#824

Closed

add styled-components support

358a272

AriTheElk force-pushed the babel-sublime branch from 1bf8ac4 to 358a272 Compare December 13, 2016 14:51

zertosh merged commit 2bcc72c into babel:master Dec 14, 2016

amilajack mentioned this pull request Feb 26, 2017

Reflect babel-sublime updates in editor compatibility styled-components/styled-components#535

Closed

siddharthkp mentioned this pull request Mar 14, 2017

README: update syntax highlighting status for Sublime styled-components/styled-components#584

Closed

djstein mentioned this pull request Jun 28, 2017

No syntax highlighting with styled-components #333

Closed

jaggerwang mentioned this pull request Aug 31, 2017

Does the PR for syntax supporting in babel-sublime already merged? I still not seeing in SublimeText. styled-components/styled-components#1133

Closed

singingwolfboy mentioned this pull request Jan 22, 2018

Sublime Text is supported for syntax highlighting styled-components/styled-components-website#222

Closed

Add support for styled-components #289

Add support for styled-components #289

Conversation

AriTheElk commented Oct 15, 2016

mxstbr commented Oct 15, 2016

zertosh commented Oct 24, 2016

AriTheElk commented Oct 24, 2016

zertosh commented Oct 24, 2016

AriTheElk commented Oct 24, 2016

AriTheElk commented Oct 25, 2016

zertosh commented Oct 25, 2016

mxstbr commented Oct 25, 2016

AriTheElk commented Oct 25, 2016

zertosh commented Oct 25, 2016

bhough commented Dec 1, 2016 • edited

AriTheElk commented Dec 1, 2016

zertosh commented Dec 1, 2016

mxstbr commented Dec 2, 2016

AriTheElk commented Dec 2, 2016

mxstbr commented Dec 3, 2016

zertosh commented Dec 6, 2016

AriTheElk commented Dec 6, 2016

zertosh commented Dec 6, 2016

AriTheElk commented Dec 6, 2016

AriTheElk commented Dec 13, 2016

zertosh commented Dec 14, 2016

AriTheElk commented Dec 14, 2016

AriTheElk commented Jan 4, 2017

ericbiewener commented Jan 29, 2017

AriTheElk commented Jan 29, 2017 • edited

ericbiewener commented Jan 29, 2017

AriTheElk commented Jan 29, 2017

mxstbr commented Jan 29, 2017

mxstbr commented Feb 2, 2017

declanelcocks commented Feb 3, 2017

AriTheElk commented Feb 3, 2017

zertosh commented Feb 3, 2017 via email

mxstbr commented Feb 4, 2017

zertosh commented Feb 6, 2017

mxstbr commented Mar 2, 2017 • edited

zertosh commented Mar 2, 2017

mxstbr commented Mar 2, 2017 • edited

zertosh commented Mar 2, 2017

mxstbr commented Mar 2, 2017

danreeves commented Mar 17, 2017 • edited

mxstbr commented Aug 31, 2017

zertosh commented Aug 31, 2017

mxstbr commented Aug 31, 2017

zertosh commented Aug 31, 2017

mxstbr commented Aug 31, 2017

zertosh commented Aug 31, 2017

mxstbr commented Aug 31, 2017

bhough commented Dec 1, 2016 •

edited

AriTheElk commented Jan 29, 2017 •

edited

mxstbr commented Mar 2, 2017 •

edited

mxstbr commented Mar 2, 2017 •

edited

danreeves commented Mar 17, 2017 •

edited