Emmet for CSS-in-JS

[renatorib]

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]

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

[renatorib]

Nope

[brumm]

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

[goldylucks]

for vscode there are two packages:

• js snippets
• CSS-in-JS

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

[sergeche]

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)?

[goldylucks]

@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]

@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 20px → margin: [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]

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

[sergeche]

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

[tayler-ramsay]

@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]

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

[tayler-ramsay]

Cheers! Best regards, *Tayler Ramsay ({* * ({Developer} && "Designer")* * return {* [ Phone: (717) 578-3243, *www.tayler.co* <http://www.taylerramsay.com/> *]* * }* * });* *"It's such a fine line between stupid, and clever."*

…

On Wed, Oct 30, 2019 at 10:15 AM Sergey Chikuyonok ***@***.***> wrote: Oh, then it’s not available yet. New Emmet version is only available in new Sublime Text plugin — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#512?email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECUK2HI#issuecomment-547925277>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q> .

[scriptist]

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]

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

[sergeche]

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]

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]

Any chance to try this in VS Code?

[sergeche]

I plan to rewrite VSCode extension in near future to support all Emmet features Отправлено с iPhone

…

2 мая 2020 г., в 15:25, Thomas ***@***.***> написал(а):  Any chance to try this in VS Code? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[zremboldt]

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]

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

[zremboldt]

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]

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]

This option must be set to true:

emmet/src/config.ts

Line 257 in 51757fc

'stylesheet.json': boolean;

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

[josegutierro]

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

[sergeche]

@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]

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