Feature request styled-components CSS Trigger

[shelldandy]

So stuff between backticks can trigger the CSS expansions instead of making a new css block:

styled.div`
    // What i type
    db<Tab>
    // what to expect
    display: block;
    // what we get
    db {
        // Inside of here normal expansions DO work
    }
`

[JakeElder]

@mattn Thank you for writing this plugin - it's been very reliable and useful to me for years

styled-components is a CSS in JS library that uses Tagged Template Literals to allow developers to define CSS for React components in javascript and has a whole bunch of advantages. It's become very popular, the GitHub repo now has 25k ⭐️s

Would it be much work to make emmet-vim css expansion function in the same way it does in css/scss/sass?

It's API looks like this;

import styled from 'styled-components'

const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
`
const TomatoButton = styled(Button)`
  background: tomato;
`
render(
  <>
    <Button>I'm purple.</Button>
    <br />
    <TomatoButton>I'm red.</TomatoButton>
  </>
)

Note that the styles are not grouped within a selector definition body as all property declarations apply to the one component.

For emmet-vim to function properly with this library, I would expect the same functionality to be applied when within a .js, .jsx, .ts or .tsx file and within a styled.*`${target this zone}` block as when in a standard css file and within a selector definition.

IE

When my cursor is here in SomeComponent.tsx

import styled from 'styled-components'
const SomeComponent = styled.div`
  df<CURSOR>
`

And i invoke emmet#expandAbbrIntelligent, I would expect the output to be

import styled from 'styled-components'
const SomeComponent = styled.div`
  display: flex;
`

In the same way that the expansion would occur if my cursor were here in some-component.css

.some-component {
  df<CURSOR>
}

I've spent an hour or so browsing through the code for emmet-vim but not having any experience writing Vim plugins I'm anticipating it would take me a day or two to make any progress.

Do you have time to consider this? If not then if you can provide any insight as to where a good starting point would be and how I might be able to achieve this then it would be appreciated, and I will spend some more time trying to generate a PR.

[mattn]

Hmm, expanding css attributes without block is not difficult but determine the jsTemplateString is css block is difficult.

[shelldandy]

Im guessing there could be an option to have it always be css or js inside jsTemplateString, or a way to trigger it (?) it doesn't have to be smart to begin with :)

[mattn]

Yes, I was thinking it.

(This is WIP branch) https://github.com/mattn/emmet-vim/commit/84a03888270cd5f82a6dd584b85d4bc33cd6351f#diff-88ee7622f49bacf8a1d8ba95ee919310R400

[gitusp]

I suppose that using styled-components syntax plugin makes it easy to determine whether a jsTemplateString is a css block. I'll give a shot soon!

[roubaobaozi]

Hi, I saw this was closed as completed, but I was hoping to get some help.

I'm not sure what I'm doing wrong .. in an .scss file, I get replacements as expected, db or d:b replace out to display: block; when I trigger g:user_emmet_expandabbr_key

Similarly, in a .js file, div.test expands correctly with the expandabbr_key.

But, in styled-components, db or d:b yields <db></db> and <d:b></d:b> instead.

This is what I have in my .vimrc:

Plug 'mattn/emmet-vim'
Plug 'mattn/webapi-vim'
[ ... ]
let g:user_emmet_expandabbr_key = '<A-Tab>'
let g:user_emmet_settings = webapi#json#decode(join(readfile(expand('~/.dotfiles/vim/emmetsnippets.json')), "\n"))

That's all. I have tried it without the webapi emmetsnippets.json too. I ran :EmmetInstall each time. But the results were always the same.

Does anybody know what else I have to do to get it to work?

Thank you 🙏🏼