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

Emmet for CSS-in-JS #512

Open
renatorib opened this issue Aug 25, 2017 · 26 comments
Open

Emmet for CSS-in-JS #512

renatorib opened this issue Aug 25, 2017 · 26 comments

Comments

@renatorib
Copy link

renatorib commented Aug 25, 2017

Is there any way or plugin (vscode/atom) to use emmet with css-in-js, like glamor, glamorous or raw styles?

{
  display: 'flex',
  fontSize: '16px',
  marginTop: '10px',
}

If it does not exist, this issue could be a feature request so

@EddyVinck
Copy link

@renatorib Have you found a solution to use emmet for CSS-inJS yet?

@renatorib
Copy link
Author

Nope

@brumm
Copy link

brumm commented Feb 22, 2019

If you're using Atom, check out https://atom.io/packages/atom-emmet-css-in-js

@goldylucks
Copy link

for vscode there are two packages:

The second one has more installs but I couldn't get it to work :/

@sergeche
Copy link
Member

Working on it as a part of Emmet v2: https://github.com/emmetio/emmet/tree/v2
Can you provide some specs about desired behaviour(I don’t personally use CSS-in-JS)?

@sergeche sergeche pinned this issue Aug 20, 2019
sergeche added a commit that referenced this issue Aug 20, 2019
@sergeche sergeche unpinned this issue Aug 20, 2019
@goldylucks
Copy link

@sergeche the behavior would be very similar:

for example inside a .jsx file, pressing bgc<TAB> would expand to ``backgroundColor: '#'- with the cursor after the#`.

Notice:

  1. properties are camelCased
  2. the value in this case is a string
  3. the value can also be a number i.e. for opacity, so we omit the quotes, i.e. pressing op<TAB> would expand to opacity:

What do you think?

@sergeche
Copy link
Member

@goldylucks yes, current implementation works like this: https://github.com/emmetio/emmet/blob/master/test/stylesheet.ts#L167
I thought that there are some quirks like multiple values must be arrays (margin: 10px 20pxmargin: [10, 20]) or something.

If it’s mostly a JSON-like output of CSS properties then it’s already implemented in new Emmet

@tayler-ramsay
Copy link

@sergeche should the lg() gradient CSS Abbreviations work in css-in-js? I can not seem to get it working.

@sergeche
Copy link
Member

@tayler-ramsay should work. Do you use latest RC version of Emmet (v2.0.0rc-5)?

@tayler-ramsay
Copy link

tayler-ramsay commented Oct 30, 2019

@sergeche thanks for the quick response. I am working in VS code is there a way that I can make sure of the version it is using?

I think it only is v2. I could just install is as a dependency that is good. Just wondering if I could upgrade it in VS code. Sorry for editing my response ;/

@sergeche
Copy link
Member

Oh, then it’s not available yet. New Emmet version is only available in new Sublime Text plugin

@tayler-ramsay
Copy link

tayler-ramsay commented Oct 31, 2019 via email

@scriptist
Copy link

scriptist commented Nov 21, 2019

Support for css template literals would be great too.

E.g.

const style = css`
  background-color: red;
  /* Auto-expand css props */
`;

Edit: never mind me, I just needed to install the vscode-styled-components extension.

Thanks!

@battaglr
Copy link

This is great! Please, @sergeche, let me know if I can be of any help with this feature.

@sergeche
Copy link
Member

I made Emmet 2.0 publicly available yesterday (just the core part itself), it’s available in Sublime Text, CodeMirror and Nova editors. You can give me some code snippets with real-world use cases so I can tune editor for better context detection.

As an example, in JS(X), abbreviations must be prefixed with < in order to not distract users with false matches. E.g. you should write something like <div.my-class. I can make custom prefix so you can clearly state that abbreviation you are typing must be expanded as CSS object literal. Something like |m10+p5

@battaglr
Copy link

That's awesome! As for the snippets, it depends on the CSS-in-JS you're using (and even how you have it configured). The original example from this issue is a good example (I tweaked the margin):

{
  display: 'flex',
  fontSize: '16px',
  margin: '10px 5px',
}

You could also do something like this and get the same results (at least in JSS):

{
  display: 'flex',
  fontSize: 16,
  margin: [[5, 10]],
}

Since there are many flavors of CSS-in-JS, I think the safest default would be to use values within quotes as in the first example.

@th-km
Copy link

th-km commented May 2, 2020

Any chance to try this in VS Code?

@sergeche
Copy link
Member

sergeche commented May 2, 2020 via email

@zremboldt
Copy link

Hi 👋
Based on the conversation above, it sounds like Emmet does have support for CSS object syntax within .js files but this isn't yet supported in VS Code.

Is this accurate? ☝️

I searched Google but I couldn't find a straight answer.
@sergeche Thanks so much for your work on this feature!

@sergeche
Copy link
Member

sergeche commented Apr 4, 2021

Yes, new Emmet version (already in VSCode) already supports output as JSON properties. It requires additional support from plugin itself

@zremboldt
Copy link

zremboldt commented Apr 4, 2021

Hey that's awesome! I haven't figured out yet how to make it work.

It requires additional support from plugin itself

☝️ Can you elaborate on this a bit or point me in the right direction? Are there docs somewhere on how to get it working?
Thanks again!

@zremboldt
Copy link

Setting emmet.includeLanguages to "javascript": "css" gives me standard CSS (not object syntax).
Setting it to "javascript": "javascriptreact" tries to turn the CSS into JSX.

Is there another setting I should be using to get CSS object syntax? I can't find a list of possible options anywhere. Here you can see my settings.json and the problem I'm having:

emmet.for.object.styles.mp4

To be clear I'm hoping to type this in my .js file:
d:f+jc:c+ai:c+mt10

And get this output:

display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,

@sergeche
Copy link
Member

sergeche commented Apr 4, 2021

This option must be set to true:

'stylesheet.json': boolean;

Not sure how to set Emmet options in VSCode plugin (I’m not the maintainer)

@josegutierro
Copy link

I think that you are right @sergeche , have you find the way add the config to VSCode?

@sergeche
Copy link
Member

@josegutierro didn’t tried yet. I guess it’s not just an option in VSCode plugin, it should be properly supported by plugin in order to work.

@josegutierro
Copy link

Thank you @sergeche for the moment I'm using this extension nativeEmmet. Is not really Emmet but there are a lot of snippets with tab completion. Here's the full list

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