Emmet: Emmet for CSS-in-JS

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

Nope

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

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 :/

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

@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

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

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

@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 ;/

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

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 notifications@github.com
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
https://github.com/emmetio/emmet/issues/512?email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECUK2HI#issuecomment-547925277,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q
.

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!

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

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

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.

Any chance to try this in VS Code?

I plan to rewrite VSCode extension in near future to support all Emmet features

Отправлено с iPhone

2 мая 2020 г., в 15:25, Thomas notifications@github.com написал(а):


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.

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!

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

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!

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:

https://user-images.githubusercontent.com/19367659/113518218-ebbfbb00-9552-11eb-8963-eadef0b15f06.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,

This option must be set to true: https://github.com/emmetio/emmet/blob/51757fc77ee2477c2e2cc6abeff44e64c8a85eec/src/config.ts#L257

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

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

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

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