Template literals & interpolation

[jpmaga]

I would expect this to work, but for some reason it doesn't. I suppose it has something to do with how it is converted to object notation, but couldn't quite put my finger on it.

const mqs = Object.values(mq)
  .map((v) => `@media ${v} { color: red; }`)
  .join(" ")

// outputs: @media (width >= 768px) { color: red; } @media (width >= 1280px) { color: red; }

const fails = style`
    color: blue;
    ${mqs}
`
const alsoFails = style`
    color: blue;
    ${Object.values(mq).map((v) => `@media ${v} { color: red; }`).join(" ")}
`

const andAlsoFails = style`
    color: blue;
    ${"@media (width >= 768px) { color: red; } @media (width >= 1280px) { color: red; }"}
`

However, this works just fine:

const works = style`
    color: blue;
    @media (width >= 768px) { color: red; } @media (width >= 1280px) { color: red; }
`

Is this a limitation or am I doing something wrong here?

[wmertens]

Yes this is a limitation, it only supports interpolating selectors and values.

You can see the code here and there's also the tests for examples of what it supports.

I'm happy to accept PRs that extend support to arbitrary CSS interpolation, but I fear it will be complex and hard to support. PRs that are hard to support are not likely to get merged :-)