Autocomplete atom snippet inside Styled-Components template literal

[DJTB]

I love the syntax highlighting available when using styled-components as so:

const text = styled.p`
  color: ${palette.primary};
`;

However, I'm trying to get some atom snippets working to save myself repetitive typing. I can't seem to get the snippet to show in autocomplete while between the styled template literal backticks.

In my snippets.cson I've tried

'*':
  # Styled Components
  'SC prop destructure':
    prefix: 'scp',
    body: "${({ $1 }) => $1 && $2 }"

The snippet will show for autocomplete throughout the rest of the file; as soon as I move the caret into the css syntax highlighted area, the snippet won't show. Is there a particular source I need to target to have it show? *, source.js, or even source.css won't seem to apply it within that zone.

Thanks for all your hard work, everything else works like a dream.

[gandm]

I've just pushed 2.60.0 that removes the constraint I placed on snippets from working inside styled-components. I would suggest you use a scope of .source.inside-js.css.styled

[DJTB]

Amazing :100:

[jeremytenjo]

@DJTB where you able to make snippets work inside a styled component?

[DJTB]

@tenjojeremy Inside of any of the following it works fine.

css`
  /* snippet tab complete */
`;

styled(Component)`
  /* snippet tab complete */
`;

styled.div`
  /* snippet tab complete */
`;

But not a plain template literal:

const someStyles = `
  color: blue;
  /* snippet won't work */
`;

My snippet (note the source scope):

# Styled Components
'.source.inside-js.css.styled':
  'SC prop destructure':
    prefix: 'scp',
    body: "${({ $1 }) => $1 && $2 }"

[jeremytenjo]

@DJTB Thank you fellow coder!

[c0debreaker]

@DJTB I want to try it. What do I download?

[DJTB]

@c0debreaker Open your snippets in Atom via the command palette and add the snippet? Then use scp[TAB] in the appropriate scope (see previous comment).