-
-
Notifications
You must be signed in to change notification settings - Fork 170
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
Add support for styled-components #289
Conversation
Syntax highlighting is a part of a great experience when using In fact, the same syntax highlighting support was also added to Atom's We're working really hard to make
See this tweet 👍 |
Cool. We can do this. A few things: (1) What's with all of the unrelated changes? (2) Docs? (3) Tests? |
What unrelated changes are you referring to? The branch attached to this PR should only have changes related to integrating For docs, want me to add a new section to the For testing, do I just need to create a new Thanks |
Yes please :)
That would be great!
I don't know if you can auto-generate them. Just something that tests that the |
Ok, thanks! I appreciate your input and the consideration of this PR 👍 I'll get to these changes this afternoon. |
I do have one question about this repo, what is the point of the |
You're right, but only if you're using the latest ST3 beta build - not all ST3's supported |
That sounds very reasonable 👌 |
Ah, that makes sense. I'm working on the test file now, almost done. I already had implemented the support for 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. |
Yes please, include both. I suspect that most (if not all) users will use the |
garetmckinley @zertosh anything I can help with to move this along? |
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. |
@garetmckinley can you rebase it onto master and only do the |
Amazing, can't wait to land this! 🎉 |
8b61498
to
1bf8ac4
Compare
So I cleaned up this branch's history and got it ready for merging 😸 I added better language definitions to the I also added fairly extensive tests for the Let me know if there's anything else you need me to do before we get this merged! |
That's amazing, looks really really good @garetmckinley! |
@garetmckinley did you edit |
Yup. That section confused me, as theres no At this point im just moving around regex haha so its no big deal. |
yes, please update the |
You got it 👍 |
1bf8ac4
to
358a272
Compare
This PR should be ready to go @zertosh. The |
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. |
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 |
Yeah, just clone the repo to your sublime packages directory. |
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. |
Well, since you're working on it, let me add one more highlighting request ;) Although the CSS highlighting doesn't work with the |
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 😉 |
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'}
`}
` |
Wait @zertosh was this shipped?! |
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 😕 |
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.
|
Thanks @zertosh! |
@garetmckinley I made a lot of fixes in 1955e69. Can you give it a quick look before I publish? |
@zertosh I just tried this on a big project, and found this code ^ being syntax highlighted incorrectly. (using the Another instance: |
@mxstbr can I get the code and the name of theme you're using? |
Codeexport 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: |
@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 As far as the interpolations in |
Ah that's fair. Other than that everything works perfectly! |
@zertosh does that mean it would be possible to add Edit: looking at the atom impl, I think that's exactly what they've done Edit2: I've opened a WIP pull request 👉 #311 |
Any news on this being published? It's been sitting there for a while now... 😢 |
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 :/ |
I'm happy to make it its own plugin under the |
@mxstbr not sure what you mean by that... are you saying that instead of |
No I mean extracting that part and making it it's own plugin, or can Sublime not run two syntax highlighters side-by-side? |
@mxstbr that's not how grammars work :/ |
That sucks, I guess we just gotta fork it then and publish it as |
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