Styled-jsx: Passing variable string is parsed even if it shouldn't

[Kenjirou]

Example:

I need to add animations for SVG

<style jsx>{`
    svg:hover path {
        transition: d 0.5s ease-in-out;
        d: path(${pathString});
    }
`}</style>

For example pathString at that moment contains "M2,5 C2,8 8,8 8,5" value. So it should be parsed to something like this:

svg:hover path {
    transition: d 0.5s ease-in-out;
    d: path("M2,5 C2,8 8,8 8,5");
}

But we now have something like this (value that is passed to path() is without quotes):

svg:hover path {
    transition: d 0.5s ease-in-out;
    d: path( M2,5 C2,8 8,8 8,5 );
}

[a-ignatov-parc]

It works as expected otherwise this:

const indents = '10px 15px';

<style jsx>{`
    .container {
        margin: ${indents};
    }
`}</style>

will transform to this:

.container {
  margin: '10px 15px';
}

And it's not valid css.

[a-ignatov-parc]

In your case adding quotes should solve this problem.

<style jsx>{`
    svg:hover path {
        d: path('${pathString}');
    }
`}</style>

[Kenjirou]

@a-ignatov-parc yeah, I've already done it this way, but for me it looks like a hack. Maybe I'm wrong, but this behavior can confuse.

[a-ignatov-parc]

I understand your point.

There is a related issue with stylus where when you need to use a string variable in cases where you can't put strings you need to use special util to transform it.

@media (max-width unquote($mobile))
  ...

[a-ignatov-parc]

There could be some solution to this issue but additional styles processing will increase complexity and degrade performance. I think it not worth it.

[Kenjirou]

@a-ignatov-parc ok, got you. You can close the issue in that case.

[a-ignatov-parc]

Let's wait what thoughts @giuseppeg has on this question. Maybe he has different opinion 😉

[giuseppeg]

Is this valid css or custom syntax? Either ways CSS is a static language therefore interpolations of this kind are not always guaranteed to work.

[Kenjirou]

@giuseppeg yeah, it is a valid css to animate SVG.

[giuseppeg]

Re read the original message and there is nothing wrong on our side. See @a-ignatov-parc comments