Custom methods like media.desktop`` aren't recognize about webstorm-styled-components

[aaccurso]

What I meant is that you can do things like:

import styled, { css } from 'styled-components';

const Container = styled.div`
  color: red;
  ${media.desktop(css`color: blue;`)}
  ${props => props.hasPadding ? css`padding: 20px;` : null}
`

The css keyword gives the hint to the editor to highlight the template literal.

Not sure if this is still working though, haven't used webstorm in a while.

[aaccurso]

You should be able to invoke the function returned when calling bp.up: ${bp.up('m')(css`/.../`)}

[undeadcat]

Added support for configuring custom methods in 1.0.7.
See README -> Configuration for details and please try it out.

[microcipcip]

You are amazing....it works perfectly! I have also found another tip....if you paste the snippet in a string literal, Phpstorm will try to escape it, so for example this:

  ${bp.up('m')`
    display: none;
  `}

Will become this:

    ${bp.up('m')\`
    justify-content: center;
  \`}

To fix this behaviour, you have to use the Menu -> Edit -> Paste Simple command, or usually Ctrl+Alt+Shift+V.

[microcipcip]

This dosen't work?

// Some component
const Example = styled.div`
  display: none;
  ${props => props.theme.desktop(css`
    display: block;
  `)}
`;

[fpoumian]

I was also trying to implement this pattern for Media Queries and I stumbled upon this issue. I would love for this plugin to support this type of "nested media queries".

[aaccurso]

This would be a really nice feature. Currently, in order to enable syntax highlight I have to implement helpers that receive a css styled object rather than a template literal.

[SilencerWeb]

yeah, it would be a cool and useful feature, I'd like to see it in the next release

[jlee1201]

possibly related to #59 ?

[jChris85]

Any updates on this? Also looking for a solution. Would be a nice feature.

[microcipcip]

@aaccurso can you provide an example of your helper? I am annoyed by this issue :(

[microcipcip]

Thanks a lot, I have tried right now, that works, but what if I have a function that needs arguments like this? :(

const Container= styled.div`
  line-height: 1;
  ${bp.up('m')`
    display: none;
  `}
`

[Ehesp]

My use case is:

// Theme export
export const desktop = (...args) => css`
  @media (min-width: 1024px) {
    ${css(...args)};
  }
`;

// Some component
const Example = styled.div`
  display: none;
  ${props => props.theme.desktop`
    display: block;
  `}
`;

Not sure how this is do-able with css?

[Ehesp]

Oh wait that does! I see how that is working now, wasn't clicking before 👍

[microcipcip]

The css trick had some bugs for me so I've released a package for enabling highlighting in Webstorm and PhpStorm: https://github.com/microcipcip/styled-components-media-query